Call us now on 0161 7110 110

25 Oct 2016

What are HubSpot CMS smart CTAs and why do I need them?

Untitled design (2).png

"We looked at the data for more than 93,000 calls to action created using HubSpot over a 12 month period. What did we find? Calls-to-action targeted to the user performed 42% better than calls to action that were generic.”

Not our words but the words of HubSpot. Personalisation is a really key and effective way to draw a user further down the sales funnel. The power of being able to offer up a different message to a user dependent on a series of different factors is immense. We’re told day in day out about how little time users spend on the site before leaving if they can’t find something that appeals, which is why this form of customisation can make a massive difference in retaining the visitors engagement on your site.

You can’t customise calls to action to include personalisation tokens (you can use them in your content though, even on your main website pages if you're using HubSpot CMS website pages, so you should be doing that!), but there are 6 different ways you can trigger a customised call to action for the user which will give them the feeling that you’re really looking after them and are going to delight them!


If you’re on the web then you’re global. Nothing says that more than if you’ve got a site that has multiple sub folders or sub domains targeting different people from different countries. The reality is though that can be very expensive to build and maintain, especially if you’re going to go to the trouble of translating all of the pages. What we’ve found works really well in the past is a dedicated series of landing pages, easier and cheaper to get translated, which you can use to work out just how much traffic from different countries will actually convert so you can measure whether or not a full site translation is worth it. Using CTAs to steer your visitors to these custom landing pages and perhaps away from offers that won’t be applicable to their territory can be a good idea, and it can even present opportunities in other markets your company may not have previously considered.

Preferred Language

Similar to country, if you’re aware through your analytics you’re getting traffic from other countries or in this case traffic from the same country but from someone who doesn’t share your native tongue, it gives you the opportunity to really target them with a translated message. This is the sort of personalisation that would get you noticed over and above your competitors. It’s a low cost option, I wouldn’t trust Google translate on a professional site, you should be able to get small amounts of text translated for minimum cost and fuss and it will aid your foreign speaking visitors in their journey when searching for a solution or product provided by your company.

Device type

Yes of course you’ve got a responsive website, but have you got responsive call to actions? You can, and we have, created responsive call to actions, but they tend to be quite complicated to create and it’s not something we’ve been able to make ‘stick’ as a long term solution. If you’re working with button styles and text then you’ll probably get away with just one style (although those line returns can really spoil your messaging), but banners that work at desktop can become unreadable at mobile. The device type option gives you the chance to present different formatting of your message so that it’s clear to read at the different screen sizes. You might even want to shorten/make punchier your message at mobile for instance so it doesn’t take up too much screen real estate and the entire message is more likely to be read. You could even surmise the mindset of the user dependent on device. If they’re on the desktop, are they looking for a helping hand, an in depth guidance into how to best solve a problem perhaps? If they’re on a mobile, are they on the train and looking for a quick solution in-between the going dark of the tunnels? You could A/B test your messaging as well this way to see what works best.

Referral Source

There’s 7 different types of source that a user could have arrived by, organic search (though with Google SSL you’re not going to get a clear picture of how people arrived from there only Bing), referrals from other sites (so if you know the topic that was referenced on that site where the link lives then you know their potential pain), social media (again if you spread your campaigns differently across social media then this is a good measure, otherwise if you blanket promote you’ll have to best guess user intent), email marketing (you can tell exactly what the user is wanting because if they’ve opened, read and engaged with what you’ve sent then you’re definitely on the right track!), paid search (and again you’re going to have targeted keywords with these campaigns so it should be easy enough to customise the CTA to suit), direct traffic (you have no indicator here, so your best bet is to go with your latest and most powerful generic message, this could be your default if you like) and finally other campaigns (again these are your custom markers so you should have a good idea what the user has come to site looking for).

Contact list membership

You should be able to use the history of the users interest in your content to guide them along. This is key to correctly nurturing your visitors and ensuring that you’re presenting them with topics they’re actually interested in. And remember, your messaging is key at this stage. Your solution may be exactly the same for several different pain points, but if you don’t take the opportunity to connect their specific pain point to your product and solution then you may lose them from the site. It should also help you steer people further down the workflow of your assets if your email nurturing has gone unnoticed by them, which happens a lot, so this is a great second chance at it.

Lifecycle stage

Again this is all about messaging. Once someone has taken that initial step to engage with you by filling in a form, you can use your lead scoring system and evaluation to tailor your CTA to try nudge them towards that ultimate stage of becoming and customer and then on, hopefully, to evangelist! There’s plenty of great HubSpot advice on how you should change your language based on lifecycle stage, but you should also talk to your sales team on this one, see if they have ideas about how you should alter your messaging depending on how deep into the sales funnel the user is.

Download our free guide

This is an inline guide purely for the editor, it will not show in the final blog, designed to assist you with setting the options below in the 'Gate Trigger' section.

You will not be able to use the WYSIWYG editor for this it's code only so follow these instructions carefully.

We cannot use a standard call to action to open the rest of the content, but we do want to track when someone clicks on the button to read the rest of the blog. Here's what the code should look like:
<a class="gate-trigger-button" href="#" id="What are HubSpot CMS smart CTAs and why do I need them? - Read the rest of the post" title="Read the rest of the post">Read the rest of the post</a>

Instead of using a button, you can ask people a what their intent of being on the blog is. Here's an example.
<h3 style="text-align:center;">Ready to read the post?</h3>
<p style="text-align:center;">Great, just let us know why you're here today</p>
<ul id="survey">
<li><a href="#" id="What are HubSpot CMS smart CTAs and why do I need them?">Answer One</a></li>
<li><a href="#" id="What are HubSpot CMS smart CTAs and why do I need them?">Answer Two</a></li>
<li><a href="#" id="What are HubSpot CMS smart CTAs and why do I need them?">Answer Three</a></li>
<li><a href="#" id="What are HubSpot CMS smart CTAs and why do I need them?">Answer Four</a></li>
<li><a href="#" id="What are HubSpot CMS smart CTAs and why do I need them?">Answer Five</a></li>
<li><a href="#" id="What are HubSpot CMS smart CTAs and why do I need them?">Other</a></li>

If you want to connect what the user selects in the survey with the call to action at the bottom, use the following:
<ul id="cta-list">
<li><a href="#">CTA One</a></li>
<li><a href="#">CTA Two</a></li>
<li><a href="#">CTA Three</a></li>
<li><a href="#">CTA Four</a></li>
<li><a href="#">CTA Five</a></li>
<li><a href="#">Default</a></li>

We need to add the same form for each blog, you can if you want to make your own form but you'll need to change the formId which will be in the URL for the form e.g.
<script charset="utf-8" type="text/javascript" src="//"></script>
portalId: '145288',
formId: 'ee2dd282-1afb-4040-b67a-6ea2fe6e32cc',
css: '',
onFormSubmit: function($form) {
gateTriggerForm('What are HubSpot CMS smart CTAs and why do I need them?');

CTA Form
If people are clicking the CTA but then not filling in the form on the landing page they're being taken to, it may be worth loading the form on the same page to see if that helps the submission rate:
<div class="cta-form-image">
<a class="cta-form-image-button" href="#" id="CTA Click - What are HubSpot CMS smart CTAs and why do I need them?"><img alt="Title of the CTA" src="" title="Title of the CTA"></a>
<div class="cta-form-inputs">
<a href="#" class="cta-form-inputs-close"><i class="fa fa-times" aria-hidden="true"></i></a>
<script charset="utf-8" type="text/javascript" src="//"></script>
portalId: '145288',
formId: '80edeb18-6298-4325-9d45-eb64c02b2d1c',
css: '',
onFormSubmit: function($form) {
gateTriggerCTAForm('What are HubSpot CMS smart CTAs and why do I need them?');

This is the rest of the blog

When the page loads, or when it is being edited, this content will appear. When the page is loaded on the blog, the content will be hidden by the script until such times the trigger button is clicked or the trigger form is completed.

If you're not using this section then you should delete the text in here.

Topics: Hubspot

Blog Comments