Summary
This article covers the following topics:
1. What is an overlay?
Overlays are graphical messages that appear on top of your site when a visitor engages in a certain type of behaviour (for example, showing intent to exit the website or dwelling on the page for a specified amount of time).
Their aim is to deliver the right message to the right user at the right time in order to encourage conversion. They are used to offer incentives, emphasise brand messages, ask visitors for their email address, or redirect them to key pages.
See below how to edit and style an overlay experience using the Campaign Builder Beta.
2. Creating an overlay experience
To create a new campaigns, click the + button on the top left of your website dashboard. You will be asked to choose which version of the Campaign Builder to use:
⚠️ Campaigns created with the Campaign Builder Beta cannot be edited with or migrated to the Legacy Campaign Builder, and vice versa. They can only be opened on the same version in which they were originally generated. This also applies to campaign duplications.
For more information, read the help article on getting started with the new Campaign Builder Beta.
With the desktop view, you can design the creatives that will appear on any desktop or tablet device while the mobile view allows you to design the creatives that will be displayed on any mobile device.
3. Adjusting the z-index position
Z-index defines the order of overlapping HTML elements of a webpage. Elements with a higher index will be placed on top of elements with a lower index.
By default, the z-index for this stage is set to the second highest layer of the webpage.
To manually, enforce a different z-index position, select the overlay background layer, then go to the Position and size section on the Overlay Properties panel and switch the toggle on to enter a new value:
4. Overlay dimensions
Overlays have fixed dimensions for mobile and desktop in the Campaign Builder Beta:
Device | Standard Rectangle Overlay Dimensions | Full Screen Overlay Dimensions |
Desktop | 960x600 px | 1366x760px |
Mobile | 700x1200px | 700x1200px |
The Position and size section of the properties panel allows you to choose between a Standard Overlay (with fixed dimensions) or a Full Screen Overlay.
ℹ️ Full Screen overlays have slightly larger dimensions on desktop such that the content occupies as much screen space on a device webpage as possible. Learn more about full screen overlays in the section below.
5. Full Screen Overlays
Full screen overlays are great for creating gated content, or to push promotions.
To configure a full screen overlay, choose the 'Full screen' option in the Position and size section in the Overlay Background Properties panel.
⚠️ Full screen overlays expand the background color to match screen dimensions. At present, it only support the use of solid colors. Any background images added will not expand to fill the page window.
6. Overlay animation
You can choose how overlays are going to animate on your website page. The Campaign Builder Beta currently supports the following animation options:
Fade in (default): reveals the overlay with a gradual increase in visibility. Overlays can fade in from the center, the top, the bottom, the left or the right of the screen.
Scale in: enlarges the overlay, creating a dynamic entrance effect.
Slide in: brings the overlay into view with a lateral motion, adding a sleek entrance. Overlays can fade in from the top, the bottom, the left or the right of the screen as well as in an elipse - from the top forward.
No animation: overlay triggers in instant, static display without any dynamic effects.
To configure how an overlay animates, go to the Animation section on the Overlay properties panel.
7. Background image upload
To upload an image to use as background for your overlay, go the Background image upload section on the Overlay Properties panel.
⚠️ When the Accessibility Compliance mode is on, it is not possible to upload gifs as background images. To learn more, visit the Accessibility Basics help article.
The background image can be adjusted to the overlay container in 2 different ways:
Fill container: the image is center-aligned and scaled to fill the entire container so that no empty space is visible.
Fit container: the image is center-aligned and scaled to be entirely visible within the container.
Once an image is uploaded, it is possible to replace it by a different file, download the image back to your device or delete it so the overlay background reverts to a solid color.
8. Fill and border properties
It is possible to style and customize the shape of an overlay on the Fill and border section of the Overlay properties panel.
Disable the fill color to create a transparent background:
Use the color picker to select a color from within the creative:
Add a border using the border color and border weight properties:
Round the corners by altering the corner radius. It is also possible to alter them independently by toggling the independent corners option:
9. Accessibility settings
In the Accessibility settings section of the overlay properties panel it is possible to set up the read order for the overlay as well as define an aria-label for the experience.
The aria-label describes a web page element so that it can be identified by screen readers. By default, it will be automatically extracted from a text box marked as a ‘heading’.
If the creative doesn't contain a text box marked as a ‘heading’, the default aria-label will be "Overlay".
Alternatively, by switching the Override aria-label toggle on, you can provide a custom aria-label:
