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 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.

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.

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.

Last updated