When using Wisepops on your website, various events occur during the lifetime of a popup. With the JS callback feature, you can execute your own JavaScript code when Wisepops' internal events happen.
This is an extremely powerful concept, with countless use cases, such as firing a Facebook pixel, injecting the name of a visitor's company inside your popup, and displaying the amount left towards free shipping.
Let's see how it works, and how you can apply it.
The events
The events are punctual things, such as a popup being displayed, or a form being submitted. We want to detect these events to execute our code at the right moment. You can find a complete list of Wisepops' events with their documentation here.
The listener
The listener is the method that allows us to detect a certain event and associate a callback to it. This is when we declare the callback. There are 2 methods to do this:
Method 1: Use our builder
By declaring your callback in our builder, you won't need to add extra code on your own website. This is the easiest way to proceed. The callback will only be associated with the popup being edited. It will be cloned if the popup is duplicated.
Method 2: Listen from your website
The other approach is to declare your callback on your website.
This is a better option if:
You want your callback to be executed on all your popups,
You want to inject dynamic values inside your callback code, or
Your callback depends heavily on your website's code, and you want to keep them close to each other.
You can do this using the following method:
wisepops('listen', eventType, [popupId], callback); 'listen': String that indicates that we want to declare a new callback. Leave it as it is.eventType: The Wisepops' event you want to detect. For example,'before-popup-display'popupId(optional): The ID of the popup from which we want to detect events. You can omit this argument if you want your callback to be executed for all popups.callback: The function that should be executed when the event is detected. It takes a custom event as its first argument.
The callback
The callback is the function that is going to be executed when the associated event is detected. This is basically where our own code goes. The callback has an argument event, allowing us to retrieve various pieces of information and customize the default behavior. Here is an example that prints this info in the browser console:
wisepops('listen', 'after-form-submit', function (event) {
console.log({
eventType: event.type,
target: event.target,
popupId: event.detail.popup.id
});
});
Please refer to the documentation of the events to know what this event object contains.