Sheet Variants

New in 2.4.0.

The sheet a placement presents can be a variant Encore serves for your app (the served variant), so Encore can change the sheet or test variants against each other without a release of your site. When Encore serves no variant, or the served one can’t run on the web, the SDK draws its built-in sheet instead.

When to use this

An appearance option has no visible effect on the sheet.
You need to know when the sheet turns dark, or how it fits a phone and a desktop.
Your headline or subheadline doesn’t appear, or the sheet isn’t the one you expected.

For the claim result and when it arrives, see The Claim Flow.

Which sheet draws

What Encore serves for the use case	What draws
A variant that runs on the web	That variant
A reward variant Encore maps to one of the SDK’s own reward screens	That screen, a built-in sheet
A variant this SDK can’t read, or one that needs an in-app purchase or a lead form	The built-in sheet for the use case
No variant	The built-in sheet for the use case

The built-in sheet for each useCase:

`useCase`	Built-in sheet
`'reduceChurn'` (default)	The offer carousel: a save attempt at a moment the user is leaving.
`'rewardUsers'`	Its own headline chrome around a paged carousel, for a moment the user just accomplished something. Claim-only, with no purchase ask anywhere in it.

Your appearance options

A served variant brings its own layout and colors, and reads four of your appearance options. Three of them apply wherever the variant uses the matching theme color, and a color the variant fixes for itself stays as designed.

const result = await Encore.placement('cancel_flow', {
  appearance: {
    accentColor: '#6743F5',
    backgroundColor: '#101014',
  },
}).show();

The full appearance contract: Advanced UI.

Option	What it moves on a served variant
`accentColor`	The variant’s accent color.
`backgroundColor`	The variant’s canvas. A `#`-prefixed 3- or 6-digit hex value (such as `#101014`) also re-derives the surfaces, borders, and text from it.
`textColor`	The variant’s text.
`modalBackgroundColor`	The sheet’s frame, behind the variant, in place of the variant’s own frame color.

The reward sheet overrides in appearance (the slot fields and the dot colors) and the statusIcon option style the built-in sheets only, never a served variant.

Your copy options

The headline and subheadline options on placement() apply to the built-in sheets, and to a served variant wherever it shows your headline. A variant with fixed copy keeps it.

Dark mode

A served variant renders in light, dark, or automatic appearance, following the appearance mode Encore sets for your app. To change it for a web app, contact Encore.

Appearance mode	The sheet
Light	Light on every page.
Dark	Dark on every page.
Automatic (the default)	Dark only when your page declares dark support and the device prefers dark.

The SDK picks light or dark when the sheet opens, and an open sheet keeps it. A hex backgroundColor sets the palette in either mode. A page declares dark support with a color-scheme that includes dark, set in a meta tag or in CSS on the root or body element:

<meta name="color-scheme" content="light dark">

A page that declares none keeps the light sheet, so a light-only site never shows a dark one by surprise. The built-in sheets stay light.

Screen size

Narrower than 768px: a full-screen variant fills the screen. A variant made for part of the screen opens as a bottom sheet. The user can drag it between its heights, or down to close it, the same as the close button.
768px wide or wider: a full-screen variant draws in a square of up to 720px, smaller in a short or narrow window, on a backdrop in the variant’s canvas color, not a dimmed page. A variant made for part of the screen keeps the square’s width and takes the height of its content, and keeps the square when its content doesn’t fit.

placement(): the options a presentation takes.
Advanced UI: the full appearance contract.
The Claim Flow: what happens when the user claims.

iOS

Android

Web

Bridges

Sheet Variants

When to use this

Which sheet draws

Your appearance options

Your copy options

Dark mode

Screen size

​When to use this

​Which sheet draws

​Your appearance options

​Your copy options

​Dark mode

​Screen size

​Related

When to use this

Which sheet draws

Your appearance options

Your copy options

Dark mode

Screen size

Related