Skip to main content
Act-On Software

Adding a Dynamic Call to Action to Your 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?

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!

Install the CTA

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.

Please note:
Act-On can support the use of custom CSS/Javascript; however, Technical Support is not able to assist with troubleshooting.

<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.

Please note:
Act-On can support the use of custom CSS/Javascript; however, Technical Support is not able to assist with troubleshooting.

#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>

  • Was this article helpful?