1. Home
  2. Cookbook
  3. Campaigns
  4. Weblayer shown when scrolled down

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 };
Updated on August 31, 2017

Was this article helpful?

Related Articles