Articles on: Rules & Triggers

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")

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

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.

document.addEventListener('DOMContentLoaded', () => {
  const element = document.querySelector('.my-image');
  const offset =   window.innerHeight / 2;
  let fired = false, ticking = false;
    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
        fired = true;
      ticking = false;
    ticking = true;

Javascript events, functions and options


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

// Fires when the Promolayer API becomes available

// Fires when the user tries to leave the page

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

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


// Trigger the display passed as an argument

// Check if display has ever shown to user

// Enable browser back button detection

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
 Replace {{NAME}} with PROMOLAYER and {{EMAIL}} with
 promolayer.triggerDisplay(displayId, {
   replace: [
       {find: 'NAME', replace: 'PROMOLAYER'},
       {find: 'EMAIL', replace: ''}

Updated on: 08/02/2023

Was this article helpful?

Share your feedback


Thank you!