Last updated: May 22, 2023
Available with any of the following subscriptions, except where noted:
Marketing Hub Professional, Enterprise
|
CMS Hub Professional, Enterprise
|
| Legacy Marketing Hub Basic |
HubSpot legacy CTAs can be used on both HubSpot and non-HubSpot pages. Use HubSpot CTAs on your external site to attract and convert leads.
Before embedding CTAs (legacy) on your external site, ensure that the HubSpot tracking code is installed on your pages.
Before you get started
Before adding a CTA (legacy) on your external site, please note the following:
- 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 CTA (legacy) 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 CTA (legacy) on your external site
To embed a button CTA on your external site:
- In your HubSpot account, navigate to Marketing > Lead Capture > CTAs.
- In the top left, click the dropdown menu and select CTAs (Legacy).
- On the CTAs (legacy) 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.
