Skip to main content
Act-On Software

How to add slide-in call-to-action to your Blog or Website

AUDIENCE: 

  • Web Developers
  • Marketing

OBJECTIVES: Learn how to add Dynamic Calls-to-Action

Blog posts are a great way to generate more website traffic and if you have a strong call-to-action (CTA), it can lead to an increase in leads generated. In most cases, your CTA will lead to a Landing Page but how do you attract visitors into clicking the CTA?

Dynamic Calls-to-Action for your Blog Posts (or Website)!

Blog posts are a great way to generate more website traffic and if you have a strong call-to-action (CTA), it can lead to an increase in leads generated. In most cases, your CTA will lead to a Landing Page but how do you attract visitors into clicking the CTA?

Often times, marketers will use a pop up to grab the visitors attention but it can lead to an experience that isn’t pleasant. What if there was a way to catch people’s attention without being obnoxious? A CTA that slides in from the right side of the screen can be implemented with your CMS!

How to install the Slide-In CTA’s

To install these slide-in CTA’s on your blog or website, you’ll need:

  • Copy/paste and basic HTML knowledge
  • Access to your blog’s or website’s template HTML code
  • Access to your blog’s or website’s CSS stylesheet

If you don’t have access to items 2 and 3, contact your webmaster so that they can paste these elements for you.

Add JavaScript to your blog’s template

Add the following Javascript to an HTML section within the <body> of your blog template.

<script type="text/javascript">// <![CDATA[$(function() {
  var slidebox = $('#slidebox');
  if (slidebox.length>0) {
    $(window).scroll(function(){
        var distanceTop = $(window).height()-$('#last').offset().top ;
        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 Wordpress, add an untitled “Text” widget in your footer or sidebar. Then paste in the Javascript.

Add CSS to your stylesheet

Next, let’s add the CSS that will control your CTA. The font color will need to be changed, bolded and underlined below, so that it matches your website’s color scheme.

#slidebox {
    padding: 10px 16px 10px 10px;
    background-color: #fff;
    border-top: 3px solid #7FC41C;
    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://ci39.aocdn.net/acton/attachment/5476/f-0013/1/-/-/-/-/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%;
    }
}

Create the image for your CTA

Create an image for your CTA that’s 400px by 178px. After you’ve created the image, upload this image to your website or Act-On Media Library. Copy the image link so that we can reference it in the next step.

Add an “id=last” to a paragraph or header tag in your blog post.

Navigate to one of your existing blog posts. Go to the HTML mode of the blog post. Find the place in the article where you would like the slide-in CTA to appear.

Replace the <p> on that paragraph with <p id=”last”>. You can place this in other HTML tags such as <h2> or <h3>.

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

While you are in the HTML mode of the post, at the end of the HTML, add the following code. You must replace the underlined and bolded URL’s with your Act-On Landing Page and Act-On image URL’s.

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

That’s it! In five easy steps  you were able to add slide-in CTAs! See it in action by clicking here.

  • Was this article helpful?