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

You can trigger a display from your own JavaScript code by copying the unique trigger code from the display editor.

Steps

Open the display editor and go to the Rules tab.
Click Get trigger code.
Copy the unique trigger code from the modal.
Add the trigger code to your website's HTML using JavaScript (see examples below). You must have access to edit the HTML source of your website. If you do not, contact your webmaster or developer.

Note: When using the examples below, update the element class names and triggerDisplay code to match your website.

Example: Trigger a popup when a link is clicked

<a href="javascript:promolayer.triggerDisplay('kBbharRQbmM2rDKw2wUA')">Link</a>

Example: Trigger a popup when a button is clicked (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: Trigger a popup 5 seconds after page load, but only if a specific element (class name: "my-header") exists

<script>
  const elem = document.querySelector('.my-header');
  if (elem) {
    document.addEventListener('promolayer-ontimeelapsed-5', () => {
      // Replace the following with your unique custom trigger code copied from the editor
      promolayer.triggerDisplay('kBbharRQbmM2rDKw2wUA');
    });
  }
</script>

Example: Trigger a popup when a specific image (class name: "my-image") scrolls to 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>

Example: Automatically close a display after it opens

<script>
const targetId = 'kBbharRQbmM2rDKw2wUA'; // ID of the display you want to auto-close
const delay = 5000; // Time until close, in milliseconds
window.addEventListener('promolayer-onshow', (e) => {
  if (e.detail === targetId) {
    setTimeout(() => {
      promolayer.closeDisplay(targetId);
    }, delay);
  }
});
</script>

Example: Respect a display's other rules (frequency, user targeting, etc.) when triggering it

Setting the applyRules option to true makes the trigger respect the other rules configured in the display's Rules tab (e.g. re-display frequency, user targeting) — timing rules (the trigger itself) are still always ignored.

// The example below behaves identically to setting the display's own "time elapsed" trigger to 5 seconds
<script>
window.addEventListener('promolayer-ontimeelapsed-5', () => {
  promolayer.triggerDisplay('kBbharRQbmM2rDKw2wUA', {
    applyRules: 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}

// Fires after {seconds} seconds of user inactivity, ex. promolayer-onidletimeelapsed-5 would fire after 5 idle seconds
promolayer-onidletimeelapsed-{seconds}

// Fires every second with the current scroll position as a percentage
promolayer-onscroll
document.addEventListener('promolayer-onscroll', function(e){
  console.log(e.detail) // => 38
})

// Fires when a display is shown
promolayer-onshow
document.addEventListener('promolayer-onshow', function(e){
  console.log(e.detail) // => kBbharRQbmM2rDKw2wUA (the display's ID)
})

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

// Close a display (pass true as the second argument to hide it even if it has a teaser)
promolayer.closeDisplay(displayId, [ignoreTeaser])

triggerDisplay() options

applyRules: Respect the display's other Rules-tab settings, excluding the trigger/timing rule itself (default: false)

markAsTriggered: Once a display is triggered, it will not be triggered again unless the page is transitioned (default: true when applyRules is true, otherwise 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'}
  ]
})

Triggers: Overview

Show a popup based on a JavaScript global variable

What happens when you set multiple triggers on the same display

How to use custom triggers