Skip to main content

How to Embed a Campaign on Your Website

Blair Matheson
  • Updated

Embedding a campaign allows you to display the full interactive experience directly within the content of your own webpage, making it feel like a seamless, native part of your site. This process involves adding two small pieces of code to your website's HTML.

Tip: If you are not comfortable editing your website's HTML code, please forward these instructions to your website developer or IT department.

Step 1: Get Your Embed Code

First, you need to retrieve the two code snippets required for the embed.

  1. In your campaign, navigate to the Integrations tab.
  2. Select the "Embed the campaign to your website" option.
  3. You will see a panel with two separate code snippets. You will need both for the embed to work correctly.

Screenshot 2025-07-08 at 16.35.49.png

Step 2: Add the Code to Your Website

Now, you will add the two pieces of code to your website in two different locations.

Add the Script Tag to Your Site's <head>

The first snippet is a <script> tag. This script powers the campaign and only needs to be placed on your website once, even if you have multiple embedded campaigns.

Action: Copy the <script> tag and paste it anywhere before the closing </head> tag in your website's HTML template file.

Add the Div Tag Where the Campaign Should Appear

The second snippet is a <div> tag. This acts as a placeholder and tells the script where to load your campaign on the page.

Action: Copy the <div> tag and paste it into the body of your webpage, exactly where you want the campaign to be displayed (for example, inside a blog post or on a landing page).

Your code will look something like this, with a unique ID for your specific campaign:
<div id="adact-12345" adact-id="12345"></div>

Step 3: Passing the Customer ID (CID)

Unlike the iframe method, where the CID is passed as a URL parameter, this embed method passes the CID as a cid attribute directly on the <div> tag. Note that — unlike the other div attributes — this attribute does not use the adact- prefix.

<div
  id="adact-12345"
  adact-id="12345"
  cid="CUSTOMER_ID"
  adact-width="100%"
  adact-height="600px">
</div>

Replace CUSTOMER_ID with the actual customer ID. There are two ways to set it, depending on when it's available:

  • Server-side injection (recommended): Set cid directly in your HTML template before the page is served — no JavaScript required.
  • Dynamic div creation at runtime: If the CID isn't available when the page first loads, create the entire <div> programmatically — with cid already set — before it renders.
// Create the campaign div at runtime
const campaignDiv = document.createElement('div');
campaignDiv.id = 'adact-12345';
campaignDiv.setAttribute('adact-id', '12345');
campaignDiv.setAttribute('cid', getCurrentUserId()); // your own function
campaignDiv.setAttribute('adact-width', '100%');
campaignDiv.setAttribute('adact-height', '600px');
document.body.appendChild(campaignDiv);
Please note: Once the campaign has rendered, the cid attribute on an existing div cannot be changed. Don't use querySelector to set cid on a div that's already rendered — if the CID isn't available at page load, create the div dynamically with cid already set instead.

If you're passing an encoded customer token instead (from a Data Connection or the Minigames Public API), use customer-id-token in place of cid:

<div
  id="adact-12345"
  adact-id="12345"
  customer-id-token="CUSTOMER_ID_TOKEN"
  adact-width="100%"
  adact-height="600px">
</div>
Please note: If neither cid nor customer-id-token is passed, game completion events fire without a customer ID, and Optimove will not be able to attribute the activity to the correct customer profile.

Step 4: Customizing the Size (Optional)

You can manually adjust the width and height of the embedded campaign by editing the adact-width="" and adact-height="" parameters within the <div> code snippet you just pasted. For example:

<div id="adact-12345" adact-id="12345" adact-width="800px" adact-height="600px"></div>

Related articles