When you are using WisePops on your website, various events occur during the lifetime of a popup. With the JS callback feature, available from the Pro plan, 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 display the amount left towards free shipping

Let's see how it works, and how you can make use of it.

The events

The events are punctual things that happen, 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 into our builder, you won't need to add extra code on your own website. This is the easiest way to go. 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. 

It’s 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 by 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 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.

Did this answer your question?