Inbound Marketing Tools and Tactics
      Back to home
      1. Customer Care & Help Centre
      2. Inbound Marketing
      3. Inbound Marketing Tools and Tactics

      Setting up Hubspot CTAs and how to position them on your website

      A Hubspot CTA or in other words Call-To-Action is a button on your website that drives customers to your site or any external links, files, or inner pages. CTA's should be visible, attractive, emphasized on your website and easy to be seen on any sections of your pages as well as on your emails.
       
      Hubspot CTA's comes in 2 types:
      • the Button CTA > where you can style freely using CSS or the pre-defined dropdown styles, and
      • the Image Button CTA > wherein you can upload an image and use it as the CTA.
       
      These are few key elements on how to setup your HubSpot CTA on your website and where to position them:
       
      Prerequisite
      CTAs are only available in Marketing Hub Professional, Enterprise, CMS Hub Professional, Enterprise and Legacy Marketing Hub Basic.

      1. How to create a CTA


      When creating a CTA, you need to:

      1. Navigate to Marketing > Lead Capture > CTAs.
      2. Then click on Create CTA orange button, then you can see this sliding window from the right pane.
      NOTE: You can either create a Custom Button CTA or an Image Button CTA (see image below)
      • When creating a Button CTA, you need to go to CTAs > Create CTA then select the Custom Button as the option, then you can populate all the details below like, Button content, Button style, Button color, and even add button size, custom class and custom CSS under Advanced options.


      • On the other hand, when creating Image Button CTA, you need to go to CTAs > Create CTA then select the Image Button as the option, upload your desired Image as the button, customize to your desired width if necessary and add Alt text, and hit Next.

      Pro tip around Image Button CTAs

      You can upload a GIF image to include movement on your CTA. This makes for a more engaging experience with a much higher likelihood for click-through than basic and pure static images, when appropriate to use a GIF Image.

      2. How to use the CTA or Embed them on an external website

      After creating your desired CTA with internal names, links, and designated campaign, you can then use it anywhere on your website or you can also embed it on an external website page.

      If you want to embed the CTA on an external web page:

      1. You need to go back to the CTA lists.
      2. Hover over to your desired CTA. 
      3. Click on the Actions button, then click Embed code, and copy the code provided.

      NOTE: You can also create a multivariate test for your CTA to execute an A/B test, or create a smart version of your CTA with different versions depending on specific display rules.

      2A. How to create a CTA for A/B testing

      To create a multivariate test or an A/B test CTA, you need to go to CTAs > hover over to Actions on the desired CTA > then Create multivariate test
       
       
      Once you hit save, you can then see this when you edit the CTA.
       

      2B. How to create a Smart Version from your CTA

      To create a multivariate test or an A/B test CTA, you need to go to CTAs > hover over to Actions
      on the desired CTA > then Create smart version
       
      Then you can see a window with multistep and options, where you will choose what type of    rules you will set,
      For example, you want to create a Smart Version using Country as the criteria of your CTA, and analyze your CTA performance based on your smart rule you set on each CTA.
       
      Once you hit save, you can then see this setup on your CTA, where the other CTA is the default one, and the other is the Smart CTA version.
       

      3. Where to add or position your CTA on the site

      When using a Drag & Drop theme or page, you can search for the CTA module on the left side pane, and easily drag it to any area of your page strategically.

      Thus, when positioning CTAs on your website, you need to make sure it is attractive, and proactive in the sense that it gets your visitor's attention, and can be easily located on your website for almost all ages. The CTA needs to have a clear purpose and also ensure the button text is straight to the point for maximum efficiency.

      Here's one best example of an Image CTA & Button CTA combined in one web page

      4. CTA clicks and in-depth analytics

      Additional to the details above, after setting up and placing your CTAs on the website, you can also see the CTAs analytics and how it performs. Due to their highly targeted insights based on purpose, they help you avoid the need for analytics tools and long analytics measurement plans, by simply using a CTA for the said purpose and checking in on the results.

      Navigate to go to the CTA Lists, choose the desired CTA you want to analyse, click on Actions, then View Details.

      You can see here the Clicks, Submissions, and CTA placements on your website or external links.

      CTA positioning and placement on the website is subjective and is an individual's choice but considering all the common placements being used by most agencies, editors or content strategist would be a big factor to start on your website and study how it performs and converts on your own website analytics.