Weblayer shown when scrolled down

There is a possibility to show a weblayer when a customer scrolls down in the page to a certain point.

This is done by changing the JS code part of the weblayer. The following example has been used in Subscribe template

  • add following variables to the beginning
var handler = NaN;
var webLayerDisplayed = false;
  • then add following code before the initial setTimeout
function onScroll() {
  if (webLayerDisplayed) {
    jQuery(window).off("scroll", onScroll);
  }
  if (!isNaN(handler)) {
    clearInterval(handler);
  }
  handler = setInterval(checkScroll, 200);
}
function checkScroll() {
  var scrollMax = jQuery(document).height() - jQuery(window).height();
  var scrollActual = jQuery(window).scrollTop();
  var scrollPercentage = Math.round(scrollActual / scrollMax * 100);


  if (scrollPercentage >= parseFloat('[[minimumPercentageToDisplay]]')) {
    if (webLayerDisplayed == false) {
      displayWebLayer();
      webLayerDisplayed = true;
    }
  }
}
  • afterwards, put the setTimeout code part below into the {} of “function displayWebLayer() {}”

function displayWebLayer() {
  setTimeout(function () {
    requestAnimationFrame(function () {
      if (!self.inPreview && "true" == "{{ 'true' if customer.email else 'false' }}") {
        return;
      }
      self.sdk.track('banner', getEventProperties('show', false));
      document.body.insertAdjacentHTML('beforeend', self.html);
      var banner = self.banner = document.querySelector('.exponea-subscription-dialog');
      self.backdrop = document.querySelector('.exponea-subscription-dialog + .exponea-banner-backdrop');
      banner.insertAdjacentHTML('afterbegin', '');
      var form = banner.querySelector('form');
      form.onsubmit = function () {
        var eventProperties = getEventProperties('subscribe');
        var email = (form.email.value || '').toLowerCase();
        eventProperties.subscription_email = email;
        self.sdk.track('banner', eventProperties);
        if (validateEmail(email)) {
          self.sdk.update({
            email: email
          });
          removeBanner();
        }
        return false;
      };
      var btnClose = banner.querySelector('.exponea-close');
      btnClose.onclick = function () {
        removeBanner();
        self.sdk.track('banner', getEventProperties('close'));
      };
    });
  }, showDelay);
}
  • then, in the end, before last “return”, insert
jQuery(window).scroll(onScroll);
  • Now you can set the percentage of the page that will trigger the web layer in the visual part of the weblayer

Scroll-activated web layer

To see the whole code originally used, please see below.



var handler = NaN;
var webLayerDisplayed = false;
var self = this;
var showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);
function onScroll() {
  if (webLayerDisplayed) {
    jQuery(window).off("scroll", onScroll);
  }
  if (!isNaN(handler)) {
    clearInterval(handler);
  }
  handler = setInterval(checkScroll, 200);
}
function checkScroll() {
  var scrollMax = jQuery(document).height() - jQuery(window).height();
  var scrollActual = jQuery(window).scrollTop();
  var scrollPercentage = Math.round(scrollActual / scrollMax * 100);
  if (scrollPercentage >= parseFloat('[[minimumPercentageToDisplay]]')) {
    if (webLayerDisplayed == false) {
      displayWebLayer();
      webLayerDisplayed = true;
    }
  }
}
function displayWebLayer() {
  setTimeout(function () {
    requestAnimationFrame(function () {
      if (!self.inPreview && "true" == "{{ 'true' if customer.email else 'false' }}") {
        return;
      }
      self.sdk.track('banner', getEventProperties('show', false));
      document.body.insertAdjacentHTML('beforeend', self.html);
      var banner = self.banner = document.querySelector('.exponea-subscription-dialog');
      self.backdrop = document.querySelector('.exponea-subscription-dialog + .exponea-banner-backdrop');
      banner.insertAdjacentHTML('afterbegin', '');
      var form = banner.querySelector('form');
      form.onsubmit = function () {
        var eventProperties = getEventProperties('subscribe');
        var email = (form.email.value || '').toLowerCase();
        eventProperties.subscription_email = email;
        self.sdk.track('banner', eventProperties);
        if (validateEmail(email)) {
          self.sdk.update({
            email: email
          });
          removeBanner();
        }
        return false;
      };
      var btnClose = banner.querySelector('.exponea-close');
      btnClose.onclick = function () {
        removeBanner();
        self.sdk.track('banner', getEventProperties('close'));
      };
    });
  }, showDelay);
}
function getEventProperties(action, interactive) {
  return {
    action: action,
    banner_id: self.data.banner_id,
    banner_name: self.data.banner_name,
    banner_type: self.data.banner_type,
    variant_id: self.data.variant_id,
    variant_name: self.data.variant_name,
    interaction: interactive !== false ? true : false,
    location: window.location.href,
    path: window.location.pathname
  };
}
function removeBanner() {
  if (self.banner) {
    self.banner.parentNode.removeChild(self.banner);
  }
  if (self.backdrop) {
    self.backdrop.parentNode.removeChild(self.backdrop);
  }
}
function validateEmail(email) {
  return email && /^\S+@\S+\.\S+$/.test(email);
}
jQuery(window).scroll(onScroll);
return {
  remove: removeBanner
};