Automate ABM landing pages in Webflow programmatically

Step 2:

Create a new Webflow collection

Next, if you haven’t already, create a new collection in Webflow. This requires two things: first, you need to design an ABM landing page template you love; second, you need to choose which custom fields on that landing page you want to populate with data from Clay. 

For example, in our internal ABM landers here at Clay, we created custom fields for:

• Company name
• Hero headline
• Salesforce or Hubspot tech stack
• Product lines
• Top three customers
• Brand colors 

We use this exact workflow to find the data for those aforementioned custom fields in Clay, then send it over to Webflow programmatically (more on this in the next steps). 

For more details on creating collections in Webflow, learn more here.

‍

Step 3:

Create and customize Clay enrichments

Once you know which parts of your landing page you want to personalize for each account using enriched data from Clay, now it’s time to customize this Claybook template to go find those data points. 

Out of the box, this template already includes:

• Landing page title
• Company logo URL
• Top 3 customers
• Hero headline
• CTA headline
• Brand colors

But the skies are the limit! 

For example, you can create a lead scoring column that only triggers a new landing page if the company meets your ICP criteria. Or you can use AI to draft personalized value propositions for any section of the page. Or you can programmatically create personalized Arcade product demos (using this Claybook) and embed them in the hero section of your landers. 

Either way, customize the existing columns if you want to keep them, or add additional enrichments now.

‍

Step 4:

Check for an existing page

There’s two Webflow integrations in this table: one that creates a new landing page and one that updates an existing landing page. But we don’t need both of them to run, so we use conditional logic to run only the action that’s necessary. For example, if a landing page already exists for a company, we update it. If it doesn’t, we create a new one. 

To check whether or not a page already exists so we can run either column based on the above conditions, we need to use an HTTP API call to search your Webflow database for any preexisting URLs.

A successful HTTP API call will return a “200” response code to your column. That just means the connection was successful. But within that API call, we’re asking Weblow if any landing pages already exist with a slug that includes the target accounts name. For example, if “/Uber” already exists, the API call will return a “1” under pagination. If it doesn’t exist, it will return a “0.” We then use that data point to set up our conditional logic. 

To make this work for your table, you need to connect the HTTP API column to your Webflow account by pasting your collection ID to the endpoint URL and inserting your API token (both places marked in the guided demo).

‍

Step 5:

Set up Webflow native integration

Last, it’s time to set up both Webflow actions (create new page and update existing page). 

The process is simple and straightforward:

• Open each respective column
• Connect to your Webflow account
• Select the Webflow site and collection
• Map your custom fields
• Save and run

Once you’ve finished this step, all you need to do is enter a company name in the first column of this table and the rest will run automatically. Sit back and watch as Clay helps you scale ABM landers by the dozens in literal seconds.

‍