Pixlee Widget Events Guide

All widgets emit events when certain actions occur. You can optionally subscribe to these events using the 'subscribedEvents’ option in the JavaScript Widget. You might then send these to your own analytics provider as an example.

Subscribing to Widget Events


All widgets emit events when certain actions occur. You can optionally subscribe to these events using the 'subscribedEvents’ option, which accepts an array of strings. Currently the following events are available for subscription:

  • widgetLoaded: fired when a widget completes loading
  • photoOpened: fired when a user clicks on a photo, opening the lightbox
  • photoClosed: fired when a user closes a previously opened photo, closing the lightbox
  • photoChanged: fired when a user changes the currently opened photo
  • ctaClicked: fired when a user clicks on a photo’s call to action link within the lightbox
  • ctaChanged: fired when a user cycles through a photo’s call to action links within the lightbox
  • widgetNumPhotos: fired when the widget renders, contains photo count of gallery at load time
  • widgetLoadMore: fired when a user clicks on a photowall's "load more" button
  • widgetNavigated: fired when a user scrolls through any carousel style widget. note that this will NOT fire on backwards navigation, only forward.
  • uploadComplete: fired when a user succesfully completes the media upload process through Pixlee's uploader
  • atcComplete: fired when a user succesfully completes an add to cart using our "Direct Add to Cart" feature
  • socialShare: fired when a user initializes a share to social media from within the lightbox or directly from the widget (for css themes that support it)
  • widgetHidden: fired when a widget is hidden for A/B testing purposes

Passing the following option to addSimpleWidget/addProductWidget/addCategoryWidget will cause the widget to emit events for the selected actions:

subscribedEvents: ['photoOpened','photoClosed’]


You can then add an event listener to your page in order to take actions when these events occur:

function receiveMessage(event) {
    // only listen to events coming from Pixlee
    if (event.data) {
        try {
            var message = JSON.parse(event.data);
        } catch (error) {
            return;
        }
    } else {
        return;
    }
    if (message.eventName && message.eventName === 'photoOpened') {
       // take action when a photo is opened
    } else if (message.eventName && message.eventName === 'photoClosed') {
       //take action when a photo is closed
    } else if (message.eventName && message.eventName === 'ctaClicked') {
       // take action when a cta is clicked
    }
}
window.addEventListener("message", receiveMessage, false);

The following events contain additional information which can be accessed through the message.data property:

  • widgetLoaded: if you're using Pixlee's A/B test feature, then message.data exposes which bucket the user is in: { "abTest": true, "bucket": "B" }
  • widgetLoadMore: The height of the widget in pixels
  • widgetNumPhotos: The number of photos in the gallery on first load
  • atcComplete: a serialization of the product form
  • socialShare: an array of the serialized products assigned to the photo, and the social network being shared to
  • photoOpened: An object containing information about the photo including id, products, the visual index of the photo with respect to the rest of the gallery and more.
  • photoChanged: The id of the photo the user changed to
  • ctaClicked: Two fields describing the ctaText and ctaUrl of the call to action which was clicked
  • ctaChanged: The product/call to action's data fields with all associated information