Fanplayr Docs

English

日本語
Español
Italiano

English

日本語
Español
Italiano

Appearance

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.

Common Settings ​

View Type ​

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:

html
<!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 ​

Determines where the view is embedded in relation to the embed container. Options include:

  • Prepend Inside - Inserts the view inside the embed container before any other content.
  • Append Inside - Inserts the view inside the embed container after any other content.
  • Insert Before - Inserts the view outside the embed container before it.
  • Insert After - Inserts the view after the embed container before it.

Embed Timing ​

The Embed Timing setting controls how a View component inserts itself into its embed container on the page.

  • Immediate (default) - Inserts the View into the embed container as soon as the widget runs. Use this when the embed container is guaranteed to already exist on the page at load time.

  • Wait for Element - Waits for the embed container element to exist in the DOM, then inserts the View once it appears. Use this when the embed container is added dynamically — e.g. by another script, a CMS, or client-side routing.

When Multiple Elements Match ​

For embedded views, this determines which element to use as the embed target when multiple elements are matched by the embed selector.

  • Use First Match - Uses the first element matched by the selected.
  • Use Last Match - Uses the last element matched by the selected.

Embed Sizing ​

  • Fixed Height (default) - The view is rendered at the exact height it is defined.

  • Ratio - For views using a fixed-size width and height, this option maintains the ratio of the initially defined width/height and scales (shrinks or enlarges) the view to fill the embed container at this display ratio.

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.

Copyright © 2011-present Fanplayr Inc