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

A Peek-a-Boo Sticky Tab follows the viewer as they scroll down your web pages and populates a lead generation form on click

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 to your Website.

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>

Download from Github

Share on Facebook Tweet It