Extend the HubSpot Call To Action (CTA) Feature

| January 18th, 2013 |

HubSpot All-in-One Marketing SoftwareIn this article, Jaime shows you how to add a title tag and hover effects to your HubSpot CTAs. The title tag is helpful for both SEO and displaying a small amount of text when the viewer mouses over a CTA. The hover effects add a nice touch often seen on web site buttons.

Introduction to HubSpot CTAs

What is a Call To Action?

A HubSpot CTA is an attention-getting button or link on a page. It is intelligently placed on a page to encourage viewers to click on it and to start a flow that will lead to a conversion on the site. Some example CTAs are “Start a Free Trial” or “Download a Whitepaper” buttons.

CTAs in HubSpot have a lot of inherent functionality. For example, they track how many times they have been viewed, how many clicks they’ve garnered, and how much of those clicks lead to conversions. Some advanced features also include the ability to perform A/B tests to determine which version of a CTA results in better goal completion.

CTAs in HubSpot

CTAs are built using HubSpots CTA builder tool. You don’t need to touch code in order to create one and the end result will be an HTML/JavaScript code for installing on your website. Once the code is generated it will contain something similar to this:


<!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="hs-cta-wrapper-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc">
<span class="hs-cta-node hs-cta-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc" id="hs-cta-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc" data-title="Click me!" data-img="/i/buttons/bgbutton_try.png" data-onimg="/i/buttons/bgbutton_ontry.png">
<!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]-->
<a href="http://cta-redirect.hubspot.com/cta/redirect/201885/e4459cb8-88cc-4881-aed2-73d3e8c4f4fc"><img class="hs-cta-img" id="hs-cta-img-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc" style="border-width:0px;" src="http://no-cache.hubspot.com/cta/default/201885/e4459cb8-88cc-4881-aed2-73d3e8c4f4fc.png" /></a>
</span>
<script type="text/javascript">
(function(){
var s='hubspotutk',r,c=((r=new RegExp('(^|; )'+s+'=([^;]*)').exec(document.cookie))?r[2]:''),w=window;w[s]=w[s]||c,
hsjs = document.createElement("script"), el=document.getElementById("hs-cta-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc");
hsjs.type = "text/javascript";hsjs.async = true;
hsjs.src = "//cta-service-cms2.hubspot.com/cs/loader-v2.js?pg=e4459cb8-88cc-4881-aed2-73d3e8c4f4fc&pid=201885&hsutk=" + encodeURIComponent(c);
(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(hsjs);
try{el.style.visibility="hidden";}catch(err){}
setTimeout(function() {try{el.style.visibility="visible";}catch(err){}}, 2500);
})();
</script>
</span>
<!-- end HubSpot Call-to-Action Code -->

The above code generates a button that can be managed remotely from your HubSpot account. Here’s a screenshot show ing just a few details on one particular CTA:

Final CTA will hover

How to set up a basic CTA

Setup of a basic CTA is really easy in HubSpot. The first step is to select a button style, which can be done using the button builder or by using a custom image. The only difference between the two is that the custom image route ensures the button will look exactly as you desire. If you already have an existing design, it is best to use this option. Once the design is finalized, you can create the CTA and retrieve it’s installation code for your website.

The HubSpot CTA Builder

What are the limitations of of a HubSpot CTA?

No Title tags

In our CTAs, we wanted to have a title attribute on the A tag in order to tell the viewer more about the plan they’re selecting. Unfortunately this isn’t an option while creating the CTA and we were left without an alternative. The CTA renderes only an A tag with an IMG tag and that’s it.

No Hover State

One of the drawbacks of the custom image route is that there’s no option to define a hover state. If your design includes a hover state, it will not work and you’ll be stuck with just a regular image button with no hover effects. Maybe HubsSpot will support this in the future, but for now it is not supported by the application. We ran into this problem while building some CTAs and ended up making a custom solution that enabled us to add hover functionality to these buttons, without having to modify the CTA in such a way that it interfered with its functionality.

How to create an advanced HubSpot CTA

Using the code from above, identify the SPAN with the class name “hs-cta-node”. This tag will be used to hold extra information, specifically the hover state of the image and a custom title tag.


<!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="hs-cta-wrapper-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc">
<span class="hs-cta-node hs-cta-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc" id="hs-cta-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc">
...

Next, change it by adding these attributes, and customize them to your specific setup:


<span class="hs-cta-node hs-cta-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc" id="hs-cta-e4459cb8-88cc-4881-aed2-73d3e8c4f4fc" data-title="Click me!" data-img="/i/buttons/bgbutton_try.png" data-onimg="/i/buttons/bgbutton_ontry.png" >

The data-title attribute will be the title, data-img will be the off state of the image, and data-onimg will be the onstate when hovered. The images being referenced will have to be manually created and uploaded by you into your site as well.

Next, place this utility function so it lies after the CTA code:


<script>
(function(d) {
  var customize = function(e) {
    var target = e.target ? e.target : e.srcElement;
    if(target && target.className == 'hs-cta-img' 
       && !target.getAttribute('data-registered') && target.parentNode) {
      var span = target.parentNode.parentNode;
      target.title = span.getAttribute('data-title');
      target.src   = span.getAttribute('data-onimg');
      target.onmouseover = function() {
          target.src = span.getAttribute('data-onimg');
      }
      target.onmouseout = function() {
          target.src = span.getAttribute('data-img');
      }
      target.setAttribute('data-registered',1);
    }
  }
  if (d.addEventListener) {
    d.addEventListener('mousemove', customize, false); 
  } else if (d.attachEvent)  {
    d.attachEvent('onmousemove', customize);
  }
})(document);
</script>

That’s it. Now, every time the page loads, and HubSpot renders the CTAs on your page, this utility function will detect your custom hover images and title and apply them on the image any time the viewer hovers over it. The script doesn’t depend on a javascript framework so it should play nice if you already have one.

FInal CTA

6 Responses to “Extend the HubSpot Call To Action (CTA) Feature”

  1. Scott says:

    Are your CTA’s showing up in IE8? I am using the “unstyled” CTA option and then styling the generated class on my end via CSS. However, the conditional code is failing to insert whatever snippet it needs to generate the button in IE8. Super frustrating.

  2. Jaime says:

    Scott,

    Oops … it should now. Just rename all instances of readAttribute to getAttribute or just copy the function again from the post as I’ve updated it. Thanks for noticing that.

  3. Abhi says:

    I tried this but after my mouse leaves the CTA area, it doesn’t show the original state, but instead a missing image graphic. I can still hover over that and it will show me the hover state, but I can’t see the original state anymore.

  4. Jaime says:

    Abhi, that points to something wrong with the data-img attribute. For this example I used

    data-img=”/i/buttons/bgbutton_try.png”

    But in your code it will be different. Does the image being referenced exist on the server?

    You may also be able to troubleshoot further by replacing

    target.onmouseout = function() {
    target.src = span.getAttribute('data-img');
    }

    with

    target.onmouseout = function() {
    console.log(span.getAttribute('data-img'))
    target.src = span.getAttribute('data-img');
    }

  5. Chad P says:

    I was trying to use thsi but i am having the same issue with it as Ahbi. If i dont place a data-img and data-onimg or a data-title the default image diapears when you hover over it. I dont need this for all CTAs on a page just some. Can it be used for only ctas that have the data-img or data-title ?

  6. Jaime says:

    To only run on items with the data tags just change this line:


    if(target && target.className == 'hs-cta-img'
    && !target.getAttribute('data-registered') && target.parentNode
    && span.getAttribute('data-img')) {

    I basically just added this part:

    && span.getAttribute(‘data-img’)

    Jaime

Leave a Reply

What is Intervals?

Intervals is online time, task and project management software built by and for web designers, developers and creatives.

» Learn more about Intervals
» See Plans & Pricing

Contributor Profile
John Reeve

John is a co-founder, web designer and developer at Pelago. His blog posts are inspired by everyday encounters with designers, developers, creatives and small businesses in general. John is an avid reader and road cyclist.
» More about John Reeve
» Archived posts by John Reeve

Contributor Profile
Michael Payne

Michael is a co-founder and product architect at Pelago. His contributions stem from experiences managing the development process behind web sites and web-based applications such as Intervals. Michael drives a 1990 Volkswagen Carat with a rebuilt 2.4 liter engine from GoWesty.
» More about Michael Payne
» Archived posts by Michael Payne

help.myintervals.com

help.myintervals.com
Videos, tips & tricks