Create pop-up modals and forms

If you had access to campaigns prior to April 2023, Optimizely updated the tab name from Campaigns to Activation. All functionality remains the same.

Use the Activation page to launch engaging pop-up modals and forms on your website, such as to gather information about your customers or display offers and promotions.

You must include the Optimizely Data Platform (ODP) Javascript tag in your site's content to add pop-up modals and forms to your website.

Create a pop-up modal or form

Use the following steps to create a pop-up modal or form:

Go to Activation > Engage > Create New Campaign.
Select Web.
Click Untitled Campaign to set a campaign name.
Click Touchpoint 1 to customize the name.
Select the Edit icon to begin designing and configuring your content.

Set targets

In the Targets section, select where you want this content to appear.

You can use a Page URL, UTM Parameter, or Custom Query Parameter for the target location.
The targeted location can Contain, Equal, Not contain, or Not be equal to the provided location.
You can target more pages or parameters using an OR operator.
You can target more pages or parameters using an AND operator.
Select the Remove icon when hovering over the row to remove a previous section.

Set triggers

In the Triggers accordion, choose when you want this content to appear.

Display immediately when the page loads – Show the content when a 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.
Display on X% page scroll – Show the content after customers scroll a certain percentage of the page.
Display on exit intent – Show the content when the customer's mouse leaves the active window, indicating that they may intend to leave the page.

Manual triggers (advanced)

To manually display web content based on your custom criteria, ODP provides an SDK method for development teams to utilize.

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, such as when your customer adds an item to their cart.

Set constraints

In the Constraints section, choose how often you want the content to appear.

Limit to X displays per X (time range) per customer – Limit customers from seeing too much content in a single period (for example, once per week).
Limit to X displays total per customer – Limit customers from seeing the content more than X number of times in total (for example, three times in total).
Show on mobile – Determine the content's availability on mobile devices. Show on mobile is disabled by default and is not recommended due to a Google policy. While Google considers this content appropriate in some instances, such as cookie acknowledgments, it may negatively impact your company's SEO if you enable this setting.

Set design

Before starting a new design, use the Load Template drop-down list to select from premade pop-up modals and forms, created by your team with the templates tool. You can further customize and rename them. If you do not have a premade design, click Name to customize the name of your new content.

Set elements

Layout

Your web content needs a structure, composed of sections. Click and drag the elements to put them in the desired location, then click on each one to reveal the Details tab to modify the format, spacing, links, and other settings.

Section – A space to hold content. Place a new section to place a new type of content such as a header or text. All columns and grids contain individual sections.
Responsive Column – A column that "responds" or wraps on a mobile device. You can choose which way the columns respond, such as left to right, from within the details.
Grouped Column – A set of columns that do not wrap on mobile. Use a grouped column for text-based columns that you want to scale down instead of wrapping.
Grid – A specific number of columns and rows.
Product Grid – A grid populated with product recommendations.
Navigation – Editable links that you can use to direct customers to additional content.

Basic Content

Use these elements to add content to your pop-up modal or form. Click and drag the elements to put them in the desired location, then click on each one to reveal the Details tab to modify the format, spacing, links, and other settings.

Header – A H1 header area. Use it sparingly, such as for the title only, within pop-up modals and forms.
Text – A rich text area.
Image – An image area.
Button – A button. Add a hyperlink to create a call-to-action and direct the customer to another action or additional content.
Divider – A dividing line between the sections of the content.
Spacer – Space between the sections of the content.
Social – Social media icons.
Raw HTML – An HTML area for detailed control of the content. However, you may see differences between the preview and the web content displayed to customers. We recommend only using this element if you are familiar with the HTML markup language.

Forms

Gather information with your content by creating a pop-up form. Click and drag the elements to put them in the desired location, then click on each one to reveal the Details tab to modify the format, spacing, links, and other settings. Use these options to make specific fields required and select what profile attribute the field will update when it is included in the form submission.

Text Box – A single-line text field to capture customer information, such as their email address and name.
Checkbox – A checkbox field for opting in to mailing lists or updating individual profile attributes. Customers can select multiple values.
Submit Button – A unique button that allows the form to be submitted. You can only add one submit button to a form.
Radio Button – A radio button field to present a group of options and update the associated profile attribute. Customers can select only one value.
Dropdown – A dropdown field to present a group of options and update the associated profile attribute. Customers can select only one value.

ODP automatically validates the email, opt-in, and Submit button fields when your web content contains form elements. If these fields have not been added, the website will not display the form.

Set details

You can change settings to affect the entire piece of content. Access details by clicking the Container option in the breadcrumb menu or by clicking on the background of the web content.

Container properties

Background Color – Color of the pop-up or form.
Content Width – Width in pixels of the pop-up or form.
Content Height – Height of the pop-up or form. This property is set to auto by default. Set a specific height in pixels by selecting the toggle.

Modal properties

Backdrop Color – Color of your web page behind the web content.
Close Buttons – A specific button to dismiss the content. If you disable the Close button, customers can close your modal by clicking outside of the container instead.
Close Button Position – Location of Close when it is enabled.
Close Button Background Color – Color behind the button. Use a contrasting color to make the button more noticeable.
Close Button Icon Color – Color of Close.

Text properties

Font Family – Font used in the pop-up or form.
Font Weight – Font-weight used in the pop-up or form.
Font Color – Color of the font in the pop-up or form.
Font Size – Size of the font used in the pop-up or form.

Link properties

Link Color – Color of links included in the pop-up or form.
Link Underline – Style the link with an underline.

Content Settings

Remove Duplicate Products – When enabled, duplicate products do not display in the product grids.

Padding

Padding – Enable More Options to apply padding from specific directions.
All Sides – Determine how much padding to apply to the content in the form or pop-up. Increase the padding to move the content towards the center. Reduce the padding to move the content towards the edges.

Border

Border – Enable More Options to determine the border size and style for each side of the pop-up or form separately.
All Sides – Use this option to add a border to the content. Increase the border to make the line thicker. Reduce the border to make the line thinner.

Border Radius

Use this option to round the borders of the form or pop-up. Use 0 to have sharp edges like a square. Increase the number to make the border rounder.

Enable More Options to determine the border-radius for each side of the pop-up or form separately.

Set main and confirmation designs

When your content contains a form that does not redirect to another page through the Submit Button's success action, you have the ability to toggle between Main and Confirmation designs. Toggle the main design to see what your customers see when the content is first displayed. Toggle the confirmation design to see what your customers see once they successfully submit the form.

Preview

You can preview the pop-up or form on one of your website pages. Preview shows all triggers but ignores all constraints. Use these steps to preview the content:

Click Preview.
Enter a page URL to use for the preview. ODP checks the page you have selected against the rules you have set up in the Pages accordion, so please ensure it is a valid page.
Select Generate Preview.

Go Live

Use these steps to make the pop-up or form available to your website visitors:

Click Save.
Select the campaign's name from the breadcrumb menu.
Click Go Live.