Summary
This article covers the following topics:
1. What is an embedded experience?
The embedded format allow you to place experiences in the site, relative to an element on the page.
They are designed to look native and less intrusive. As embedded experiences are part of the page (rather than on the page), they can be surfaced closer to key call to actions and images, which can yield bigger results.
The difference between the embedded format and the sticky format is that the former has the ability to move content around to fit into gaps. Sticky campaigns simply attach to elements.
See below how to edit and style an overlay experience using the Campaign Builder Beta.
2. Creating an embedded experience
To create a new campaign, 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 embedded background layer
4. Embedded dimensions
You can switch between the options of using fixed embedded dimensions or filling the width of the parent website element.
To configure dimensions, go to the Position and size section in the Embedded Background Properties panel.
⚠️ Fill width expands the background color to match the parent website element’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.
5. Embedded placement
Select a placement option to dictate how your campaign appears in relation to the website element.
An embedded experience can appear:
Before the parent element
After the parent element
Inside the parent element, as the first child of a group of children elements
Inside the parent element, as the last child of a group of children elements
Additionally, it is possible to adjust the space between the creative and website element by changing the margins.
6. Rendering embedded experiences 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.
7. Clickable embedded 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 embedded experience section on the embedded 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.
8. 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 Embedded Properties panel and switch the toggle on to enter a new value:
9. Background image upload
To upload an image to use as background for your embedded experience, go the Background image upload section on the Embedded 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 embedded 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 embedded properties panel.
11. Accessibility settings
In the Accessibility settings section of the embedded 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 Embedded experience.
Alternatively, by switching the Override aria-label toggle on, you can provide a custom aria-label:
12. Switching between in-page formats
It is possible to turn an embedded experience into a banner or a sticky 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 embedded is not rendering correctly on the website and would work better if attached to the parent element instead of being embedded on it, for example.
To do this, click to open the menu at the embedded 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.