Creating bottom-fixed CTA button without Unbounce feature

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!