Skip to main content

Click to launch integration

Click to launch is an integration solution for partners who would like to show a placement only after a customer engages with a native button on their site. Please see below for implementation instructions:

Integrating click to launch​

  1. Load the Rokt Integration onto your page by including the Rokt script tag in the <head> of the website. 
<head>
  <script
    async
    crossorigin="anonymous"
    id="rokt-launcher"
    fetchpriority="high"
    src="https://apps.rokt.com/wsdk/integrations/launcher.js"
    type="module"
  ></script>
</head>

Alternatively, you can add the following snippet of code into JavaScript logic already delivered to your application: 

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);

  1. Create an instance of the Integration Launcher. If you are copying the below example, ensure roktAccountId is replaced with your account's unique ID. You can get your roktAccountId from your account manager or in One Platform.

    The reference to the launcher promise should be stored in order to be re-used later in the application flow. It could be done by assigning it to a global state, providing it as a React Context, Angular Service or any way appropriate to your framework of choice. 

const launcherPromise = new Promise((resolve, reject) => {
  script.onload = () =>
    resolve(window.Rokt.createLauncher({ accountId: "rokt-account-id" }));
  script.onerror = (error) => reject(error);
});

Initialize the Integration Launcher when a customer is on the page where the click event will occur.

  1. Load your placement. When a customer clicks the button that you’ve set as the trigger to load your placement, it should load seamlessly. The Integration Launcher service should be running at this point and the site only needs to trigger the offer selection.The placement selection can be triggered when the page and trigger element have completed loading.

    If the anchor element render can be delayed on your page, e.g. susceptible to additional XHR requests which could further delay it, you should wait until the anchor element is rendered before triggering a selection. 

async function configurePlacement() {
  let launcher = await launcherPromise;
  let selection = await launcher.selectPlacements({
    attributes: {
      email: "j.smith@example.com"
    },
    identifier: "button.click",
  });
}

Click to close​

If you would like to close a placement on button click, you’ll need to maintain the state of the placement selection. Selection can be undefined when the placement is not shown, and reassigned to reference the placement on button click in the configurePlacement function. It could be done by assigning it to a global state, providing it as a React Context, Angular Service or any way appropriate to your framework of choice.

When closing a placement, the partner site needs to trigger a method on the Rokt service to remove placements on the current page and perform cleanup. 

// close placement selection
selection.close();

If you are rendering an embedded placement, you may want to remove the anchor HTML element to not affect the site layout. See example below. 

// remove Rokt Div
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove();
Was this article helpful?