Skip to content
CTAs

Create calls-to-action (CTA)

Last updated: November 29, 2021

Applies to:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Legacy Marketing Hub Basic

A call-to-action (CTA) is a button you can use on your HubSpot content to drive prospective customers to your website, where they can then convert on a form and be added to your contacts database. CTAs should be visually attractive, action oriented, and easy to locate on your pages and emails. 

Create a CTA

  • In your HubSpot account, navigate to Marketing > Lead Capture > CTAs.
  • Click Create CTA

Design a custom button 

  • In the slide-in pane, select Custom Button, then customize the CTA's style:
    1. Button content: enter the text that will display on your CTA button. You can also add emojis here. Your contacts and visitors will see the native emoji style for the device they're using (Mac, Windows, Chrome, Android, etc.).
    2. Button style: use the dropdown menu to select a style for your CTA button. If you want your button to look like a regular text link, select Link (No Style) from the dropdown menu.
    3. Button color: click the color picker or enter a custom color hex value in the Button color field.
    4. Advanced options: click Advanced options to customize your CTA's pixel padding and CSS styling

      cta-editor-create-custom-button-panel

Design an image button 

  • If you want to use an image for your CTA instead of customizing the button, click Image Button:
    1. Click Upload and select an image file from your device. 
    2. Click Browse images to select an image from your file manager. From the slide-in pane, select an image to use as a CTA button. 
    3. Adjust the Width and Height of the image button. Learn more about retina optimization for uploaded images. 
    4. Enter an Alt text for the image.
       cta-create-image-button-cta
  • When you're done editing your custom button or image button, at the bottom of the panel, click Next >

Set up your CTA options 

  • Configure your CTA options:
    • CTA internal name: for organizational purposes, enter a name for your CTA. Only users in your HubSpot account will be able to see the CTA internal name. 
    • URL redirect type:
      • External website URL: link your CTA to an external page outside of HubSpot, then enter the website URL in the Enter URL field.
      • HubSpot page or blog post: link your CTA to one of your HubSpot pages or blog posts, then select the page or post in the Choose a HubSpot page or blog post dropdown menu. The CTA's link will be tied to the page ID and any changes in the page's URL will automatically update the CTA's link. 
      • Meeting link: link your CTA to a HubSpot meeting link, then select the meeting link in the Choose a meeting link dropdown. Select the Open page in new window checkbox 
      • File link: link your CTA to a file in your file manager. Click Browse files and choose a file, then select the Open page in new window checkbox if you want visitors who click on the CTA to view the image in a new browser window. 
      • Email address: create a mailto link.
      • Phone number: create a link to call the specified phone number.

Please note: when setting up pages with content staging, CTAs will not automatically update and remain linked to the original page. It is recommended to update existing CTAs or create new CTAs for your new pages.

    • Campaign: if you want to associate your CTA analytics with a campaign, click the dropdown menu and select a campaign. 
  • Click Save. Your CTA will now show at the top of the pane.

 

Finish creating your CTA

  • To edit the CTA internal name, click the edit pencil icon at the top to edit the CTA's internal name.
  • To finish creating your CTA,  click Close
  • To create a smart CTA, click Create smart version
  • To A/B test your CTA, click Create multivariate test



Additional CTA actions

On the CTA dashboard, you can analyze high-level metrics to review how your CTAs are performing and take action on any of the CTAs listed. 

  • To preview your CTA, hover over your CTA and click Preview to display your CTA in a preview sidebar pane.
  • To take action on your CTA, click the Actions dropdown menu and choose one of the following: 
    • Edit: make changes to your CTA in the CTA editor. 
    • Create multivariate test: create a second version of your CTA to execute an A/B text with your contacts and visitors.  
    • Create smart version: create a smart CTA that displays different versions of the CTA depending on specific display rules.  
    • View details: review the analytics for your CTA, such the number of views, clicks, and submissions.
    • Clone: create an exact copy of your CTA. 
    • Embed code: add your CTA to your external pages by copying and pasting the embed code.
    • Delete: permanently delete your CTA.

 
Learn more about analyzing your CTA's performance