Les In-App Messages dans Screeb

Guidez et informez vos utilisateurs directement au sein de votre produit grâce à des expériences in-app ciblées et en plusieurs étapes

Qu'est-ce qu'un In-App Message ?

Les In-App Messages vous permettent de guider et d'informer vos utilisateurs directement dans votre site web ou votre application mobile.
Un Message est composé d'une ou plusieurs Étapes (Steps). Chaque étape est un widget visuel affiché à vos utilisateurs, comme une modale, une bannière, une popover, un beacon, une sidebar, ou un bloc de contenu embarqué. En enchaînant les étapes, vous pouvez créer de simples annonces, du guidage contextuel, ou des parcours d'onboarding complets.
Dans la dernière version, les In-App Messages incluent :

• des options de personnalisation visuelle étendues
• le support Web et Mobile
• les Conditions d'étape (Step conditions), qui contrôlent quand chaque étape individuelle peut apparaître

Avant de commencer

Pour créer, éditer et publier un Message, vous devez disposer au minimum des permissions Éditeur sur le workspace.

Prérequis Web

Avant de construire un Message sur Web :

• le SDK Screeb doit être installé
• le SDK doit être initialisé sur les pages où le Message peut apparaître

Prérequis Mobile

Avant de construire un Message sur Mobile :

• la dernière version du SDK Mobile doit être installée
• la configuration et les permissions nécessaires doivent être ajoutées pour que l'application puisse streamer son écran pendant la construction du Message

Plateformes supportées

Vous pouvez construire et afficher des Messages sur :

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

Tous les formats de widgets sont disponibles sur mobile, à une exception près

Installer les dépendances pour les Messages sur Mobile

Si vous souhaitez afficher des messages sur mobile, vous devez ajouter une configuration supplémentaire à l'installation Screeb dans votre application.
Rendez-vous dans les paramètres de votre workspace, sous le choix Mobile souhaité, et lisez la section intitulée « Ajouter la configuration pour les In-App Messages »

Comment fonctionnent les Messages

Un Message démarre lorsque ses conditions de ciblage du Message sont réunies.
Une fois démarré, Screeb tente d'afficher la première étape. Chaque étape est ensuite affichée dans l'ordre, tant que cette étape est éligible à l'affichage.
Une étape peut apparaître immédiatement, ou attendre que ses propres conditions deviennent vraies. Par exemple :

• une modale centrée peut apparaître immédiatement
• une popover ou un beacon peuvent nécessiter qu'un élément spécifique existe d'abord
• une étape peut attendre une profondeur de scroll, un délai, une durée de session, une URL, ou des conditions d'écran

Si une étape n'est pas encore éligible, Screeb revérifie périodiquement. Il n'y a pas de délai d'expiration pour la validation d'une étape.
Si un utilisateur ferme le Message, le Message s'arrête complètement.
Si une étape ne devient jamais éligible, le Message restera bloqué sur cette étape jusqu'à ce que l'utilisateur quitte la page ou termine sa session.

Ciblage du Message vs. Conditions d'étape

Cette distinction est essentielle pour bien configurer la diffusion.

Ciblage du Message

Le ciblage du Message décide :

• qui peut entrer dans le Message
• où il peut démarrer
• quand il peut démarrer

Vous configurez cela après la construction du Message.

Conditions d'étape

Les conditions d'étape décident :

• quand une étape spécifique peut être affichée

Cela permet à chaque étape d'attendre le bon contexte avant d'apparaître

Elle sert uniquement à ouvrir un environnement de prévisualisation/construction.
Le vrai ciblage se configure ensuite, globalement au niveau du Message et individuellement au niveau de chaque Étape.

Créer un Message

1. Ouvrir la section Message

Rendez-vous dans la section Message de Screeb.
Depuis là, vous pouvez :

• créer un Message à partir de zéro
• partir d'un template

Les templates sont uniquement des points de départ pour le scénario du Message. Ils n'incluent pas le ciblage.

Légende : Ouvrez la section Message pour créer un nouveau Message à partir de zéro ou d'un template.

2. Choisir l'appareil cible

Choisissez où vous voulez construire et afficher le Message :

• Web
• iOS
• Android
• Flutter
• React Native

Légende : Sélectionnez la plateforme sur laquelle vous voulez construire votre Message.

3. Ouvrir l'environnement de construction sur Web

Entrez une URL ou un Écran où vous souhaitez construire le Message.
Après confirmation :

• Screeb ouvre la page
• si Screeb est correctement installé sur cette page, l'éditeur de Message apparaît

Légende : Entrez l'URL d'une page pour ouvrir le constructeur visuel Web.

Sur Mobile

