Summary
This article covers the following topics:
1. What is a Notification?
Notifications are a smaller, quieter cousin of our standard overlay format. They appear to your visitors in fixed position of the screen and persist when visitors scroll up or down.
With notifications, you can deliver subtle messages throughout the visitor's journey – not just when they look to leave.
See below how to edit and style an overlay experience using the Campaign Builder Beta.
2. Creating a notification
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. Notification dimensions
You can switch between the options of using fixed notification dimensions or filling the width of the screen to create an on-page banner effect.
To configure dimensions, go to the Position and size section in the Notifications Background Properties panel.
⚠️ Fill width expands the background color to match the screen’s width while the creative remains center-aligned. At present, it only supports the use of solid colors. Any background images added will not expand to fill the page window.
4. Notification placement
Select a placement option to dictate how your campaign appears on the screen.
Notifications with fixed dimensions can be placed:
At the corner of the screen - top left, top right, bottom left, bottom right
Aligned to the middle top, bottom, left, right of the screen
Notifications that fill the screen width can only be placed at the top or bottom of the screen.
5. Rendering notifications on a website
When the creative resolution is higher than the screen resolution, it will scale down to fit the screen for all desktop and mobile devices and orientations.
6. Clickable notifications
Clickable formats replace the need to add an invisible CTA on top of a creative. By enabling the clickable format, the entire stage will work as a call-to-action, with the same action types and capabilities as a regular CTA component.
Clickable formats will be visible in the Links section within the review page and can be used for Campaign History Targeting.
To enable this, go the Clickable notification section on the notification properties panel and switch the toggle on:
You can then set it up using the same action types as the call-to-action component.
⚠️ When setting up clickable formats, it is not possible to include regular call-to-actions or hyperlinks to the creatives.
7. 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 Notification Properties panel and switch the toggle on to enter a new value:
8. Notification animation
You can choose how notifications are going to animate on your website page. The Campaign Builder Beta currently supports the following animation options:
Fade in: reveals the creative with a gradual increase in visibility. Experiences can fade in from the center, the top, the bottom, the left or the right of the screen.
Scale in: enlarges the creative, creating a dynamic entrance effect.
Slide in: brings the creative into view with a lateral motion, adding a sleek entrance. Experiences 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 (default): experience triggers in instant, static display without any dynamic effects.
To configure how a notification animates, go to the Animation section on the Notification properties panel.
9. Background image upload
To upload an image to use as background for your notification, go the Background image upload section on the Notification 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 notification background 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.
10. Fill and border properties
It is possible to style and customize the shape of the creative on the Fill and border section of the notification properties panel.
11. Accessibility settings
In the Accessibility settings section of the notification panel it is possible to set up the read order 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 "Notification".
Alternatively, by switching the Override aria-label toggle on, you can provide a custom aria-label:
