Hi. i’d like to share you guys how to make bottom fixed CTA button like this below.

I know Unbounce itself support this kind of feature. but it sometimes didn’t properly work when using with 3rd party Product Analytics tools (eg: mixpanel, Amplitude…) in terms of User event tracking.

so i asked one of our fellow developer to help, and he wrote me some script.

and below is the script and how-to-use




1️⃣ Create a unbounce button and copy the btn #id

• click the button you’ve made and see the right-bottom side of unbounce editor.

• this button is going to be connected with bottom CTA button script below


• so the way it looks(size, color, position) is doesn’t matter at all. usually i made it visibly hidden.

2️⃣ Paste this script into Unbounce javascript editor. and put your button #id

• please check the annotation inside the script
  
  
  
  
  

<script>

  var screen_width = window.innerWidth;



  if (screen_width < 600){

    addStickyButton();

  }

  function addStickyButton(){

    var sticky_container = document.createElement("div");

    var sticky_text = document.createElement("p");

    sticky_text.innerText = "YOUR_BUTTON_COPY_IS_HERE"; //button copy text here

    sticky_container.classList.add('sticky_container');

    sticky_container.classList.add('not_show');

    sticky_text.classList.add('sticky_text');

    sticky_container.appendChild(sticky_text);

    document.getElementById("lp-pom-root").appendChild(sticky_container);

  

    sticky_container.addEventListener("click", function() {

      var linkBtn = document.querySelector('#lp-pom-button-137'); // Unbounce button ID

      linkBtn.click();

      var eventName = "click: CTA";

      var eventProperties = {

          'Current URL': window.location.href,

          'Page Path': window.location.pathname,

          'URL Parameters': window.location.search,

          'Location': 'sticky',

      };

      amplitude.getInstance().logEvent(eventName, eventProperties);

    });



    var containerClassList = sticky_container.classList;

    window.addEventListener('scroll', () => {

      let scrollLocation = document.documentElement.scrollTop;

      let windowHeight = window.innerHeight;

      let triggerHeight = document.body.scrollHeight / 6; 



      if(scrollLocation + windowHeight >= triggerHeight){

        if(containerClassList.contains('not_show')){

          containerClassList.remove('not_show');

          console.log('show');

        }

      }else{

         if(!containerClassList.contains('not_show')){

          containerClassList.add('not_show');

          console.log('not show');

        }

      }

    })

  }

</script>



<style>

  .not_show{

    display: none !important;

  }

  .sticky_container{

    z-index: 9999;

    position: sticky;

    bottom: 20px; /* button position from bottom viewport */

    width: 96%; /* button width */

    height: 64px; /* button height */

    border-radius: 6px;

    background: #3E7FF6; /* bg color */

    display: flex;

    margin:0 auto;

    align-items: center;

    vertical-align: middle;

  }

  .sticky_text{

    background: #3E7FF6; /* bg color */

    color: #ffffff; /* text color */

    width: 100%;

    font-family: 'Noto Sans KR', sans-serif;

    font-weight: bold;

    font-size: 18px; /* text-size */

    text-align: center;

    vertical-align: middle;

  }

</style>

3️⃣ Done! Publish your page and see if this properly works.

• if you carefully see the annotation inside the script, you could see how to change the button copy and how it looks

Thanks.

Good Luck!