Utilisez l'une des méthodes de connexion disponibles :

• scanner un QR code
• entrer une ligne de commande dans votre application en mode développement

Une fois connecté :

• l'écran du téléphone est streamé
• vous construisez depuis l'interface web tout en naviguant dans l'application mobile

Légende : Connectez votre application mobile au constructeur via un QR code ou une ligne de commande.

4. Construire votre Message

Dans l'éditeur, créez vos étapes et configurez leur format, contenu, style et comportement.

Légende : L'éditeur de Message affiché par-dessus le site ciblé par l'URL donnée.

5. Sauvegarder la construction

Quand vous terminez la construction et sauvegardez :

• le site ou la prévisualisation live se ferme
• vous revenez sur l'application Screeb
• vous pouvez alors sauvegarder le Message dans Screeb

6. Configurer le ciblage du Message

Après la phase de construction, configurez le ciblage au niveau du Message qui décide qui, où et quand le Message démarre.

7. Passer le Message en live

Un Message peut être soit :

• Live
• Arrêté

Légende : Sauvegardez votre Message, configurez le ciblage, et passez-le en Live.

Comprendre les étapes

Une étape est l'unité visuelle individuelle affichée à vos utilisateurs.
Chaque étape combine :

• un format de widget
• un contenu
• un style
• une condition d'étape optionnelle
• un CTA principal

Un Message suit toujours une séquence linéaire simple. Il n'y a pas de logique de branchement.

Formats de widgets disponibles

Bannière (Banner)

Une barre affichée en haut de la page.
Les options de bannière incluent :

• superposition au site
• poussée du contenu de la page vers le bas
• affichage pleine largeur ou ajusté au contenu

Modale (Modal)

Une boîte de dialogue affichée par-dessus ou au sein de la page.
Les options de modale incluent :

• placement centré
• placement en coin ou sur le côté
• fond flouté optionnel
• mode embarqué pour une intégration plus étroite avec le site
• support des images ou vidéos

Popover

Une bulle d'information contextuelle attachée à un élément de la page.
Le comportement de la popover inclut :

• ancrage à un élément sélectionné
• positionnement réactif lors du scroll de la page
• placement autour de l'élément, comme en haut, en bas, à gauche ou à droite

Beacon

Un petit point clignotant attaché à un élément pour attirer l'attention.

Sidebar

Un panneau affiché sur le côté gauche ou droit de l'écran.

Embarqué (Embedded)

Un bloc de contenu embarqué dans la page, similaire à une modale sans fond superposé.

Configurer le contenu d'une étape

Chaque étape peut inclure :

• un texte d'en-tête
• un logo
• un contenu principal
• un sous-titre
• un pied de page

Les options de mise en page du texte incluent :

• centré
• aligné à gauche
• aligné à droite
• justifié
• ajustements d'espacement vertical

Légende : Éditez le texte, le logo et la structure d'une étape.

Personnaliser le design

Vous pouvez ajouter une personnalisation visuelle étendue sur l'ensemble des widgets, notamment :

• les couleurs
• le rayon des bordures
• les marges internes
• les ombres
• la taille
• la police

Cela facilite l'alignement des Messages avec l'identité visuelle de votre produit.
Le design des In-App Messages peut être personnalisé soit :

• Globalement : depuis les paramètres du workspace
• Localement : depuis un Message spécifique, dans la section « Design & Ciblage »

Légende : Personnalisez le design visuel de votre Message pour qu'il corresponde à votre produit.

Attacher une étape à un élément

Certains formats, comme Popover et Beacon, doivent être attachés à un élément spécifique de la page.
Vous pouvez lier un élément de deux façons :

• avec le sélecteur d'élément
• en entrant le chemin CSS manuellement

Avec le sélecteur d'élément, la page s'assombrit et les éléments survolés sont surlignés pour faciliter la sélection.

Légende : Sélectionnez visuellement un élément de page pour une Popover ou un Beacon.

Comprendre le comportement d'un message

Un Message est une simple séquence d'étapes.
Le déroulement fonctionne ainsi :

1. le Message démarre quand le ciblage du Message est satisfait
2. Screeb vérifie si la première étape peut être affichée
3. votre utilisateur interagit avec l'étape
4. l'étape suivante apparaît si applicable
5. la séquence continue jusqu'à la fin ou la fermeture

Une étape peut être bloquée par :

• un élément requis manquant
• des conditions d'étape non remplies
• des conditions d'attente comme un délai, un scroll, ou une durée de session

Si votre utilisateur ferme une étape, le Message entier s'arrête. Aucune étape suivante n'est affichée.

Configurer une Condition d'étape

La condition d'étape contrôle quand une étape individuelle peut apparaître.
Les règles disponibles incluent :

