View
Views act like pages for your widgets.
- Each widget must have at least one view.
- Widgets always have an initial view, which is the view that is displayed when the widget first appears.
View Types
Overlay View
Overlay views float on top of other content on a website. They can be positioned in the center of the screen or along the edge of the page.
Overlay views can have an optional backdrop, which sits behind the view covering the entire page. This can be be used to dim or lighten the page so that the view is visually focused.
Embedded View
An embedded view is inserted into a specific section of a page. The view will take up space on the page and affect the flow and layout of other elements.
Embed Selector
The insertion point for the view is specified as a CSS Selector.
For example, the selector #banner_container could be used to target the section in the following HTML document:
<!doctype html>
<html>
<head>
...
</head>
<body>
...
<div id="banner_container">...</div>
...
</body>
</html>Embed Selector Precedence
INFO
Embedding works in a similar way to the browser function document.querySelector.
There may be situations where you want to have multiple selectors. For example you have a widget that is shown on both a desktop and mobile site which has different HTML.
Example embed selector: #desktop-wrapper, .mobile-embed.
This would find the either #desktop-wrapper or .mobile-embed, depending on which appears first in the document. If only one of them appears then this is also valid and it is where your embed will appear.
WARNING
It is advised to test your embed on both desktop and mobile using something like Chrome's Device Mode.
Embed Mode
Embedded views are either prepended or appended to the part of the page they target. This inserts the view before or after any other content that already exists in the section.
Embed Wrapper Height
Embedded views are created inside a "wrapper" element, before inserted into the page. By default this wrapper element automatically assumes the height of the view itself, but a specific height may be specified.
For example, this would allow to embed and vertically center a view into a part of the page by making the wrapper height taller than the view.
Z-Index
The z-index property allows you override the stacking position of the view with respect to other content on the page.
INFO
For some websites it may be necessary to specify a large value for z-index to ensure that the view appears above other content on the page.
Transitions
Views can be configured to transition onto the screen when displayed.
INFO
Transitions are skipped when one view switches to another using the Switch to View action. This is done to allow the common use case where a widget will have multiple views that act as subsequent screens, such as in the Offer Flyout widget template.