Manage pop-up modals and forms

  • Updated

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 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 from the drop-down list. 
  5. Edit the touchpoint and select Web Modal to design and configure your pop-up modal content.

Configure targets

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

  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:

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

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.   

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.

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

    • 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 the HTML markup language.

Forms

Drag and drop form elements from Elements > Forms to create forms and get customer information and permissions. Select the Details tab to format the form elements. 

  • 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.
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 if you do not add these fields.

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.

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

  • 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

  • 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

  • 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

Padding

Create-popup-11.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

  • 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

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

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