Rokt Documentation
  • Documentation
  • User Guide
  • SDK
  • API
  • Third-Party Integrations
  • Help

›Integration Examples

Getting Started

  • Introduction

Web SDK

  • Overview
  • Architecture
  • Integrating the Web SDK
  • Integration Examples

    • Confirmation Page Integration
    • Preparative Iframe
    • Page Identifier
    • Single Page Applications
    • Brand Conversion Integration
    • In Transaction/Cart Integration
    • Event-based Integration
    • Sandbox Integration
  • Integration Best Practices
  • Attributes
  • Security
  • Mobile In-App Web Pages
  • API

    • README
    • Globals

    Enumerations

    • FailureReason

    Interfaces

    • Attributes
    • Cart
    • CartItem
    • PlacementCloseEvent
    • Rokt
    • RoktConfiguration
    • Widget

iOS SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration
  • Attributes
  • Security

Android SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration

    Attributes

    • Core Attributes
    • Vertical Attributes
  • Security

React Native SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration

    Attributes

    • Core Attributes
    • Vertical Attributes
  • Security
Edit

In Transaction/Cart Integration

The in-transaction/cart integration allows your front-end to be notified whenever a user selects a Rokt up-sell opportunity, and then to reflect that change to your cart. This is achieved by listening to the 'UPDATE_CART_ITEM_MESSAGE' event of a placement, which will be triggered every time a user makes changes to selected items on the Rokt side.

If you wish you can additionally provide extra information using Rokt.setAttributes to better tailor offers to a consumer. In some cases, depending on your catalog provider, additional information may be required by Rokt to be able 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  is your code allowing you to integrate
    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 Inventory Availability Prior to Displaying Placements

This extension involves your backend issuing a call to Rokt to check if any Placements are available for you to decide if your up-sell page should be displayed or skipped. In this scenario, your pages are most likely to have been generated on the backend, and you have already passed your consumer data with the initial call to the Rokt backend. 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.

← Brand Conversion IntegrationEvent-based Integration →
  • Checking Inventory Availability Prior to Displaying Placements
RESOURCES
DocumentationUser GuideSDKAPIIntegration PartnersHelp
COMPANY
About UsContact UsCareersEngineering Blog
Rokt Documentation
Copyright © Rokt 2021 - All Rights Reserved