Custom Web SDK Integration for Rokt Thanks

Overview

If your store uses a custom checkout flow, you can still access Rokt Thanks offers by installing the Rokt Web SDK (a small JavaScript snippet).

Installing the SDK is typically straightforward and requires minimal technical expertise. If needed, the Aftersell technical support team can assist you throughout the process.

Initial Questions

Before you begin, answer the following questions to ensure a smooth integration:

Can you (or someone on your engineering team) add a code snippet to the confirmation page?
The confirmation page, also known as the thank-you page, appears immediately after checkout.
What user data or properties are available on the confirmation page?
We’ll need access to specific properties related to purchased items and customer information. The more data that is available, the more relevant and accurate your Rokt Thanks offers will be.
Is there an easy way to access this data using JavaScript?
For example, can you query the cart or order details on the confirmation page?

Implementation Steps

Step 1: Review and Confirm

Review the questions above and confirm which data properties can be accessed.
Once ready to proceed, you’ll need an accountId, which will be provided by an Aftersell engineer.

To create your account, please provide the following details:

{
  "firstName": "",
  "lastName": "",
  "primaryEmail": "",
  "websiteUrl": "",
  "countryCode": "",
  "brand": ""
}

Step 2: Choose Installation Method

Decide whether you’d like to:

Install the integration yourself, or
Work directly with an Aftersell engineer (a testing environment may be required for assisted setup).

If you choose to install it yourself, you can follow Rokt’s documentation or the summarized steps below.
Not all steps in Rokt’s setup guide are required, but the guide is provided as a reference.

Step 3: Install the Integration Script

a. Copy the starter integration script (provided below).

b. Add the script between the <head></head> tags of any page where you want to display a Rokt Thanks offer (typically your order confirmation page).

i. Populate all required customer and transactional data properties.

ii. Replace "rokt_account_id_here" with the accountId provided by your Aftersell engineer.

c. Test your implementation using Rokt’s testing guide to ensure placements load correctly.

d. Work with our team to customize the placement so it matches your brand's look and feel.

Properties (Bolded and Italicized properties are highly recommended)

const cartItems = [
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        },
        {
        ...
        }
]

Customer/order properties

{
        attributes: {
        
	        // Required
	        amount: '', //In $
	        firstname: '',
	        lastname: '',
	        billingzipcode: '',
	        Country: '',
	        Language: '',
	        currency: '',
	        cartItems: JSON.stringify(cartItems), //From above
	        email: '',
	
	        //Order Data
	        clientcustomerid: '',
	        cartId: '',
	        subtotal: '',
	        totalTax: '',
	        totalShipping: '',
	        margin: '',
	        paymenttype: '',
	        ccbin: '',
	
	        //Customer Data
	        customerType: '',
	        hasAccount: '',
	        isReturning: '',
	        lastVisited: '',
	        isLoyalty: '',
	        loyaltyTier: '',
	        mobile: '',
	        title: '',
	        age: '',
	        gender: '',
	        dob: '',
	        billingAddress1: '',
	        billingAddress2: '',
	        billingCity: '',
	        billingState: '',
	        billingCountry: '',
	        shippingAddress1: '',
	        shippingAddress2: '',
	        shippingCity: '',
	        shippingState: '',
	        shippingZipcode: '',
	        shippingCountry: '',

        },

Starter Script

<!-- Main Tag -->
<script type="module">
    const target = document.head || document.body;
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
    script.fetchpriority = "high";
    script.crossOrigin = "anonymous";
    script.async = true;
    script.id = "rokt-launcher";
    target.appendChild(script);
    await new Promise((resolve) =>
        window.Rokt
        ? resolve()
        : document
            .getElementById("rokt-launcher")
            .addEventListener("load", () => resolve())
    );

    const launcher = await window.Rokt.createLauncher({ 
        accountId:'rokt_account_id_here',
        sandbox: true,
    });
    
    const cartItems = [
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        },
        {
            'itemPrice': '',
            'itemQuantity': '',
            'majorcat': '',
            'majorcatid': '',
            'minorcat': '',
            'minorcatid': '',
            'productname': '',
            'sku': '',
        }
    ]; 

    const selection = await launcher.selectPlacements({
        identifier: 'order_confirmation_page_identifier',
        attributes: {
        
        // Required
        amount: '',
        firstname: '',
        lastname: '',
        billingzipcode: '',
        Country: '',
        Language: '',
        currency: '',
        cartItems: JSON.stringify(cartItems),
        email: '',

        //Order Data
        clientcustomerid: '',
        cartId: '',
        subtotal: '',
        totalTax: '',
        totalShipping: '',
        margin: '',
        paymenttype: '',
        ccbin: '',

        //Customer Data
        customerType: '',
        hasAccount: '',
        isReturning: '',
        lastVisited: '',
        isLoyalty: '',
        loyaltyTier: '',
        mobile: '',
        title: '',
        age: '',
        gender: '',
        dob: '',
        billingAddress1: '',
        billingAddress2: '',
        billingCity: '',
        billingState: '',
        billingCountry: '',
        shippingAddress1: '',
        shippingAddress2: '',
        shippingCity: '',
        shippingState: '',
        shippingZipcode: '',
        shippingCountry: '',

        },
    });

</script>