In-App Messages in Screeb

Guide and inform your users directly inside your product with targeted, multi-step in-app experience

What are In-App Messages?

In-App Messages let you guide and inform your users directly inside your website or mobile app.
A Message is made of one or more Steps. Each step is a visual widget shown to your users, such as a modal, banner, popover, beacon, sidebar, or embedded content block. By chaining steps together, you can create simple announcements, contextual guidance, or full onboarding flows.
In the latest version, In-App Messages include:

• expanded visual customization options
• support for Web and Mobile
• Step conditions, which controls when each individual step can appear

Before you begin

To create, edit, and publish a Message, you must have at least Editor permissions in the workspace.

Web prerequisites

Before building a Message on Web:

• the Screeb SDK must be installed
• the SDK must be initialized on the pages where the Message may appear

Mobile prerequisites

Before building a Message on Mobile:

• the latest Mobile SDK version must be installed
• the required setup and permissions must be added so the app can stream its screen while you build the Message

Supported platforms

You can build and display Messages on:

• Web
• iOS Native
• Android Native
• Flutter
• React Native

All widget formats are available on mobile, with one exception

Installing dependencies for Message on Mobile

If you want to display message on mobile, you need to add an additional configuration to the Screeb installation in your app.
Head over to your workspace settings, under your desired Mobile choice, and read the section called "Add configuration for In-App Messages"

How Messages work

A Message starts when its Message targeting conditions are met.
Once started, Screeb tries to display the first step. Each step is then shown in order, as long as that step is eligible to appear.
A step may appear immediately, or it may wait for its own conditions to become true. For example:

• a centered modal may appear immediately
• a popover or beacon may need a specific element to exist first
• a step may wait for scroll depth, delay, session duration, URL, or screen conditions

If a step is not yet eligible, Screeb keeps rechecking periodically. There is no expiration timer for step validation.
If one of your users closes the Message, the Message stops completely.
If a step never becomes eligible, the Message will remain blocked on that step until the user leaves the page or ends the session.

Message targeting vs. Step Conditions

This distinction is essential when setting up delivery correctly.

Message targeting

Message targeting decides:

• who can enter the Message
• where it can start
• when it can start

You configure this after building the Message.

Step conditions

Step conditions decides:

• when a specific step can be displayed

This lets each step wait for the right context before appearing

It is only used to open a preview/build environment.
Real targeting is configured later, globally at the Message level and individually at the Step level.

Create a Message

1. Open the Message section

Go to the Message section in Screeb.
From there, you can:

• create a Message from scratch
• start from a template

Templates are only starting points for the Message scenario. They do not include targeting.

Caption: Open the Message section to create a new Message from scratch or start from a template.

2. Choose the target device

Choose where you want to build and display the Message:

• Web
• iOS
• Android
• Flutter
• React Native

Caption: Select the platform where you want to build your Message.*

3. Open the build environment On Web

Enter a URL or a Screen where you want to build the Message.
After confirmation:

• Screeb opens the page
• if Screeb is correctly installed on that page, the Message Editor appears

Caption: Enter a page URL to open the visual Web builder.*

On Mobile

Use one of the available connection methods:

• scan a QR code
• enter a command line in your app while in development mode

Once connected:

• the phone screen is streamed
• you build from the web interface while navigating in the mobile app

Caption: Connect your mobile app to the builder using a QR code or command line.

4. Build your Message

In the editor, create your steps and configure their format, content, style, and behavior.

Caption: The Message editor displayed over the website target by the given url.*

5. Save the build

When you finish building and save:

• the website or live preview closes
• you return to the Screeb app
• you can then save the Message in Screeb

6. Configure Message targeting

After the build phase, configure the Message-level targeting that decides who, where, and when the Message starts.

7. Set the Message live

A Message can be either:

• Live
• Stopped

Caption: Save your Message, configure targeting, and set it Live.

Understand steps

A step is the individual visual unit displayed to your users.
Each step combines:

• a widget format
• content
• style
• optional step condition
• one main CTA configuration

A Message always follows a simple linear sequence. There is no branching logic.

Available widget formats

Banner

A bar displayed at the top of the page.
Banner options include:

• overlaying the site
• pushing page content down
• full width or fit-content display

Modal

A dialog displayed over or within the page.
Modal options include:

• centered placement
• corner or side placement
• optional blurred background
• embedded mode for tighter integration with the site
• support for images or video

Popover

A contextual info bubble attached to a page element.
Popover behavior includes:

• anchoring to a selected element
• responsive positioning as the page scrolls
• placement around the element, such as top, bottom, left, or right

Beacon

A small blinking point attached to an element to attract attention.

Sidebar

A panel displayed on the left or right side of the screen.