URL

Conditions :

• égal
• différent
• contient
• ne contient pas
• correspond à une regex

Nom d'écran mobile

Conditions :

• égal
• différent
• contient
• ne contient pas

Délai

Affichage après une durée en secondes.

Durée de session

Affichage après un nombre donné de secondes dans la session.

Scroll

Affichage basé sur le pourcentage de la page scrollée, avec une logique supérieur ou inférieur à.

Élément DOM

Vérifie si un élément DOM CSS est présent ou absent sur la page.

Élément atteint

Vérifie si un élément DOM est à la fois présent et visible pour votre utilisateur.

Légende : Configurez quand une étape spécifique doit apparaître grâce aux règles de condition par étape.

Configurer les CTA

Une étape ne peut avoir qu'un seul CTA principal à la fois.
La seule exception est Passer (Skip), qui ne peut être ajouté que lorsqu'un autre CTA existe déjà.

Aller à l'étape suivante

Un bouton qui fait avancer la séquence.
Il peut aussi effectuer une action comme :

• rediriger
• simuler un clic sur un élément de la page
• déclencher un événement

Choix (Choices)

Un CTA de feedback avec plusieurs options.
Quand votre utilisateur sélectionne un choix :

• l'étape actuelle se ferme
• l'étape suivante s'ouvre, si elle existe

Ouvrir une URL

Un bouton de type lien hypertexte qui ouvre un nouvel onglet.

Réaction

Un CTA de feedback léger.
Exemples :

• pouce levé / pouce baissé
• options de réaction supplémentaires
• notation simple de type x / N

Passer (Skip)

Permet à votre utilisateur de contourner le CTA principal et de continuer vers l'étape suivante.
Utile lorsque le CTA principal demande un feedback ou une action de lien qui doit rester optionnelle.

Suggestions IA

Un CTA sous feature flag, non disponible publiquement pour le moment.
Son objectif est de suggérer une saisie IA pour un chatbot en mettant le focus sur la zone de texte du chatbot, en préparant la saisie, et en effectuant automatiquement la première action.

Légende : Choisissez un type de CTA et configurez comment votre étape doit réagir aux actions de l'utilisateur.

Collecter du feedback

Les In-App Messages servent principalement à guider et informer vos utilisateurs, mais ils peuvent aussi collecter du feedback léger.
Par exemple :

• Choix peut recueillir du feedback structuré
• Réaction peut capturer un sentiment rapide
• Notation peut collecter du feedback basé sur un score

Cela rend les In-App Messages adaptés à la fois à l'onboarding et à des demandes de feedback simples.

Mesurer la performance

Vous pouvez suivre la performance d'un Message via la vue analytics.
Les analytics disponibles incluent :

Affichages totaux

Voir combien de fois le Message a été affiché.

Engagement total

Voir combien d'interactions le Message a générées.

Taux d'engagement

Voir le taux d'engagement associé, basé sur les affichages et l'engagement.

Détail du Message (Message Breakdown)

Voir les étapes représentées sous forme d'arbre, avec le pourcentage d'abandon pour chaque étape. Cela vous aide à identifier où les utilisateurs quittent le parcours.

Affichages réels

Voir qui a vu le Message, et quand.

Feedbacks

Si votre Message inclut des CTA de feedback, vous pouvez consulter :

• le score médian
• le choix le plus voté

Légende : Analysez les affichages, l'engagement, l'abandon par étape, les affichages réels, et le feedback collecté.

Idée reçue courante

La page URL que vous entrez pendant la construction sert uniquement à :

• ouvrir le bon contexte de prévisualisation
• faciliter le design et la configuration

Elle ne contrôle pas la diffusion en production.
La véritable logique de diffusion se configure ensuite via :

• le ciblage du Message pour les conditions de démarrage globales
• la condition d'étape pour les conditions d'affichage de chaque étape

C'est l'un des points les plus importants à comprendre pour bien configurer les In-App Messages.

Astuces

Avertissements

Résumé

Les In-App Messages vous permettent de créer des expériences guidées, en plusieurs étapes, pour vos utilisateurs sur Web, iOS, Android, Flutter et React Native. Un Message est construit comme une séquence linéaire d'étapes, chacune utilisant un widget visuel comme une modale, une bannière, une popover, un beacon, une sidebar, ou un bloc embarqué.
La dernière version étend la personnalisation du design et introduit la condition d'étape, permettant à chaque étape d'attendre son propre contexte avant d'apparaître. Cela rend les Messages plus flexibles pour l'onboarding, le guidage contextuel, les annonces, et la collecte de feedback léger.

Mis à jour le : 09/07/2026