You can use the JS API to list all the popup campaigns. This may be handy in situations when you would like to fetch all campaigns and iterate them to decide whether they should be shown or not.

nostojs(api => {
  console.log(api.popupCampaigns());
});

Fields

The JS API can be used to register callbacks to hook into the popup events. To register listener to a callback, use api.listen(callbackId, callbackFunction) function.

Email Given Callback

Whenever customer has input their email address into a Nosto behavioral pop-up that asked whether they want to subscribe to an email newsletter.

nostojs(api => {
  api.listen("emailgiven", emailSubscriptionEvent => {
  console.log(emailSubscriptionEvent.email);
  console.log(emailSubscriptionEvent.newsletter);
  });
});

Fields

Popup Opened Callback

api.listen("popupOpened", popupEvent => {
    if (popupEvent.error) {
      console.error(popupEvent.error);
    } else {
      console.log(popupEvent.campaignId);
      console.log(popupEvent.type);
    }
  });

Fields

Popup Ribbon Callback

The customer can minimize a Nosto behavioral pop-up into a ribbon to be shown at the edge of the viewport. The pop-up is also changed to be shown in its minimized ribbon form after a page load is done after a pop-up has been shown.

This callback will be called whenever the ribbon is rendered onto screen after a page load.

  api.listen("popupRibbonShown", ribbonEvent => {
    console.log(ribbonEvent.campaignId);
  });

Fields

Popup Minimised Callback

The customer can minimize a Nosto behavioral pop-up into a ribbon to be shown at the edge of the viewport. This callback will be called when the customer clicks the minimize button on the pop-up.

  api.listen("popupMinimized", popupEvent => {
    console.log(popupEvent.campaignId);
  });

Fields

Popup Maximised Callback

The customer can minimize a Nosto behavioral pop-up into a ribbon to be shown at the edge of the viewport. When they click on this ribbon, the pop-up will be maximized again to be shown in full size. This callback will be called when the customer clicks the ribbon to maximize the pop-up.

  api.listen("popupMaximized", popupEvent => {
    console.log(popupEvent.campaignId);
  });

Fields

Popup Closed Callback

The customer can click a “close permanently” button or link in a Nosto behavioral pop-up to dismiss the pop-up permanently. This callback is called when the customer clicks on that button or link.

  api.listen("popupClosed", popupEvent => {
    console.log(popupEvent.campaignId);
  });

Fields

Coupon Given Callback

The callback will be called when a customer clicks a button inside a Nosto behavioral pop-up to get their discount coupon code.

  api.listen("couponGiven", couponEvent => {
    if (couponEvent.error) {
      console.error(couponEvent.error);
    } else {
      console.log(couponEvent.campaignId);
      console.log(couponEvent.couponCode);
      console.log(couponEvent.origin);
    }
  });

Fields

Cart Abandonment Callback

The callback will be called when a customer clicks a button inside a Nosto abandoned cart pop-up to get an abandoned cart email.

  api.listen("sendabandonedcartemail", sendMailEvent => {
    if (!sendMailEvent.sent) {
      console.error(sendMailEvent.message);
    } else {
      console.log(sendMailEvent.campaignId);
      console.log(sendMailEvent.email);
    }
  });

Fields

You can use the JS API to conditionally enable or disable a popup.

Enabling a Popup

The following snippet enabled the specified popup.

nostojs(api => {
  api.enablePopup("popupCampaignId");
});

Parameters

Disabling a Popup

The following snippet disables the specified popup.

nostojs(api => {
  api.disablePopup("popupCampaignId");
});

Parameters

You can open up a Nosto behavioral pop-up by calling the api.openPopup() function. The first argument of the function is the ID of the popup campaign whose pop-up you want to show. The pop-up campaigns, including the pop-up templates themselves, are created in the Nosto Administration UI

Please note that some campaigns have active trigger types and can be opened automatically. If you want to use only the api.openPopup() call to open pop-ups, please create the respective campaigns using the JavaScript API pop-up trigger type.

You can also give a second, optional argument to the api.openPopup() function. The second argument is an object with the following fields:

nostojs(api => {
  var arrayOfPopupCampaigns = api.popupCampaigns();

  // arrayOfPopupCampaigns = [
  //   { id: "campaignId", name: "campaignName", type: "triggerType" },
  //   ...
  // ];

  var popupCampaignId = arrayOfPopupCampaigns[0].id;

  api.openPopup(popupCampaignId);

  // or

  var popupOptions = {
    // Effects corresponding to the ones in the admin UI
    effects: {
      overlayOpacity: 0.8,
      fadeInDelayMs: 300
    },
    preview: false
  };
  api.openPopup(popupCampaignId, popupOptions);  
});

Parameters

In the event that you are using Nosto's Onsite Popups, you can leverage the JS API to build complex interactions with the popups.

See the following articles on how to use the JS API to interact with popups:

• Listing Popup Campaigns

• Opening a Popup

• Enabling & Disabling Popups

• Popup Callbacks