Set Custom Events to Trigger Popups

Lisa Fockens Updated by Lisa Fockens

Before you read this article, please note the below points:

  • Fired custom events count as page views in your monthly quota
  • Events must be configured by someone with technical skills

Introduction

The display of a popup can be triggered by a custom event. Custom events allow you to link Wisepops with any kind of user activity on your website.

Here are a few examples of custom events you can set to trigger popups:

  • Visitor clicks a specific button or link
  • Visitor adds a new product to cartย 
  • Visitor views an out-of-stock item
  • Visitor visits a product page whose price is above $X
  • Visitor selects a specific option in a menu

Configuring a custom event as a display trigger

A custom event can be set as a display trigger for a popup in the Display menu. Select On custom event and then give your custom event a name.

Firing the custom event from your website

You can fire a custom event as soon as the Wisepops code has been executed.

wisepops("event", "my-custom-event");
  • "event": a string that indicates that you want to fire a custom event. Leave it as it is.
  • "my-custom-event": the name of your custom event.

Examples

Here are two commonly used examples of custom event triggering.

In this example, we will set up a custom event fired on a user click.

On the Wisepops Display menu, select On custom event and then enter a custom event name of your choice.

On your website, add a link and make it fire the custom event.

<a href="#" onclick="wisepops('event', 'user-click'); return false;">Click here</a>

The snippet return false; tells the browser not to follow the link provided in href.ย 

You can also get the exact same result with a button:

<button onclick="wisepops('event', 'user-click');">Click</button>

Now, try clicking the link or the button. If the rest of the display scenario is matched (display options and target visitors), the popup will show.

2. After a progress bar completes

In this example, we will set up a custom event for the jQuery Progressbar completion.

On the Wisepops Display menu, select On custom event and then enter a custom event name of your choice.

We now want to fire the custom event progress-complete once the jQuery UI progress bar widget reaches its maximum. Write something like this, right after the Wisepops setup code:

$(".selector").on("progressbarcomplete", function (evt, ui) {
ย  ย  wisepops("event", "progress-complete");
});

The popup will be immediately displayed if its display scenario is matched (display frequency, location targeting, etc.).

No need to use custom events for Single Page Applications (SPAs)

SPA are websites that do not reload the document when the page changes. Instead, the new content is injected into a container, and the URL is dynamically changed.

Once the page has changed, you can tell Wisepops to restart the scenario resolution by running the following JS line:

wisepops("pageview");ย 

ย 

See our SPA documentation.

Debugging and troubleshooting

If the wisepops() function is not defined, please make sure that the Wisepops setup code is up-to-date.

It should start by (function(W,i,s,e,P,o,p) .

You can view some Wisepops activity logs through the browser console.

Go to your website, where Wisepops is installed.

Open the developer tools by hitting F12, and click on the "Console" tab.

Inside the console, type wisepops("log") and hit Enter.

Not seeing your popup on your website? Try these tips.

How did we do?

Create an Exit Popup

Contact