Custom triggers

Note: When a custom trigger is used to trigger a display, the display rules will be ignored, however the display status must be set to "Live" to function.

To use a custom trigger, first enter the 'Rules' tab of the display editor and click on the 'Get trigger code' button.



Clicking will open the following modal and allow you to copy the unique trigger code for this display.



This code can be combined with some Javascript to create all kinds of unique triggers.

Some examples of how to do this follow. Please be aware you must have the ability to edit the HTML source of your website to use these. If you do not, you will need to contact your webmaster or developer.

When using the examples you will need change the element classes, and triggerDisplay code as needed for these examples to function on your website.

Example: Displaying a popup when clicking a button (that has the class name "my-button")

<script>
document.addEventListener('DOMContentLoaded', () => {     
  const button = document.querySelector('.my-button');
  button.onclick = function(e){
    e.preventDefault();
    // Replace the following with your unique custom trigger code copied from the editor
    promolayer.triggerDisplay('kBbharRQbmM2rDKw2wUA');
  };
});
</script>

Example: Displaying a popup when scrolling the website and the top edge of a specific image (class name: my-image) reaches the center of the window.

<script>
document.addEventListener('DOMContentLoaded', () => {
  const element = document.querySelector('.my-image');
  const offset =   window.innerHeight / 2;
	
  let fired = false, ticking = false;
	
  document.addEventListener('scroll',()=>{
    if(ticking || fired || !element || typeof promolayer === 'undefined') return;
		
    window.requestAnimationFrame(() => {
      const top = element.getBoundingClientRect().top;
      if(top < offset){
        // Replace the following with your unique custom trigger code copied from the editor
        promolayer.triggerDisplay('kBbharRQbmM2rDKw2wUA');
        fired = true;
      }
      ticking = false;
    });
    ticking = true;
  });
});
</script>

Javascript events, functions and options

Events

// How to use events
document.addEventListener('promolayer-onexitintent', function()....

// Fires when the Promolayer API becomes available
promolayer-onready

// Fires when the user tries to leave the page
promolayer-onexitintent　

// Fires when an attempt is made to browse back (promolayer.enableBrowserBackIntent() must be called first)
promolayer-onbrowserbackintent　

Fires after // {seconds} seconds have elapsed ex. promolayer-ontimeelapsed-5 would fire after 5 seconds　
promolayer-ontimeelapsed-{seconds}

Functions

// Trigger the display passed as an argument
promolayer.triggerDisplay(displayId) 

// Check if display has ever shown to user
promolayer.hasDisplayShown(displayId) 

// Enable browser back button detection
promolayer.enableBrowserBackIntent()

triggerDisplay() options

markAsTriggered: Once a display is triggered, it will not be triggered again unless the page is transitioned (default: false)

replace: Replace strings enclosed in double brackets within the text content of a display
ex.
 Replace {{NAME}} with PROMOLAYER and {{EMAIL}} with hello@promolayer.io
 promolayer.triggerDisplay(displayId, {
   replace: [
       {find: 'NAME', replace: 'PROMOLAYER'},
       {find: 'EMAIL', replace: 'hello@promolayer.io'}
  ]
})

Updated on: 08/02/2023