> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Web SDK Integration for Rokt Thanks

> This article is for brands that do not use Shopify Checkout but still want to take advantage of Aftersell’s Rokt Thanks offers.

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:

1. **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.
2. **What user data or properties are available on the confirmation page?**\
   We’ll need access to [specific properties](https://www.notion.so/Custom-Web-SDK-integration-for-Rokt-Thanks-cd630976806242478aeea6c602bc0559?pvs=21) related to purchased items and customer information. The more data that is available, the more relevant and accurate your Rokt Thanks offers will be.
3. **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](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization)** 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](https://docs.rokt.com/developers/integration-guides/web/testing) 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>
```
