An iframe (Inline Frame) is a standard HTML element used to embed content from one webpage directly into another. This method is a simple and universal way to display your campaign on your website or within a digital ad banner.

Step-by-Step Guide

Step 1: Get Your Campaign URL

First, you need your campaign's unique URL. In your campaign editor, navigate to the Integrations tab and select the "Embed the campaign to your site or banners using an iframe" option to find and copy the URL.

Step 2: Prepare the Iframe Code

Next, copy the standard HTML iframe code snippet below. This is the code you will place on your website.

<iframe src="YOUR_CAMPAIGN_URL" width="100%" height="600" style="border:none;"></iframe>

Step 3: Add and Modify the Code on Your Website

Paste the iframe code into your website's HTML where you want the campaign to appear. Important: You must replace the YOUR_CAMPAIGN_URL placeholder in the snippet with the actual URL you copied in Step 1.

Customizing the Iframe

You can adjust the appearance of the iframe by changing its attributes directly in the code:

• width: You can set a fixed pixel width (e.g., width="800") or use a percentage (e.g., width="100%") to make it responsive to the container it's in.
• height: Set a pixel height (e.g., height="600") that best fits your campaign's content to avoid internal scrollbars.
• style="border:none;": We strongly recommend keeping this part to ensure there is no unsightly border around your embedded campaign.

Passing the Customer ID (CID)

When you embed a campaign using an iframe, the customer ID is not injected automatically — even if the Optimove SDK is installed on the page. The [%customer_id%] placeholder does not work in this context.

To make sure gameplay activity is attributed to the right customer profile, append the CID manually to the iframe's src URL using the cid query parameter:

<iframe
  src="YOUR_CAMPAIGN_URL?cid=CUSTOMER_ID"
  width="100%"
  height="600"
  style="border:none;">
</iframe>

Replace CUSTOMER_ID dynamically using your backend or frontend logic. For example:

Server-side:

src="YOUR_CAMPAIGN_URL?cid={{ customer_id }}"

Client-side (JavaScript):

const cid = getCurrentUserId(); // replace with your own logic
document.querySelector('iframe').src =
  `YOUR_CAMPAIGN_URL?cid=${cid}`;