Use the campaigns tool to launch engaging pop-up modals and forms on your website, such as to gather information about your customers or display offers and promotions.
Create a pop-up modal or form
Use the following steps to create a pop-up modal or form:
- Go to Campaigns.
- Click 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.
In the Targets accordion, 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.
In the Triggers accordion, choose when you want this content to appear.
- Display immediately when the page loads – Show the content as soon as a customer visits one of the selected pages. Optimizely Data Platform (ODP) will disable 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, Optimizely Data Platform (ODP) provides an SDK method for development teams to utilize.
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.
In the Constraints accordion, choose how often you want this 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.
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.
Your web content needs a structure, composed of sections. Once you have placed a layout section, click it to see the Details tab, where you can modify the formatting and basic design 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.
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.
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 will automatically validate 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 detailsYou can also change settings to affect the entire piece of content. Access these by clicking the Container option in the breadcrumb menu or by clicking on the background of the web content.
- Background Color – The color of the pop-up or form.
- Content Width – The width in pixels of the pop-up or form.
- Content Height – The 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.
- Backdrop Color – The 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 – The location of the close button when it is enabled.
- Close Button Background Color – The color behind the button. Use a contrasting color to make the button more noticeable.
- Close Button Icon Color – The color of the close button icon.
- Font Family – The font that will be used by the pop-up or form.
- Font Weight – The font-weight that will be used by the pop-up or form.
- Font Color – The color of the font used by the pop-up or form.
- Font Size – The size of the font used by the pop-up or form.
- Link Color – The color of links included in the pop-up or form.
- Link Underline – The option to style the link with an underline.
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.
Enable More Options to apply padding from specific directions.
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.
Enable More Options to determine the border size and style for each side of the pop-up or form separately.
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
In addition to the Desktop and Mobile views available, 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 will check 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.
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.