Manage pop-up modals and forms

Use the Activation page to launch engaging pop-up modals and forms on your website 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.

Add a pop-up modal in a web campaign

1. Go to Activation > Engage > Create New Campaign.
2. Select Web.
3. Select a web campaign recipe or click Create From Scratch.
4. Enter a campaign name.
5. The Enrollment section is set to All Visitors by default. If you want to use a real-time segment as your audience for this campaign, select one from the list.
6. Edit the touchpoint and select Web Modal to begin designing and configuring your content.

Configure web modal targets

In the Targets section, select where you want this content to display on your site:

• Page URL – Expand to select Page URL, a UTM parameter, or a Custom Query Parameter for the target location.
• Contains – Expand to select Contains, Equals, Does not contain, or Does not equal to determine how you want to target the provided location.
• URL snippet or path – Enter the URL snippet or path that you want to target.
• Or – You can target more pages or parameters using an OR operator.
• And – You can target more pages or parameters using an AND operator.
• Remove – If you want to remove a defined target, hover your cursor over the target row and click the Remove icon.

Configure web modal triggers

In the Triggers section, choose when you want this content to display on your site:

• 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.

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.

Configure web modal constraints

In the Constraints section, choose how often you want the content to display to visitors:

• Show up to X times every X days per visitor – Limit customers from seeing too much content in a single period (for example, once per week).
• Show up to X times total per visitor – 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. This 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 search engine optimization (SEO) if you enable this setting.

Design your web modal

Before starting a new design, click 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, enter a Name for your new content.

Web modal elements

Layout

Your web content needs a structure, composed of sections. Drag and drop the elements to put them in the desired location in your modal, then click the element in the modal and use 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. Drag and drop the elements to put them in the desired location in your modal, then click the element in the modal to use the Details tab to modify the format, spacing, links, and other settings.

• Header – An H1 header area. Use it sparingly, like 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. This is recommended only if you are familiar with the HTML markup language.

Forms

Gather information with your content by creating a pop-up form. Drag and drop the elements to put them in the desired location in your modal, then click the element in the modal to use 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 into 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.

Web modal details

You can change settings to affect the entire piece of content. Access details by clicking the Container option in the breadcrumb trail or by clicking 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 turning the toggle on.

Modal properties

• Backdrop Color – Color of your web page behind the web content.
• Close Button – A specific button to dismiss the content. If you disable the Close Button, customers can close your modal by clicking outside 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 the close button.

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 – The 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 – The color of links included in the pop-up or form.
• Link Underline – Enable this toggle to 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 to make the line thicker. Decrease 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.

Configure 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 can 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 your web modal

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

1. Click Preview.

   

2. 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 Targets section, so ensure it is a valid page.
3. Click Generate Preview.

Activate your web modal

To make the web modal or form available to your website visitors:

1. Click Save.
2. Select the campaign's name from the breadcrumb trail.
3. Click Go Live, then click Yes, Go Live to confirm.