Triggering Popup onClick

⚠️ Please note trigger class is not working well with div ( as trigger is compitable with <p>, <image> and <button> types).

You can trigger a POWR Popup to appear when a visitor clicks something on your webpage, for example, a piece of text, image, or button.

You just need to wrap your text, button, or image in html like this:

<span class="trigger-popup">your text, button, or image here</span>

Here's an example of how to trigger a Popup on a Shopify Product page.

1. Add your POWR Popup to the page. 

2. Switch to HTML mode with the <> icon.

3. Wrap some text, a button, or an image in the "trigger-popup" code.

4. Your Popup will now appear whenever that text, button, or image is clicked. Be sure to set the How often should visitors see the popup? control to Every time anyone visits in your POWR Editor, under Controls > Schedule & Triggers

Note: If instead you want the Popup to appear on a new page after your visitor is redirected, just add the Popup to that new page instead.

Examples of triggering Popups with Clicks

Text:

<p>This is a paragraph.</p>

<p class="trigger-popup">This is a paragraph that will trigger a Popup.</p>

Image:

   This is an image: 

<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Sad_Face_Emoji_large.png?v=1480481055"/>

   This is an image that will trigger a Popup: 

<img class="trigger-popup" src="https://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_large.png?v=1480481056"/>

Button:

This is a button.

<button type="button">This is a button.</button></p>

This is a button that will trigger a Popup.

<button class="trigger-popup" type="button">This is a button that will trigger a Popup.</button></p>

To use several POWR Popups on one webpage with click triggers, please check out the following article.