Add a Peek-a-Boo Sticky Tab to your Site

A Peek-a-Boo CTA Tab follows the viewer as they scroll down your web pages and populates a lead generation form once clicked. You never know what piece of content on your website will be the trigger behind a conversion and having this added CTA gives your viewer the ability to buy with ease no matter where they are on your website.

Below is the HTML, CSS, and JavaScript to add a Peek-a-Boo CTA Tab.

Step 1

Add the HTML below above the page where you’d like your CTA to appear

<div class="side-widget open">
   <div class="inner">
      <a href="#contact-us" class="btn btn-blue productCheckout">Contact Us</a>
   </div>
   <button class="widget-close">X</button>
</div>

Step 2

Add the CSS below to the main stylesheet of your website

/* Side Widget */
.side-widget.open {
    margin-right: 0;
}
.side-widget {
    width: 57px;
    z-index: 9;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
    position: fixed;
    right: 0;
    top: 52%;
    text-align: center;
    margin-right: -45px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.btn.btn-blue:hover {
    background-color: #1f6fa6;
}
.btn.btn-blue {
    background-color: #0082ca;
}
.btn.btn-blue {
    background-color: #2483c3;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
a:hover, a:focus, a:active {
    text-decoration: none;
}
.btn {
    font-family: 'proxima-nova', sans-serif;
    font-size: 22px;
    font-weight: 600;
    padding: 12px 35px;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}
.widget-close:hover {
    color: #ccc;
}
.widget-close {
    color: #636363;
}
.widget-close {
    position: absolute;
    left: 3px;
    top: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    z-index: 1;
}

Step 3

Add the JavaScript below to cta.js

$('.side-widget .widget-close').on('click', function() {
    $(this).parent().removeClass('open');
  });
  $('.side-widget .inner').on('click', function(e) {
    var $parent = $(this).parent();
    if (!$parent.is(".open")) {
      e.preventDefault();
    }
    $parent.addClass('open');
  });
  
$(function() {
  $('a.btn[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Step 4

Add the includes below to the page where your CTA will live

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="cta.js"></script>

Demo on JSFiddle

Download from GitHub

Originally Posted here on the Solodev Web Design Blog

To learn more about the power of the Solodev Web Design Platform visit solodev.com/features/!