Create an Overlay

Overview

An Overlay is a pop-up, ribbon, or interstitial shown to visitors at specific moments - for example, when they're about to leave the page. Use it to display personalized messages to specific segments of visitors.

Step 1 - Create a new Overlay

From the top left menu, select Overlay, then New Overlay.

Step 2 - Choose a template and trigger

Choose your overlay template, filtering by category and type from the list on the left - or build your own custom overlay using the JavaScript template.

Next, choose how the experiment should trigger:

• On Load - shows the overlay after the page loads, with an optional delay you can set in the Creative.

• On Exit - shows the overlay the moment the visitor tries to leave the page (moving toward the URL bar or the close button).

• On Scroll - shows the overlay once the visitor scrolls past a set percentage of the page (e.g. 50% means halfway down).

Step 3 - Design the overlay

Once you've chosen a template and trigger, you'll reach the variation editor. Click any element in the overlay to unlock editing options - text, font, color, size, and personalization using custom variables, Customer Attributes, or On-Page Variables.

Design panel

On the left side, under Design, you can:

• Set the overlay's opacity.

• Choose a background color or a background image (via image URL).

• Set the Submit button to redirect to a URL, close the overlay, or trigger another experiment.

Settings panel

• Name your template.

• Show or hide the 'X' close button in the upper right corner.

• Set a delay before the overlay appears after being triggered, and how long it stays on screen before auto-closing. Leaving both at 0 means the overlay appears immediately and never auto-closes.

• Choose an animation and its direction.

Lead Collector

Some templates include a Lead Collector, letting you gather name, email, or phone number (each optionally required). Leads can be sent to Email, Webhook, Campaign Monitor, GetResponse, FreshMail, MailChimp, or Zapier. You can also enable Collect location information here, and set a personalized "Thank you" message plus a specific action for when the button is pressed.

Custom code and device preview

For changes not available in the design editor, use the Code Editor (</>) at the bottom of the page to write your own custom code. You can also switch between device types to preview the overlay as you design it.

Step 4 - Set the audience

Manage the pages where you want this experiment to run using one of these URL conditions:

• URL is - runs only on the exact page entered.

• URL is not - runs on every page except the one entered.

• URL starts with - runs on any page whose URL starts with the entered value.

• URL ends with - runs on any page whose URL ends with the entered value.

• URL contains - runs on any page whose URL contains the entered value.

• URL does not contain - runs on any page whose URL does not contain the entered value.

• URL RegEx - define matching pages using a regular expression.

• Page contains keyword - runs on pages containing a specific keyword or short phrase.

Use Excluded URL pages the same way, if you want the experiment to apply broadly but with a few specific exceptions.

Step 5 - Set the segmentation

By default, the experiment runs for All visitors. Press Select or create segment to target a specific audience instead. You can also filter by Device type.

Advanced Settings lets you set Limits (stop the experiment once a threshold is reached) and Exclusivity (control whether this experiment can run alongside others). See Understand Experiment Compatibility Rules.

Step 6 - Traffic allocation and goals

Choose the percentage of your segment's visitors to include, then split that traffic between Control and Variation using the slider.

There are 3 default goals: Sale, Engagement, and Bounce Rate. Add, remove, or create custom goals as needed - see Goals Overview for the difference between Local and Global goals. You can also set a Goal Timeout, the window after which conversions stop being counted (platform default: 3 days).

Step 7 - Schedule and publish

Under Frequency, decide how often the overlay can be shown to the same visitor. Under Scheduling, set the timeframe the experiment should run, with an option to be notified by email when it ends.

You can also set Excluded hours intervals for specific days or times, with a timezone setting applied to those intervals.

When ready, choose Save & Continue or Publish.

A/B testing multiple overlay designs

Not sure which text, color, or Lead Collector setup performs best? Create multiple variations within the same overlay experiment - either the same template personalized differently, or entirely different templates.

By default, traffic splits evenly between Control and all variations. You can instead allocate traffic equally only among your variations, excluding Control, if you're comparing overlay designs against each other rather than against "no overlay."

See Read an Experiment Report to compare which version performs best.

Triggering an overlay by click

To trigger an overlay when a visitor clicks a specific button or element, you'll need two experiments working together: the overlay itself, and an A/B test that triggers it.

Setting up the overlay

Create your overlay with these specific settings:

• Trigger: On Load - 0 seconds.

• Audience tab: leave the included URL pages field empty.

• Traffic Allocation & Goals: set to run 100% on Variation.

• Scheduling → Frequency: set to Every time.

Connecting the A/B test

Create a new A/B test (see Create an A/B Test). In the Visual Editor, select the element that should trigger the overlay, choose Trigger experiment, then Trigger Interaction, and select the overlay variation you want shown.

Complete the rest of the A/B test setup as normal.

Running an Overlay and a Survey together

You can run both on the same page(s), as long as they don't share the same audience, segment, frequency, and trigger all at once. If all of those match exactly, only one will apply. See Understand Experiment Compatibility Rules for the full logic.