Precision Pages Blog

Creating Call-to-Action Buttons in HubSpot

create key on keyboardYou may not have given call-to-action buttons much thought before now, merely thinking about them as the buttons you see on websites that say ‘sign up’, or ‘register now’. But calls-to-action (CTAs) can be highly customized and are the first step in effectively targeting your audience and converting your visitors to leads.

In this post we'll be discussing creating calls-to-action with Hubspot Inbound Marketing software, but the general principles around CTAs can be applied wherever you'll be creating them.

What is a Call-to-Action?

Think about the words themselves: Call. To. Action. It’s asking to you do something. It’s motivating something in you to move forward, and take action. Now think about your website and Inbound Marketing: it’s all about creating great content and pulling your prospects towards you. That great content can be behind forms on your website, asking for your visitors information; asking for permission to contact them further. So you are offering them something (the rich content), and in return they give their name, email address, etc. So, after reading your offer, the visitor’s next step is to choose whether to take action, or not. That’s the call-to-action.

And it’s your job as a marketer to try and ensure that the majority of visitors who view that CTA, click it and continue on to the next step, usually a form. So you see, that CTA is vitally important. If it’s ugly or seems unprofessional or spammy, you may very well lose the person before they even get to the form your content is behind.

Creating an effective CTA comes down to relevance, knowing your audience, best practices, and testing.

Should a Call-to-Action be a Button or a Custom Image?

If you're just starting out making CTAs, you can start with simple buttons and get by with those just fine. In HubSpot, you'll start by going to the Marketing menu item, Lead Capture, then CTAs. You’ll choose Create CTA and then the simple interface walks you through your options.

HubSpot Simple CTA Creation

You can change the button size, color, corner options, and the font. After you have the button looking the way you want, you designate what page it will link to when clicked, and tie it to a campaign if you wish. After saving it, you can then embed the html code of the button into your website’s CMS on the page in which you want it to appear. Easy peasy. You can also easily insert your CTA into your emails/e-newsletters via HubSpot as well. 

Now, what if you would like to go beyond buttons and have an actual graphic be your CTA? For instance, you may want to create an image in Adobe Photoshop, or the like, that has a graphic element or photo within it. You can do that too. And that’s a way to take your CTAs to the next level; making them more attractive and eye-catching.

When you are creating a new CTA you simply choose ‘Image Button’ and upload your custom image.

Custom button vs Image button

Just remember to be judicious with your design of a custom image. You still want to keep it simple, clean, and eye-catching.

Testing Multiple Versions of Calls-to-Action

As the comic strip Dilbert once said, “Marketing is just liquor and guessing”. Well, that’s just not fair.
Marketing is liquor, and testing. 😋

Dilbert comic

We can learn so much simply by testing and experimenting on a website. That is, of course, if you have the right metrics available. Make sure your reports are tracking:

  • Clicks on your CTAs
  • How many people get to the form behind the CTA and abandon it vs. give their info
  • Which CTAs on which pages are getting clicked the most

Once you know how you're going to report on your activities, you can set up different versions of your CTAs to test which ones are most effective. The reason this is valuable is because it will give you the chance to discover what really resonates with your audience. If you only try one CTA with one version of wording, and you aren’t getting many conversions, you may never know if it might have done better with slightly different wording.

HubSpot allows for Multivariate Testing. Once your CTA is created, look under the dropdown to the right for the multivariate option. 

Multivariate test in HubSpot

Multivariate testing is more finely detailed than A/B Testing. The idea behind Multivariate is to change only one element, ideally, of your CTA, in order to narrow down the effective change when testing. For instance, did your web visitors click three times more often when the button said ‘Get 30-page Handbook’ vs. when it said ‘Get Handbook’? If so, your visitors likely want to know that the document they will be getting is robust and worth it, and feel better about handing their information over when they know it's more than a one-pager. Always frame your offer and CTA in that manner: is this compelling enough, robust enough, and valuable enough for a person to give me their contact information? 

You can add up to 50 variations of your CTA in HubSpot! Have fun and take comfort in knowing that your next marketing actions on the website will be based on proven tests.

What Words Work?

Words matter. As mentioned above, the right words can make or break a CTA. When deciding on the wording of your CTA, think about your brand as a whole. Think about the tone of the writing on your website, and on social media. Think about your clients. How do they speak?

Be concise. A CTA should be short, easy to read, and easy to pronounce; this is not the place for impressive vocabulary.

Set the expectation. Use words that give an idea of what will happen next. Are they about to register? Are they about to download something? Will they request an appointment time? Make sure your wording makes it clear what happens next. We are wary of clicking on things on the internet, so leave no doubt in your visitor’s mind what it is they are moving towards. And for the love of marketing don't just settle for the word 'Submit' 🙄

Color Psychology and Web Buttons

There's a lot of information out there about color psychology in marketing and advertising. Depending on where you look, you will find different answers to the question: ‘what color should my call-to-action be?’.

What’s important is to stay within the brand colors of the website, and choose an accent color for the actual button if it’s within a large custom image. Look at the color wheel and see which color is complementary to your main brand color and try a version of that for an accent color in a custom image, or on the button itself.

color wheel

It’s said that reds, oranges, and yellows can be effective for buttons, but use your judgment, and the considerations above, when using them. And ensure that the text on top of the button is easily readable and not clashing with the button color itself. It’s best to stay with white or black text on the button.

Lastly, once you decide on a button style, use that across your entire site for similar offers. This will ensure a congruent brand image.

Smart Calls-to-Action

Taking it to a whole other level, HubSpot offers what they call Smart CTAs. They allow you to show specific content to specific visitors.

According to HubSpot:

With smart CTAs, you can display a customized button to your different visitors based on data stored on their HubSpot contact record, or based on information known about their device type, country, referral source, or preferred language.

This means, you can add rules based on criteria such as:

  • Country: show certain content to visitors based on their country
  • Device type: customize the content shown by mobile, tablet, or desktop
  • Referral Source: display content based on how the visitor found your site
  • Contact List Membership: if a visitor is already a contact in your database, and part of a list (such as showing interest in a type of product), the content can be customized around that list topic.
  • Lifecycle Stage: if you are utilizing this field in your contact properties you can show top, middle, or bottom of the funnel content to your visitor based on what is designated in their contact record.

You will find the Smart CTA option under the options of an existing CTA, and from there it will walk you through your options.

Smart CTAs in HubSpot

Note: Marketing Hub Professional is required to access Smart CTAs in HubSpot.

Good Calls-to-Action Pay Off

Taking the time to put thought into the calls-to-action on your website will pay off in the long run with better conversation rates and thus more prospects with whom to engage. Put your customer first, think about what they want to see on the page and what will make them feel comfortable taking the action you are asking them to take. And test out different things in order to learn more about your customers!

Interested in HubSpot’s Call-to-Action Capabilities?

Free HubSpot Consultation