Integrating a HubSpot CTA (call to action) embed code in Webflow is a relatively straightforward process. Follow the steps below to accomplish this:
Step 1: Obtain the HubSpot CTA Embed Code
First, you will need to generate the HubSpot CTA embed code within your HubSpot account. To do this, navigate to your HubSpot dashboard, and go to Marketing > Lead Capture > CTAs. Create or edit an existing CTA and copy the embed code provided by HubSpot.
Step 2: Go to Webflow Designer
Log in to your Webflow account and open the project to which you want to add the HubSpot CTA. Once you're in the Designer, navigate to the page where you want to insert the CTA.
Step 3: Add an Embed Element to the Webflow page
Using the Webflow Designer, add an Embed Element to the desired section of your page. You can find the Embed Element in the Elements Panel on the left sidebar. Drag and drop it onto the canvas where you want the CTA to appear.
Step 4: Paste the HubSpot CTA Embed Code
Double-click on the newly added Embed Element to open its settings. Within the settings, you'll find a code editor. Paste the HubSpot CTA embed code that you obtained from Step 1 into the code editor.
Step 5: Adjust Positioning and Styling (if necessary)
By default, the embedded CTA will likely inherit the styles of the containing Webflow section. If you wish to make any adjustments to the positioning or styling of the CTA, you can use the Webflow Designer's styling tools or custom CSS.
Step 6: Preview and Publish
Preview your Webflow site to ensure that the HubSpot CTA is displaying correctly. Once you're satisfied, click the Publish button to make your changes live on your website.
That's it! You have now successfully integrated a HubSpot CTA embed code into your Webflow site. Visitors to your website will now be able to interact with the CTA and HubSpot will capture and track their engagement data within your HubSpot account.