Add calls-to-action (CTAs) to your content

After creating your call-to-action (CTA), you can add the CTA to both HubSpot and external pages. When configuring your CTA for external pages, the HubSpot tracking code must be installed. You can also add CTAs to your drag and drop marketing emails.

How you add a CTA to a page depends on what type of CTA you've created:

• If you're using embedded CTAs, you can add a maximum of 100 embedded CTAs per page. Embedded CTAs can be used in the following ways:
  • The default calls-to-action module in HubSpot pages
  • The default button module in a marketing email
  • A code snippet on your external website
• If you're using a sticky banner, pop-up box, or slide-in calls-to-action, you can either:
  • Trigger the CTA to appear when a visitor clicks a button.

• • Select one or more activation triggers, then set targets using the website's URL or visitor information. Once the first trigger is met, the CTA will appear on the targeted pages and for the specified visitors: 
    • Trigger on page scroll
    • Trigger on exit intent
    • Trigger after elapsed time
    • Trigger after inactivity

Add a CTA to your HubSpot content

Add a CTA to a HubSpot page

You can embed CTAs on pages hosted on HubSpot using the Call-to-action module. 

• Navigate to your content: 

  • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.
• Click the name of your content. 
• In the content editor, click the + Add button in the left sidebar. 
• In the sidebar editor, search for and click the Call-to-action module, then drag it into position onto the page. 
• In the CTA section, click Select.
   

Add a CTA to a HubSpot blog post

• In your HubSpot account, navigate to Content > Blog.
• Click the name of your post. 
• In the content editor, click the rich text module to customize its content.
• In the rich text toolbar, click Insert > Call-to-action.
   

• In the right panel, click the CTAs tab.
• Select a CTA to insert, then click Insert. 
• In the left panel, click Apply changes. The selected CTA will now display in your rich text editor and on your preview.
   

Trigger your CTA on button click in HubSpot 

• Navigate to your content:

  • Website Pages: In your HubSpot account, navigate to Content > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Content > Landing Pages.

• Click the name 
• In the left panel, in the Add tab, search for and select the default button module. Click and drag the button module onto your page.
   

• In the left panel, click the Link to dropdown menu and select CTA.
• Click the CTA dropdown menu and select an existing CTA. 
• Continue setting up your button module.
   

Add an embedded CTA to your drag and drop marketing emails

Add embedded CTAs to your drag and drop marketing emails and track the effectiveness of your CTA offer across multiple touchpoints.

To add a CTA in the drag and drop email editor:

• In your HubSpot account, navigate to Marketing > Marketing Email.
• Hover over the email that you want to add the CTA to, then click Edit. Or create a new email.
• In the left panel, click and drag the Button module into the email editor.
   

• In the left panel, click the Link to dropdown menu. Then, select CTA. 
• Under the CTA field, click Select. 
• In the right panel, select a CTA to insert, then click Insert. 
  

Please note: only a single button or image is supported when creating or selecting a CTA for your email. CTAs with multiple elements, such as a button and an image cannot be used.

Customize a theme's buttons to trigger your CTA on button click 

If you're using a custom theme in HubSpot, you may need to customize the theme's button module to trigger a CTA.

If you're editing a default theme, they must be cloned first. Themes purchased from the Asset Marketplace cannot be cloned; it's recommended to create a child theme instead. 

To customize your theme's button module: 

• In your HubSpot account, navigate to Content > Design Manager.
• In the top left, search for your button module. 
• In the right panel, hover over Button (Field group) and click Edit.
•  Under Grouped fields, hover over URL (URL) and click Edit.
• Click the Supported URL types dropdown menu. Then, select the CTA checkbox. 
• In the top right, click Publish changes. After publishing your changes, the CTA option should appear when using the theme button module on your pages.
   

Add a CTA to your external content

You can add CTAs to your external pages. Before using a HubSpot CTA on your external website, you must install the HubSpot tracking code.

After installing the tracking code, for most activation triggers, the CTA will appear when the first trigger is met. However, to use an embedded CTAs or CTA that is triggered when a visitor clicks a button, you will need to manually add the CTA. 

Embed a CTA on your external website 

To add an embedded CTA to your external pages:

• In your HubSpot account, navigate to Marketing > CTAs.
• In the top left, click the dropdown menu and select CTAs.
• Hover over a CTA and click Actions > Embed.
•  Click copy to clipboard to copy the CTA code to your clipboard. 
• 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, check that your external CMS has not altered the code.

• When you're finished, publish your page. 

Generally, editing the CTA will not affect its embed code. For example, editing the Open link in new tab option will not change the target="_blank" attribute in the embed code. 

The embed code snippet acts as a placeholder before the iframe version of the CTA is rendered. This rendered version of the CTA will reflect the correct Open in new tab value set in the editor.

To open a link in the same window in the placeholder, users can manually change the target attribute tag to target="_self".

 

Trigger a CTA on button click on your external website 

Before using a CTA on your external website, you must install the HubSpot tracking code. To set up your trigger on an external page:

• In your HubSpot account, navigate to Marketing > CTAs.
• In the top left, click the dropdown menu and select CTAs.
• Hover over a CTA and click Edit. 
• At the top, click the Targeting tab. 

• Under the Trigger on button click section, click Code snippet.
   

• In the dialog box, click Copy. 
• Paste the embed classes into your button on your external website. If you're not sure how to add CSS classes to the buttons on your site, you may need to work with your webmaster, IT department, or developer.