Summary
This article covers the following topics:
1. What is a sticky experience?
Sticky campaigns allow you to place campaigns on site, pinning or anchoring them to a specific element on the page.
With sticky campaigns you can:
Create more subtle campaigns that don’t take your user’s attention away from the main content.
Position your campaign anywhere you like. Place it over the product image, or hover it beside the add to cart CTA.
Place relevant messaging in a campaign floating next to a CTA and not in the corner.
The difference between embedded and sticky formats is that sticky experiences attach to website elements without interacting with the page content while embedded moves content of the page around to fit into gaps.
See below how to edit and style an overlay experience using the Campaign Builder Beta.
2. Creating a sticky 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. Choosing a website element selector
The selector is the CSS identifier that you can specify to attach the creative so it appears on the webpage. You don't need to know how to code to obtain this and you can do it from your web browser:
Find the element you want to attach your campaign to, right click it and hit Inspect.
You'll then be presented with the dev tools panel that looks like the below
From here you'll need to find the parent element (you can do this by seeing if there are any expanded arrows above the element you Inspected, you may already have the parent element). Once done, right click on this in the dev tools panel, scroll to Copy and Copy Selector.
Paste the selector on the website element input field on the embedded background properties accessible by clicking on the sticky background layer
4. Sticking the creative to a website element
Position your campaign by deciding which corner or side you'll want to anchor to which part of the element/selector you've chosen.
Additionally, it is possible to adjust the horizontal or vertical space between the creative and website element by changing the offsets.
5. Clickable sticky experiences
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 sticky experience section on the sticky 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.
6. 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 Sticky Properties panel and switch the toggle on to enter a new value:
7. Sticky animation
You can choose how sticky experiences 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 sticky experiences animate, go to the Animation section on the Sticky properties panel.
8. Background image upload
To upload an image to use as background for your sticky experience, go the Background image upload section on the Sticky 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 sticky 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.
9. Fill and border properties
It is possible to style and customize the shape of the creative on the Fill and border section of the sticky properties panel.
10. Accessibility settings
In the Accessibility settings section of the sticky properties 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 "Sticky experience".
Alternatively, by switching the Override aria-label toggle on, you can provide a custom aria-label:
11. Switching between in-page formats
It is possible to turn a sticky experience into a banner or an embedded experience without the need to add a different stage and then copy/paste the properties manually.
This can be particularly useful if an experience originally built as a sticky is not rendering correctly on the website and would work better if embedded on the parent element instead of being attached to it, for example.
To do this, click to open the menu at the sticky stage, go to the Change format to option and select one the formats available.
ℹ️ By changing the format, all components and design properties (fill and border, background image, z-index position) are preserved. You might be able to set up properties that were not available or were specific to the previous format (website selector, placement options, margins, animation.