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 display when a visitor clicks a button.

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

Add a CTA to your HubSpot content

Add an embedded CTA to your HubSpot page or blog post 

To add an embedded CTA using a default module on a HubSpot page or blog post: 

• To add an embedded CTA using a default module on a HubSpot page:

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

• Click on the website page or landing page to add the CTA. 
• In the left panel, in the Add tab, search for and select the default Call-to-action module. Click and drag the module onto your page. 
• In the left panel, click Select.
   

• To add an embedded CTA on a HubSpot blog post: 
  • In your HubSpot account, navigate to Content > Blog.
  • Hover over the blog post to insert the CTA, then click Edit. Or, create a new blog post. 
  • Locate a rich text module in the content editor. Then, click the module to customize its content.
  • In the upper right, 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 in 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 on the website page or landing page to add the CTA and corresponding button. 
• 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 in order to trigger a CTA. To edit the files of default themes in the design manager, they must first be cloned. 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 of the design manager, 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 > Lead Capture > 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, make sure that your external CMS has not altered the code that you copied.

• When you're finished, publish your page. 

Trigger a CTA on button click on your external website 

Before using a CTA on your external website, ensure you've installed the HubSpot tracking code. To set up your trigger on an external page:

• In your HubSpot account, navigate to Marketing > Lead Capture > 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.