Edit

In-transaction/cart integration

The in-transaction/cart integration notifies your frontend whenever a customer selects a Rokt upsell opportunity, and allowing for the change to be reflected in a customer's cart. This is achieved by listening to the UPDATE_CART_ITEM_MESSAGE event of a placement, which is triggered every time a customer makes changes to selected items on the Rokt side.

Additionally, you can provide extra information using Rokt.setAttributes to better tailor offers to a customer. In some cases, depending on your catalog provider, additional information may be required for Rokt to retrieve catalog items.

rokt.onLoaded(function(rokt) {
  // (...) existing integration logic

  rokt.getPlacements().then((placements) => {
    placements.forEach((placement) => {
      placement.on('UPDATE_CART_ITEM_MESSAGE').subscribe(function (update) {
      // Below you should provide your code to reflect changes to your cart
      clientCart.updateCart(update.updatedItem, update.oldItem);
    });
   });
  });

  rokt.setAttributes({
    // attributes required by Rokt to retrieve the catalog items 
    eventId: 'eventId',
    venueName: 'venueName',
    // any additional attributes
    email: 'email',
  });
});

Checking placement availability

This extension involves your backend issuing a call to Rokt to check if any placements are available. You can then decide if your upsell page should be displayed or skipped. In this scenario, your pages have most likely already been generated on the backend, and you have already passed your customer data to Rokt in the initial call. Since that call may have already generated your session ID, the Rokt JavaScript API requires you to pass your session ID to the Rokt.init method so both interactions can be paired together for identification and performance reasons.

rokt.onLoaded(function(rokt) {
  rokt.init({
    sessionId: 'uniqueSessionId', // session ID generated by Rokt backend
  });
  
  rokt.setAttributes({
    // attributes required by Rokt to retrieve the catalog items 
    eventId: 'eventId',
    venueName: 'venueName',
    // any additional attributes
    email: 'email',
  });
});

See Rokt.init for more details on the init method.