---
title: Manage pop-up modals and forms
slug: data-platform/docs/manage-pop-up-modals-and-forms
createdAt: 2026-08-10T12:05:20.000Z
---

Launch pop-up modals and forms on your website from Optimizely Data Platform (ODP) to collect customer information, display offers and promotions, and provide important notifications or alerts. You must install the [Optimizely Data Platform (ODP) Javascript tag](<../../../Get Started with ODP/implement-the-odp-javascript-tag.mdx>) in your site's content to add pop-up modals and forms to your website.

## Create a pop-up modal in a web campaign

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 segment](https://support.optimizely.com/hc/en-us/articles/10033776446733-Build-real-time-segments-in-ODP) from the drop-down list. 
5. Edit the touchpoint and select **Web Modal** to design and configure your pop-up modal content.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/INubBy2KcQqVdp-HWf90j-20260720-145700.png)

### Configure targets

Expand **Targets** and select where you want the pop-up modal to display on your site.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/PVNAJTpnSds9fJjt2lxRe-20260720-145700.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. **Remove** – Hover your cursor over the target row and click **remove** to remove the defined target.

### Configure triggers

Expand **Triggers** and choose when you want the pop-up modal to display.

- **Display immediately when the page loads** – Show the content whenever the customer visits one of the selected pages. ODP disables the other triggers to prevent repeat showings.
- **Display after** – Show the content after the allotted time, for example, after 10 seconds. 
- **Display on \[X%] page scroll** – Show the content after customers scroll a certain percentage of the page, for example, after they scroll through 70% of the page. 
- **Display on exit intent** – Show the content when the customer's cursor leaves the active window indicating they are leaving the page.

**Manual triggers (advanced)**

ODP provides the following SDK method for development teams to manually display web content based on your custom criteria:

```javascript
zaius.dispatch(
'web', 
'showContent', {
  contentId: '<insert_content_id>', 
  target: {
    selector: '<insert css selector>', // empty string for modals 
    position: 'modal' // modal | before | after | inside | replace
  }
});
```

Use this snippet to trigger content in custom scenarios, like adding an item to the cart.

### Configure constraints

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

- **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.
- **Show on mobile** – Enable the content's visibility on mobile devices. You should avoid using this option as [Google](https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html) discourages it. While Google considers this appropriate in some instances, such as cookie acknowledgments, it can negatively impact your company's search engine optimization (SEO) if you enable it. 

  ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/wFMsmmw6v4TB9AH1i3xvw-20260720-145700.png)

## Design a web modal

You can select an existing web modal 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/pRZ2Sz0VzjxvKIaZzkrDe-20260720-145700.png)

### Web modal elements

**Layout**

Drag and drop elements from **Elements > Layout** to design your pop-up modal content. Select the **Details** tab to format the layout elements.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/3vFk6LCo1-WExEfeccadD-20260720-145700.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/x63RlgbKxT-x4sNNbvLNs-20260720-145700.png)

:::Paragraph{listStyleType="disc" indent="2"}
**Header** – A header area. Use this occasionally, such as for titles. 
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Text** – A text area.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Image** – An image area.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Button** – A button. Add a hyperlink to create a call-to-action and redirect the customer to a section or another webpage.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Divider** – A dividing line between the sections of the content.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Spacer** – Space between the sections of the content.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**Social** – Social media icons with links.
:::

:::Paragraph{listStyleType="disc" indent="2"}
**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 the HTML markup language.
:::

**Forms**

Drag and drop form elements from **Elements > Forms** to create forms and get 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/uFNv9PHs0bbWzvCTmxVe5-20260720-145700.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[.](docId:3Hd282m_aW0c1IEaw3klH)
:::

### Web modal details

You can change settings to affect the entire piece of content. To access details, click the **Container** option in the breadcrumb trail or click the background of the web content.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ieuSj3J4ybav6V15gjNsr-20260720-145700.png)

**Container properties**

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

**Modal properties**

![Create-popup-7.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/wv7flaz5UnTTzu-6kgNP4-20260720-145700.png)

- **Backdrop Color** – The color of your web page behind the web content.
- **Close Button** – A button to dismiss the content. When disabled, customers can close the modal by clicking outside the container.
- **Close Button Position** – The location of the **Close Button**.
- **Close Button Background Color** – The color behind the **Close Button**. Use a contrasting color to make the button more noticeable.
- **Close Button Icon Color** – The color of the **Close Button**.

**Text properties**

![Create-popup-8.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/JUyjx91uQ8-Z6bii-zQE9-20260720-145700.png)

- **Font Family** – The font style used in the pop-up modal.
- **Font Weight** – The font weight used in the pop-up modal.
- **Font Color** – The font color used in the pop-up modal.
- **Font Size** – The font size used in the pop-up modal.

**Link properties**

![Create-popup-9.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/pQnPsDPmlq4R4aL793mPq-20260720-145700.png)

- **Link Color** – The link colors included in the pop-up modal.
- **Link Underline** – The option to underline the link.

**Content Settings**

![Create-popup-10.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/8MbMB-2Yinh2BKPRxZ_ge-20260720-145700.png)

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

**Padding**

![Create-popup-11.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/EN0jrj1fBOZZJTsDWgSaQ-20260720-145700.png)

- Determine how much padding to apply to the content in the pop-up modal. Increase the padding on **All Sides** to move the content towards the center and decrease it to move towards the edges.
- Enable **More Options** to apply padding from specific directions.

**Border**

![Create-popup-12.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/3XEn5xIN0Zlx7xFuZYGid-20260720-145700.png)

- Enable More Options to determine the border size and style for each side of the pop-up modal 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**

![Create-popup-13.png](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/dCMteav0gkRlhvmnnLgrw-20260720-145700.png)

- Use **Border Radius** to make the borders of the pop-up modal 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 pop-up modal 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 they have submitted the form.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/zWnnIvfbBK3TM7a6SzeFR-20260720-145700.png)

## Preview and activate your web modal

You can preview the pop-up modal on one of your website pages. The preview shows all triggers but ignores all constraints.

### Preview your web embed

Besides the **Desktop** and **Mobile** views, you can preview the pop-up modal on one of your website pages.

1. Click **Preview**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/gsITKlzrusb4vcczrrxDF-20260720-145700.png)
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 modal

To make the web pop-up modal 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**, then click **Yes, Go Live** to confirm.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/juKwb_sA1j507S7lINeEp-20260720-145700.png)