Screens are the pages of your experience where each screen represents a moment where you engage customers—whether through questions, product recommendations, lead forms, or other interactive content.

Each experience contains one or more screens, and each screen can be customized with layout types, elements, and style settings to match your brand and campaign goals.

Before you begin

Configure and save your style guide. When you create an experience, and select screens to add, you'll apply your branded style guide. This creates an easier starting point. All screens can be edited later as needed.

Screen layouts and elements

Each screen is made up of:

A layout: Defines the structure of your screen (e.g., vertical, horizontal, split-screen).
Containers: An optional method for grouping elements together.
Elements: These are the content blocks you add to your screen, like images, buttons, text, and form fields.

Layouts

Each screen has a primary and secondary background, depending on which layout you have selected.

Fullscreen: Only has a primary background, so you have one background image with other elements on top.
Split screens (top and bottom): Have a primary background and a secondary background, so you have two background configured separately with elements in the primary section.
Modal: Creates an opaque centered overlay where your elements display with space around the border to display a background image.

Containers

Containers are an optional way to group elements and apply rules to multiple elements at once. For example, if you have a container with two buttons in it, you can easily change the number of columns and spacing for all buttons at once.

Note: Screens from the screen library use containers to group elements. Check if your screen has a container before adding additional elements

Elements

Elements are the building blocks of a screen, and where they sit in a layout is determined by either:

Structured layouts (Auto-positioning): Elements snap into predefined zones. This helps ensure a consistent, responsive layout across devices.
Free form positioning: Gives you full control to place elements anywhere on the screen, regardless of layout boundaries.

Style elements independently

You can style elements independently to create a different viewing experience on mobile vs. desktop. By default, each element is linked across devices, meaning any design changes apply to both views (green device icon).

Style elements independently

Click the element.
Select the Unlink mobile/desktop icon. It turns orange.
Now adjust styling (e.g., font size, spacing) for one device without affecting the other.

Revert changes and relink

After editing, a revert icon appears.
Click it to copy styling from the other device and undo the independent styling.
1. Only design changes are affected—content and number of buttons remain consistent across views.

Tip: Turning style independently off later won’t erase your previous styling. It simply re-syncs future changes between desktop and mobile.

Add, duplicate, and delete screens

There are multiple ways to add a screen to an experience, meaning you can do what's best for your workflow.

Add screens from the Editor

The Editor is where you configure styling, copy, and personalization. It's typical to add new screens from here as you're building an experience.

Open an experience and go to the Editor page.
Hover over the + Add Screen and click it.
Expand the drop-down and select as many screens as you want to add.
Click Add.

Tip: Click and drag screens in the preview window to reorder them.

Add screens from the Builder Map

The Builder Map is where you configure user flow. Sometimes in that process you determine you want to add additional screens. You can return to the editor, or:

Select the branch you want to redirect
Click Add screen.
Expand the drop-down and select a screen
Click Add.
The screen(s) are inserted into the experience flow based on the branch you selected.

Duplicate an existing screen

Duplicating screens creates is efficient if you want to style all screens similarly and then just change the copy for each one. To duplicate from the editor:

Open an experience and go to the Editor page.
Hover over the screen in the screen selector and click the three dot menu.
Click Duplicate screen.
The screen will duplicate with (copy) at the end of the name.

Delete a screen

Deleting a screen removes it from your experience. To delete:

Open an experience and go to the Editor page.
Hover over the screen in the screen selector and click the three dot menu.
Scroll down and select Remove Screen.

Note: If you delete a screen after you configure branching, the branching will be impacted. Check the Builder Map to confirm the user flow looks as expected after removing screens.

Rename each screen

All screens have default names from the screen library. We recommend that you rename each screen in an experience while working in the Editor. This ensures:

Easier navigation in the Builder Map (especially if you have a large number of screens.)
Easier navigation of analytics and experience insights.

To rename a screen:

Open an experience and go to the Editor page.
Hover over the screen in the screen selector and click the three dot menu.
Click Rename.
Enter a name.
Click Save.

Save a screen to the screen library

While the screen library is comprised of pre-configured templates, you can save customized screens to the library for future use in other experiences.

In the experience go to the Builder Map.
Hover over the screen you want to save and click the three dot menu.
Select Save to Library.
Select the category you want the screen to live under.
1. If you do not select a category, it will live under "Uncategorized"
Enter a name for the screen.
Click Done.

Basic element types and usage

General elements

Text: Non-interactive text that adds context or instructions to the screen.
Image/Video: Static photos, GIFs, or videos to support your message.
Button: Styled according to your experience’s Style Guide. You can set buttons as primary or secondary, each with customizable designs.
Image Button: Allows users to click or tap on an image to respond. These can also include text.
Container: Groups other elements, such as buttons, images, and form inputs into a unified block with shared styling and spacing.
Restart Button: Restarts the experience from the beginning. This is especially useful for embedded experiences (e.g., within an iframe) where the user shouldn't have to reload the page.

Response types

Select All That Apply: Lets users choose more than one option from a list.
Dropdown: A list-based input where users select one option.
Question Matrix: Displays multiple questions and answer options in a table format.
Checkbox: Used for opt-ins or multiple-answer questions.
Slider: Captures user input on a continuous or discrete scale.
Form Input: Lets users type open-ended responses in a single field.
Mood Board: Visually engaging tool that allows users to select from a range of styled image choices.
Spinners: Adds a game-like interaction for randomized responses or fun reveals.
Screen Timer: Automatically advances or changes the screen after a set amount of time, ideal for creating urgency or timed flows.

Outcome elements

These are dynamic elements, used to personalize what the user sees based on outcome logic.

Heading: Displays the name of the matched outcome.
Description: Text to explain or describe the outcome.
Image: Visual representation of a specific result.
Products: Show product recommendations tied to a specific outcome.

Sharing and login elements

Social Share: Adds social media sharing buttons to let users post the experience.
Facebook Login: Authenticate users through their Facebook account.
Google Login: Authenticate users through their Google account.

Form-specific elements

When using a form container, you can add more specialized fields:

Create Your Own: Define custom text input fields tailored to your campaign.
Text Within Form: Place helper or instructional text directly inside the form.
Long/Short Open Response: Adjust text field size depending on the length of the expected user response.

Tip: To require a form field, double-click the input and enable the “Required” setting in the left-hand menu. To make it optional, simply uncheck it.

Editing elements using the sidebar menu

Up/Down Arrows: Move the element vertically within its container or screen layout.
Trash Icon: Delete the selected element by clicking the blue trash can icon.
Free-form Positioning: Enable flexible placement by selecting a container, clicking the three-dot dropdown menu, and turning on "Free Positioning." This allows you to anchor elements a specific number of pixels from screen edges for precision across devices.

Next steps

Modify the elements of each screen in your experience.

FAQ

Can I mix structured and free-form layouts in one experience?

Yes. Each screen can use a different layout and positioning mode.

How many screens can I add to an experience?

There is no limit. However, we tend to recommend between 4-7, depending on the goal of your experience.

Can I add a screen from one experience to another experience?

Yes. Save the screen to your screen library and add it to the next experience.

Drop-offs are reducing my completion rate?

Consider shortening the length of the experience (we recommend four to six screens), adjust the copy on either the lead screen or intro to show the user the value exchange offered in the experience. If users are dropping off due to a Lead Capture screen, add a “Skip” button to allow users to complete without inputting data.