Notes

  • Custom events are available in Pro, Expert and Enterprise plans.
  • 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 pop-up 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 display trigger

A custom event can be set as display trigger for a pop-up in the Display Scenario modal. Just give it a name!

Firing the custom event from your website

You can fire a custom event as soon as the WisePops tracking 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

This section gives two commonly encountered examples.

1. When a user clicks a link or a button

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

On the Wisepops display scenario modal, type 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 pop-up will show up.

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 scenario modal, type a custom event name of your choice:

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

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

The pop-up 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

S.P.A. 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 start again the scenario resolution by running the following JS line:

wisepops("pageview"); 

 

Debugging and troubleshooting

If the wisepops() function is not defined, please make sure that the WisePops tracking 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.

Did this answer your question?