---
title: Manage web embeds
slug: data-platform/docs/manage-web-embeds
docTags: 
createdAt: 2026-08-10T12:05:15.000Z
---

:::hint{type="info"}
**Note**

The terms *audiences* and *segments* are interchangeable. Optimizely has updated all *segments* to *audiences* on the **Audiences** page and is updating the UI on other pages. See  [Understand audiences](docId\:v-gHiL9jfINBey-4QNtFM) to get information on audiences.
:::

Use Optimizely Data Platform (ODP) web embeds to deliver real-time, personalized content and experiences directly on your customers' websites and mobile devices. To include a web embed in your website

- install the [(ODP) JavaScript tag](<../../../Get Started with ODP/implement-the-odp-javascript-tag.mdx>) on the targeted pages.
- match the sub-domain for the targeted pages with the **Cookie Domain** set in the JavaScript tag's advanced options.

## Create a web embed

1. Go to **Activations > Overview > Create New Campaign**.
2. Select **Web**.
3. Select a web campaign recipe or click **Create From Scratch**.
4. Expand **Enrollment** and select **All Visitors** or a [real-time audience](docId\:chCPcgJQ5k5t6nUgnnd43) from the drop-down list. 
5. Edit the touchpoint and select **Web Embed** to design and configure your content.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/z96Abg9RD4SOw5xl3aT_-_01-create-a-web-embed.png" size="100" isUploading="false" width="800" height="254" darkWidth="800" darkHeight="254" showCaption="false" indent="1"}

### Configure targets

Expand **Targets** and select where you want the web embed content to display on your site.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ddlUBbrH_kdJx94l6LB9u_02-configure-targets.png)

1. **Page URL** – Expand to select **Page URL**, a **UTM** parameter, or a **Custom Query Parameter** for the target location.
2. **Contains** – Expand to select **Contains**, **Equals**, **Does not contain**, or **Does not equal** to determine how you want to target the provided location.
3. **URL snippet or path** – Enter the URL snippet or path you want to target.
4. **Or** – Use **OR** to target more pages and parameters. 
5. **And** – Use **AND** to target more pages or parameters.
6. **Selector Name** – Enter the selector name to determine where the web embed displays on the targeted page. To help find the necessary selector for your content, see [Locate a selector](docId:8i1ZbHcx42xsQjPS4yvyY).
7. **Selector Position** – Expand to select the position of the web embed on the targeted page (**After**, **Inside**, or **Before**).
8. **Remove** – Hover your cursor over the target row and click **remove** to remove the defined target.

### Locate a selector

To select the location of the web embed on your website, identify a selector associated with the section.

1. Go to the target page on your website.
2. Find the section where you want to place the web embed.
3. Right-click in the section and select **Inspect**.
4. Click the **Elements** tab and find `class=" section-one"` in the code.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Bw2ub2Kn4Sp0fnIAe4ysd_03-locate-a-selector-1.png" size="100" isUploading="false" width="800" height="547" darkWidth="800" darkHeight="547" showCaption="false" indent="1"}

5. Return to ODP and expand **Targets**. Copy and paste the identified class or ID name in **Selector Name**.
   - Enter classes with a period (.) before the name, for example, *.section-one*.
   - Enter IDs with a pound symbol (#) before the name, for example, *#section-one*.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/eDKy6oY8mIHV76ziCuUX-_04-locate-a-selector-2.png" size="100" isUploading="false" width="800" height="279" darkWidth="800" darkHeight="279" showCaption="false" indent="1"}

### Configure constraints

Expand **Constraints** and choose how often you want customers to see your content. 

- **Always show embedded context** – Make the web embed available at all times. 
- **Show up to \[number of] times every \[time range] per visitor** – Limit the number of times the content is shown to a customer over a single period of time, for example, once per week. 
- **Show up to \[number of] times total per visitor** – Limit the total number of times the content is shown to a customer, for example, three times.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/aEPIKnVVEn8tZegeD2ByO_05-configure-constraints.png" size="80" isUploading="false" width="526" height="189" darkWidth="526" darkHeight="189" showCaption="false" indent="1"}

## Design a web embed

You can select an existing web embed layout by clicking **Load Template** and browsing the template gallery. You can use this or make further customizations. You can save the template by clicking the arrow beside **Load Template** and selecting **Save as Template**. Click **Replace Existing** to replace the existing template without affecting its usage in previous instances. Click **Create New** to create a template.   

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/y80aOm1iA7p2TTMmovXrr_06-design-a-web-embed.png)

### Web embed elements

**Layout**

Drag and drop elements from **Elements > Layout** to design your web embed content. Select the **Details** tab to format the layout elements.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/GwyUGw6Wcf15ByprLBNtm_07-web-embed-elements-1.png)

- **Section** – A space to hold content, like a header or text. All columns and grids contain individual sections.
- **Responsive Column** – A column that responds or wraps on a mobile device. Choose the direction in which the columns respond from the **Details** tab.
- **Grouped Column** – A set of columns that do not wrap on mobile. Use a grouped column for text-based columns you want to scale down instead of wrapping.
- **Grid** – A specific number of columns and rows.
- **Product Grid** – A specific number of columns and rows to [recommend products](docId:_sIz5iOu2_dQnHq_vbCcc).
- **Navigation** – Editable links that you can use to direct customers to additional content.