Embedded

A content block embedded into the page, similar to a modal without a background layer.

Configure step content

Each step can include:

• header text
• logo
• body content
• subtitle
• footer

Text layout options include:

• centered
• left-aligned
• right-aligned
• justified
• vertical spacing adjustments

Caption: Edit the text, logo, and structure of a step.*

Customize the design

you can add broad visual customization across widgets, including:

• colors
• border radius
• padding
• shadows
• size
• font

This makes it easier to align Messages with your product’s visual identity.
In App Messages Design can be customised either:

• Globally: from the workspace Settings
• Locally: from a specific Message in the section "Design & Targeting"

Caption: Customize the visual design of your Message to match your product.*

Bind a step to an element

Some formats, such as Popover and Beacon, must be attached to a specific element on the page.
You can bind an element in two ways:

• with the element picker
• by entering the CSS path manually

When using the element picker, the page is dimmed and hovered elements are highlighted to make selection easier.

Caption: Select a page element visually for a Popover or Beacon.*

Understand message behavior

A Message is a simple sequence of steps.
The flow works like this:

1. the Message starts when Message targeting is satisfied
2. Screeb checks whether the first step can be displayed
3. your user interacts with the step
4. the next step appears when applicable
5. the sequence continues until completion or closure

A step can be blocked by:

• a missing required element
• unmet step conditions
• waiting conditions such as delay, scroll, or session duration

If your user closes a step, the entire Message stops. No later step is shown.

Configure Step condition

Step condition controls when an individual step can appear.
Available rules include:

URL

Conditions:

• equal
• not equal
• contains
• not contains
• matches regex

Mobile screen name

Conditions:

• equal
• not equal
• contains
• not contains

Delay

Display after a duration in seconds.

Session duration

Display after a given number of seconds in the session.

Scroll

Display based on the percentage of the page scrolled, with greater-than or less-than logic.

DOM element

Check whether a CSS DOM element is present or absent on the page.

Reached an element

Check whether a DOM element is both present and visible to your user.

Caption: Configure when a specific step should appear using per-step condition rules.*

Configure CTAs

A step can have only one main CTA at a time.
The only exception is Skip, which can be added only when another CTA already exists.

Go to Next Step

A button that advances the sequence.
It can also perform an action such as:

• redirecting
• simulating a click on a page element
• triggering an event

Choices

A feedback CTA with multiple options.
When your user selects a choice:

• the current step closes
• the next step opens, if one exists

Open a URL

A hyperlink-style button that opens a new tab.

Reaction

A lightweight feedback CTA.
Examples include:

• thumbs up / thumbs down
• additional reaction options
• basic scoring from x / N

Skip

Lets your user bypass the current CTA and continue to the next step.
This is useful when the main CTA requests feedback or a link action that should remain optional.

AI Suggestions

A feature-flagged CTA that is not publicly available at this time.
Its purpose is to suggest AI input for a chatbot by focusing the chatbot text area, preparing the input, and performing the first action automatically.

Caption: Choose a CTA type and configure how your step should react to user actions.*

Collect feedback

In-App Messages are mainly used to guide and inform your users, but they can also collect lightweight feedback.
For example:

• Choices can gather structured feedback
• Reaction can capture quick sentiment
• Scoring can collect score-based feedback

This makes In-App Messages suitable for both onboarding and simple feedback prompts.

Measure performance

You can monitor Message performance through the analytics view.
Available analytics include:

Total Display

See how many times the Message was displayed.

Total Engagement

See how many interactions the Message generated.

Engagement Rate

See the associated engagement rate based on display and engagement.

Message Breakdown

See the steps represented in a tree, along with the dropout percentage for each step. This helps you identify where users leave the flow.

Actual Display

See who saw the Message, and when.

Feedbacks

If your Message includes feedback CTAs, you can review:

• median score
• most voted choice

Caption: Analyze displays, engagement, step drop-off, actual displays, and collected feedback.*

Common misconception

The page URL you enter during build is only there to:

• open the right preview context
• make design and setup easier

It does not control production delivery.
Real delivery logic is configured afterward through:

• Message targeting for the overall start conditions
• Step condition for individual step display conditions

This is one of the most important things to understand when setting up In-App Messages correctly.

Tips

Warnings

Summary

In-App Messages let you create guided, multi-step experiences for your users across Web, iOS, Android, Flutter, and React Native. A Message is built as a linear sequence of steps, each using a visual widget such as a modal, banner, popover, beacon, sidebar, or embedded block.
The latest version expands design customization and introduces Step condition, allowing each step to wait for its own context before appearing. This makes Messages more flexible for onboarding, contextual guidance, announcements, and lightweight feedback collection.

Updated on: 01/07/2026