<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1657797781133784&amp;ev=PageView&amp;noscript=1">

Where Marketers Go to Grow

Search HubSpot's Blogs

Start typing...

Press return/enter to start your search

April 7, 2014 // 2:00 PM

How to Add Slide-In Calls-to-Action to Your Blog Posts [Tutorial]

Written by | @

slide-inBlogging is a great way to get more traffic to your site, and if you play your cards right, you can also generate tons of leads. Typically, many blogs (including HubSpot's blog) end each post with a call-to-action (CTA) that leads to a landing page.

But the question is ... are readers noticing your blog's CTAs?

The problem with static CTAs at the bottom of each blog post is that after a while, visitors learn to tune them out. This isn't only a problem with your repeat visitors, either -- since so many blogs implement this tactic, even your new visitors are ignoring your "additional content" or "recommended next steps." 

Lots of blogs take the opposite extreme by using popups. (Oh, the horror.) Not to be condescending -- I've experimented with popups and overlays before. But there are some blogs out there with great content that you simply cannot read because there's popup after popup trying to get you to sign up for a mailing list or download something.

How about something a bit more elegant that catches people's attention ... without being obnoxious?

If you scroll halfway down this blog post, you'll see it in action -- a CTA that slides in from the right side of the screen. Ideally, this CTA will enter the screen below your sidebar content so it doesn't cover it, which is why I'm not having it slide in at this point in the post. But this is what it will look like when you scroll further down:

slide-in-cta-screenshot

Do these slide-in CTAs actually work?

Yes. They work astoundingly well. Over the course of a month, I ran a test where I added these slide-in CTAs to ten of HubSpot's highest-trafficked blog posts. I compared the slide-in CTA vs. the static CTA at the bottom of each post and looked at three data points: 

  • Clickthrough rate (CTR) - What percentage of blog post visitors clicked each CTA?
  • Conversion rate (CVR) - What percentage of the people who clicked ultimately converted on the landing page form?
  • Submissions - How many leads did each CTA ultimately generate?

In this test, the slide-in CTA had a 192% higher CTR and generated 27% more submissions. The number of submissions actually wasn't higher, because the CVR on the slide-in CTAs was lower than the static CTAs. But the volume of clicks was so great that it was worth compromising on CVR.

How to Install the Slide-In CTAs

To install these slide-in CTAs on your blog, you'll need:

  1. The ability to copy/paste and basic HTML knowledge
  2. Access to your blog's template HTML code
  3. Access to your blog's CSS stylesheet

If you don't have access to #2 or #3, email this article to your webmaster so he or she can paste in these CSS and Javascript elements for you. You can do the rest.

If this seems overwhelming, keep in mind that you'll only need to do steps 1 and 2 below once. Once the javascript and CSS elements are added to your site, you'll only need to do steps 3-5 each time you want to add a slide-in CTA.

1) Add javascript to your blog's template.

First, let's add the following javascript to an HTML section within the <body> of your blog template.

<!-- Only include the following jQuery script if not already included on your website. Most Content Management Systems, including HubSpot's COS include this. Include this if you use HubSpot's legacy CMS.  -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<!-- Slidebox Script -->
<script type="text/javascript">
$(function() {
  var slidebox = $('#slidebox');
 if (slidebox.length>0) {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();
        if  ($(window).scrollTop() > distanceTop){
            slidebox.animate({'right':'0px'},300);
}
        else{
            slidebox.stop(true).animate({'right':'-430px'},100);
}
    });
    $('#slidebox .close').on('click',function(){
        $(this).parent().remove();
    });
  }
});
</script>

If you use HubSpot to host your website, you can add a Custom HTML module below your Blog Content module and paste in the Javascript.

hubspot-html-module

If you use Wordpress, add an untitled "Text" widget in your footer or sidebar, and paste in the Javascript.

wordpress-code

For any other CMSs or website platforms, contact your webmaster for instructions.

2) Add CSS to your stylesheet.

Next, let's add the CSS that will control the look/feel of your slide-in CTA to your CSS stylesheet. The only thing you need to edit is the #F7761F (in red below) to a color that would match your website's color scheme.

/*SLIDE-IN CTA
--------------------------------------------- */
#slidebox {
padding: 10px 16px 10px 10px;
background-color: #fff;
border-top: 3px solid #F7761F;
position: fixed;
bottom: 0;
right: -430px;
-moz-box-shadow: -2px 0 5px #aaa;
-webkit-box-shadow: -2px 0 5px #aaa;
box-shadow: -2px 0 5px #aaa;
}

a.close {
background: transparent url(http://cdn2.hubspot.net/hub/53/file-527841348-gif/close.gif) no-repeat top left;
width: 13px;
height: 13px;
position: absolute;
cursor: pointer;
top: 10px;
right: 10px;
}

a.close:hover {
background-position: 0 -13px;
}

@media only screen and (max-device-width: 480px) {
#slidebox {
width: 100%;
}
}

3) Create the image for your CTA.

Create an image for your CTA that's 400px by 178px. Click here to download a Photoshop template you can use to get started. 

photoshop-template

Upload this image to your website and copy the image file location to your clipboard or a notepad/text pad file for reference in the next step.

4) Add an "id=last" to a paragraph or header tag in your blog post.

Navigate to one of your existing blog posts. Edit this post, then go into HTML mode (rather than rich text mode). 

Find the place in the article in which you would like the slide-in CTA to appear when the user scrolls to it. This will usually be somewhere below the last of your sidebar elements.

Replace the <p> on that paragraph with <p id="last">. You can do the same for <h2> or <h3> tags ... just add id="last" (for example: <h2 id="last">).

5) Add the CTA code to the very bottom of the blog post.

Stay in the HTML mode of the blog post. At the very end of the HTML, add the following code. Replace the red URLs with your own landing page and image path URLs.

<div id="slidebox"><a class="close">&nbsp;</a><a href="http://yoursite.com/landing-page" target="_blank"><img class="shadow alignCenter" style="width: 90%; height: auto;" src="http://yoursite.com/images/cta-image.png"></a></div>

If you're a HubSpot customer and want to track clicks, run A/B tests, etc., create a new CTA in the Calls-to-Action tool using your new image as the custom image. Then grab the embed code and use this code instead:

<div id="slidebox"><a class="close">&nbsp;</a>ADD CTA EMBED CODE HERE</div>

Whew, you did it! Excellent work. Now you'll have slide slide-in CTAs on any blog post you want, and they're sure to bring in more leads.

Want to share this post? Here are some ready-made tweets:

Click to tweet: How to Add a Slide-In Call-to-Action To Your Blog Posts [Step-by-Step Guide] - http://hub.am/1lFWMOS by @DianaUrban at @HubSpot #blogging

Click to tweet: Add a slick slide-in CTA to your blog posts. Here are the step-by-step instructions: http://hub.am/1lFWMOS #leadgeneration #blogging

Click to tweet: I'm so excited to add this to my blog... it's going to help me get tons more leads - http://hub.am/1IFWMOS

free call-to-action templates in ppt

                                     

Topics: Calls-to-Action

Subscribe to HubSpot's Marketing Blog

Join 300,000+ fellow marketers! Get HubSpot's latest marketing articles straight to your inbox. Enter your email address below:

Comments

Sorry we missed you! We close comments for older posts, but we still want to hear from you. Tweet us @HubSpot to continue the discussion.

Comments
subscribe to hubspot's marketing blog
X

Join 300,000 Fellow Marketers

Get expert marketing tips straight to your inbox, and become a better marketer. Subscribe to the Marketing Blog below.