Last updated Sep 27, 2024

DirectOnPage

Add the Rokt Web SDK directly onto your page

Add the Rokt Web SDK in the <head> section of your payment or checkout page. You can find the complete guide for adding the Rokt Web SDK to your site here.
Integrate the required data elements for Rokt to load the placement and relevant ads. Include all relevant attributes required to personalize offers and provide accurate reporting and analytics. Additional details here.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags -->

  <!-- Part #1 - Load the Web SDK -->
  <script type="module">
     window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
        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";

        script.addEventListener('load', () => resolve());
        script.addEventListener('error', (error) => reject(error));

        target.appendChild(script);
     });
  </script>

  <!-- Other scripts and meta tags -->
</head>
<body>
  <!-- Your HTML content here -->

  <!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
  <script type="module">
    await window.RoktLauncherScriptPromise;
    
    const launcher = await window.Rokt.createLauncher({
        accountId:'rokt-account-id',
        sandbox: location.href.indexOf("staging_domain_here") > 0,
    });

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

    const selection = await launcher.selectPlacements({
        identifier: "payment_page",
        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>

  <!-- Your HTML content here -->
</body>
</html>

More information on adding event listeners for event based integration can be found here.

Add the Rokt Web SDK directly onto your page​

Add the Rokt Web SDK directly onto your page