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

After creating your call-to-action (CTA), you can add the CTA to both HubSpot and external pages. How you add a CTA to a page depends on what type of CTA you've created:

• If you've created an embedded CTA, you can add the embedded CTAs using the default calls-to-action module in HubSpot, or a code snippet on your external website. 
• If you've created 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. When configuring your CTA for external pages, the HubSpot tracking code must be installed.
    • Trigger on page scroll
    • Trigger on exit intent
    • Trigger after elapsed time
    • Trigger after inactivity

Add a CTA to your HubSpot pages

Add an embedded CTA to your HubSpot page 

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

• Navigate to your content:

  • Website Pages: In your HubSpot account, navigate to Marketing > Website > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Marketing > 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.
• 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 Marketing > Website > Website Pages.
  • Landing Pages: In your HubSpot account, navigate to Marketing > 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.
  
  
  

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 Marketing > Files and Templates > Design Tools.
• 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 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.