> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.screeb.app/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Introduction aux In-App Messages # 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 ||| **Attention :** Si le SDK est manquant ou mal initialisé, l'éditeur de message ne s'attachera pas correctement à la page ou à l'écran utilisé pour la construction. ## 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 ||| **Important :** **Beacon** et **Popover** ne sont pas disponibles sur **Flutter** et **React Native**. ## 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** » ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1xmo9qh.png) ## 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 ||| **Important :** L'URL utilisée pendant la phase de construction n'est **pas** utilisée pour le ciblage. 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. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_myl77t.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1u9lj2k.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_wexmeu.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1xc5mbk.png) *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. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1e3ro3k.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_h65v0m.png) ### 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é** ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_qxo5p1.png) *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 ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1l6b5pp.png) *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** » ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1q2yqiy.png) *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. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1u6ftd8.png) *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. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_wp9tpx.png) *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. || **Remarque :** Les Suggestions IA sont sous feature flag et ne sont pas disponibles publiquement. ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1tit2uj.png) *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é ![](https://storage.crisp.chat/users/helpdesk/website/-/1/c/7/c/1c7c00efcec1120/image_1eeqzzs.png) *Légende : Analysez les affichages, l'engagement, l'abandon par étape, les affichages réels, et le feedback collecté.* ## Idée reçue courante | **L'URL utilisée pendant la construction n'est pas le ciblage.** 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 | **Astuce :** Utilisez le ciblage du Message pour décider qui entre dans le parcours, puis utilisez les conditions d'étape pour que chaque étape apparaisse au bon moment. | **Astuce :** Pour les widgets ancrés comme les Popovers et Beacons, assurez-vous que l'élément ciblé est stable et bien présent pour vos utilisateurs. | **Astuce :** Consultez les analytics de détail par étape pour trouver le point d'abandon le plus élevé, puis simplifiez ou repositionnez cette étape. | **Astuce :** Utilisez les templates comme points de départ, puis configurez votre propre ciblage ensuite. ## Avertissements ||| **Avertissement :** Si une étape ancrée dépend d'un élément qui n'apparaît jamais, le Message peut rester bloqué sur cette étape pour le reste de la session. ||| **Avertissement :** Si votre utilisateur ferme un Message, toute la séquence s'arrête. ||| **Avertissement :** L'URL de construction sert uniquement à la prévisualisation et à la configuration. Elle n'est pas utilisée pour le ciblage. ||| **Avertissement :** Les pages de construction Web nécessitent que le SDK Screeb soit installé et initialisé. ||| **Avertissement :** La construction Mobile nécessite la dernière version du SDK mobile et la configuration de streaming d'écran nécessaire. ## 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.