**Basic content**

Drag and drop components from **Elements > Basic Content** to populate your web embed content. Select the **Details** tab to format the components. 

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/wQ3QAsihPKcRrbPXWeEoH_08-web-embed-elements-2.png)

- **Header** – A header area. Use this occasionally, such as for titles. 
- **Text** – A text area.
- **Image** – An image area.
- **Button** – A button. Add a hyperlink to create a call-to-action and redirect the customer to a section or another webpage.
- **Divider** – A dividing line between the sections of the content.
- **Spacer** – Space between the sections of the content.
- **Social** – Social media icons with links.
- **Raw HTML** – An HTML area for detailed control of the content. However, you may see differences between the preview and the end-user content. Use this only if you are familiar with HTML.

**Forms**

Drag and drop form elements from **Elements > Forms** to create forms and collect customer information and [permissions](https://episerver.zendesk.com/knowledge/editor/01HD4P7VPAJTQJCBDPM5GFCQ5R/en-us?brand_id=499034\&return_to=%2Fhc%2Fen-us%2Farticles%2F4407269283213). Select the **Details** tab to format the form elements. 

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/vKmgXLxH4Npj2Pmu_ea45_09-web-embed-elements-3.png)

- **Text Box** – A single-line text field to capture customer information, such as email addresses and names.
- **Checkbox** – A checkbox for opting into mailing lists or updating individual profile attributes. Add multiple checkboxes to give your customers multiple-choice options.
- **Submit Button** – A button that lets the customer submit the form. You can only add one submit button to a form.
- **Radio Button** – A radio button to present a group of options and update the associated profile attribute. You can add multiple radio buttons, but customers can only select one.
- **Dropdown** – A drop-down list to present a group of options and update the associated profile attribute. You can add the drop-down list to let customers select a single option from the list.

:::hint{type="info"}
**Note**

If you create a web embed form, ODP automatically validates the email, opt-in, and submit button elements. The [website does not display the form](docId:3Hd282m_aW0c1IEaw3klH) if you do not add these fields.
:::

### Web embed details

You can also format the entire web embed content. Click **Container** from the breadcrumb trail or click on the background to access the **Details** tab. 

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/DHs-8Z0zJ_UUrz2Sakv19_10-web-embed-details.png)

**Container properties**

- **Background Color** – The background color of the web embed.
- **Content Width** – The width of the web embed in pixels.
- **Content Height** – The height of the web embed. Toggle **Auto** off to set your desired height in pixels. 

**Text properties**

- **Font Family** – The font style used in the web embed.
- **Font Weight** – The font weight used in the web embed.
- **Font Color** – The font color used in the web embed.
- **Font Size** – The font size used in the web embed.

**Link properties**

- **Link Color** – The link colors included in the web embed.
- **Link Underline** – The option to underline the link.

**Content Settings**

- **Remove Duplicate Products** – Toggle **Remove Duplicate Products** on to [stop displaying duplicate products in product grids.](docId\:Rnv2G0I1ut3ZbZxykluEe)

**Padding**

- Determine how much padding to apply to the content in the web embed. Increase the padding to move the content toward the center and decrease it to move it toward the edges.
- Enable **More Options** to apply padding from specific directions.

**Border**

- Enable More Options to determine the border size and style for each side of the web embed separately.
- Click **All Sides** to add a border to the content. Increase or decrease the size of the line to make it thicker or thinner. 

**Border Radius**

- Use **Border Radius** to make the borders of the web embed rounded. Use **0** to have sharp edges like a square or increase the number to make the border rounder.
- Enable **More Options** to determine the border radius for each side of the web embed separately.

### Switch between main and confirmation designs

You can switch between **Main** and **Confirmation** to view what your customers see on the initial page and after submitting the form.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-At3OVJLKFfIKrdhBetJc_11-switch-between-main-and-confirmation-designs.png)

## Preview and activate a web embed

### Preview your web embed

Besides the **Desktop** and **Mobile** views, you can preview the web embed on one of your website pages.

1. Click **Preview**.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/A1vfgauVZHQ2_cBk8X7Dv_12-preview-your-web-embed.png" size="100" isUploading="false" width="800" height="228" darkWidth="800" darkHeight="228" showCaption="false" indent="1"}

2. Enter your URL in **Webpage URL**. ODP checks the page you select against the rules you set up in **Targets**, so ensure it is valid.
3. Click **Generate Preview**.

### Activate your web embed

To make the web embed available to your website visitors, complete the following:

1. Click **Save**.
2. Select the campaign's name from the breadcrumb trail.
3. Click **Go Live**.

::Image[]{src="https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/8zFkeqkkZz0fjTZabkgj9_13-activate-your-web-embed.png" size="100" isUploading="false" width="800" height="330" darkWidth="800" darkHeight="330" showCaption="false" indent="1"}