Embed button calls-to-action (CTA) on your external site

HubSpot button CTAs can be used on both HubSpot and non-HubSpot pages. Use HubSpot button CTAs on your external site to attract and convert leads.

Before embedding button CTAs on your external site, ensure that the HubSpot tracking code is installed on your pages.

Before you get started

Before adding a button CTA on your external site, please note the following: 

• Button CTAs that are embedded on your external website will automatically update globally when a change has been made to the content, text, or general design of the CTA.
• Due to differences in content management systems (CMS), the steps to access your site's HTML code and embed the button CTA code can differ. If you're not sure how to access the HTML code of your site or embed an external code, email this article to your webmaster, IT department, or technical resource.

• If you're embedding a CTA on a WordPress site, please take note of the following:

  • If you are embedding a CTA on your WordPress site, you may need to apply additional CSS declarations within your external stylesheet to make the CTA responsive. 
  • If you notice your CTA not working in WordPress or the embed code being altered when you view the live page, you may need to insert the CTA using a plugin to make sure the embed code stays intact.
  • If you're using the latest version of Gutenberg, which removes inline JavaScript, use the Inline JS Block for Gutenberg plugin to embed forms and CTAs onto your page.
    
    

Embed a button CTA on your external site

To embed a button CTA on your external site: 

• In your HubSpot account, navigate to Marketing > Lead Capture > Button CTAs.
• On the Calls-to-action dashboard, hover over a CTA and click Actions > Embed code.  
  
• In the dialog box, click Copy. 
  
  

• Navigate to your external website's content management system (CMS). 
• Paste the CTA embed code into the HTML of your non-HubSpot page, wherever you want the CTA to appear.  
• Preview your CTA on the webpage to check what it looks like when live. If the CTA does not display correctly, make sure that your external CMS has not altered the code that you copied. If you are using an image CTA, you may need to add additional styling to make sure the image CTA is responsive. 
• When you're finished, publish your page.