Use multiple POWR Popup on a single webpage with click triggers

How do you trigger different POWR Popups from clicks on different HTML elements on a single webpage?

Sometimes, you need to use more than one Popup in a single webpage, allowing your users to click on different parts of your website to display a single popup at a time to show additional information using a POWR Popup, keeping the user on the current page without having to navigate to a new page to see let's say some terms of service or additional product details relating to a specific product or service.

However, at the time of writing this article, it's only possible to trigger a single POWR Popup per webpage due to the trigger identifier being a static, hardcoded CSS class "trigger-popup".

This article aims to supercharge your POWR Popup trigger from a single static identifier to identifying popup elements dynamically using HTML Data Attribute and a few lines of lightweight client-side JavaScript code with no dependencies on external libraries.

Before we start, let's break this article into three sections: The problem, where we will explain what the problem is; The solution, Where we will break and explain what the solution will be; and The implementation, where we will have a complete example describing how to implement our solution, and lastly, we will discuss the limitations. Feel free to skip to the desired part of this article or enjoy this quick informative read. Cheers!

The problem

It's only possible to trigger the POWR Popup by adding the CSS class "trigger-popup" to the HTML element from which we wish to trigger our POWR Popup, preferably images and button elements.

This makes it impossible to control visibility for another popup that lives on the page, thus displaying all POWR popups on the webpage when any of the triggered elements are clicked on, resulting in undesirable customer expectations.

The solution

Our solution is simple, and it can be accomplished in 2 easy steps: adding the HTML data attribute "data-app-id" and adding a small Javascript code snippet that tracks clicks on the HTML element with "trigger-popup" to control display which Popup to show and which Popup to hide:

Step 1

We must add the app ID as a value to the HTML data attribute "data-app-id" to each element trigger element with the "trigger-popup" CSS class.

Let's say our POWR Popup App ID is "d7764e59_1704933712" and we want to trigger that Popup alongside other POWR Popup on a single page using an Anchor tag in addition to the CSS class 

class="trigger-popup"

we will also add the HTML data attribute "data-app-id" as follows with our app ID as its value as follows 

data-app-id="d7764e59_1704933712"  

From

<a>
I am the element that trigger-popup d7764e59_1704933712 click me
</a>

To

<a class="trigger-popup" data-app-id="d7764e59_1704933712">
I am the element that trigger-popup d7764e59_1704933712 click me
</a>

Step 2

Now that we have the HTML data attribute that helps make our POWR Popups Dynamic, we need to write the code that helps us track which element was clicked so we can control which POWR Popup App to display as follows.

   <script>
     const popupsElements = document.getElementsByClassName("trigger-popup");
     const makeArray = (elements) => {
       return Array.from(elements);
     }
     const popupArray = makeArray(popupsElements);

     function setStyle(element, value) {

       elementId = element.dataset.appId;

       const popup = document.getElementById(elementId);
       popup.style.display = value
     };

     const hideAllPopups = () => {
       for (const popupElement of popupArray) {

         setStyle(popupElement, "none");
       }
     };

     document.addEventListener("DOMContentLoaded", () => {

       popupArray.forEach(e => e.addEventListener("click", function() {

         hideAllPopups();

         setStyle(this, "block");

       }));

     });

   </script>

The implementation

In order to successfully complete this installation, you will need to use our custom location installation we have a greater article on that click here to view it, and you will need access to edit the code on your website, at least on the pages you want to trigger different POWR Popups when you click on the elements you wish to trigger the POWR Popup visibility.

Below is a complete example; in this example, our goal is to trigger three different POWR Popups from a single page using three different HTML elements: an image, a button, and the good old link using an Anchor.

<script src="https://www.powr.io/powr.js?platform=html"></script>


<img style="height: 100px; width: 100px;" class="trigger-popup" src="https://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_large.png?v=1480481056" data-app-id="88b5cd7f_1704933631" alt="" />

   <br>

   <a class="trigger-popup" data-app-id="d7764e59_1704933712">
     I am the element that trigger-popup d7764e59_1704933712 click me
   </a>

   <br>

   <button class="trigger-popup" data-app-id="2eb052e2_1704933794">
     I am the button element that trigger-popup 2eb052e2_1704933794 click me
   </button>

   <div class="powr-popup" id="88b5cd7f_1704933631"></div>

   <div class="powr-popup" id="d7764e59_1704933712"></div>

   <div class="powr-popup" id="2eb052e2_1704933794"></div>

   <script>
     const popupsElements = document.getElementsByClassName("trigger-popup");
     const makeArray = (elements) => {
       return Array.from(elements);
     }
     const popupArray = makeArray(popupsElements);

     function setStyle(element, value) {

       elementId = element.dataset.appId;

       const popup = document.getElementById(elementId);
       popup.style.display = value
     };

     const hideAllPopups = () => {
       for (const popupElement of popupArray) {

         setStyle(popupElement, "none");
       }
     };

     document.addEventListener("DOMContentLoaded", () => {

       popupArray.forEach(e => e.addEventListener("click", function() {

         hideAllPopups();

         setStyle(this, "block");

       }));

     });

   </script>

Click the following jsfiddle link to see this example in action:  https://jsfiddle.net/POWrRangerAlex/nr2h1ob7/1/ 

Known limitations

In order to successfully use an element as a trigger for the POWR Popup, the "trigger-popup" can only be added to the triggering element and should have no child elements inside the triggering element

Dont Do:

A paragraph tag as a child element of the Popup trigger element.

<div class="trigger-popup" data-app-id="d7764e59_1704933712">
 <p>I am the element that trigger-popup d7764e59_1704933712 click me</p>
</div>

Do

There should be no child elements.

<div class="trigger-popup" data-app-id="d7764e59_1704933712">
I am the element that trigger-popup d7764e59_1704933712 click me
</div>