Comment utiliser les Actions Contextuelles dans les Messages Screeb

Les Actions Contextuelles vous permettent de rendre vos in-app messages plus interactifs.
Plutôt que de simplement afficher de l'information, vous pouvez utiliser un message pour guider les utilisateurs dans votre produit, les déplacer au bon endroit, mettre en avant un élément, attendre que l'interface se charge, déclencher des événements Screeb, ou interagir avec d'autres outils sur votre site.
Elles sont particulièrement utiles pour les parcours d'onboarding, la découverte de fonctionnalités, les product tours, les parcours d'activation, et les expériences de support contextuel.

Que sont les Actions Contextuelles ?

Les Actions Contextuelles sont des actions déclenchées depuis un message Screeb.
Elles vous aident à contrôler ce qui se passe quand un utilisateur interagit avec un message, par exemple quand il clique sur un bouton, continue une étape, ou suit un parcours guidé.
Avec les Actions Contextuelles, vous pouvez :

• Déplacer l'utilisateur dans la page
• Mettre en avant ou modifier un élément
• Attendre qu'un élément soit disponible
• Déclencher des campagnes, événements, ou propriétés Screeb
• Copier du texte dans le presse-papier
• Envoyer des événements personnalisés vers votre propre produit ou des outils tiers

Cela facilite la création de messages qui font plus qu'informer les utilisateurs : ils les guident activement vers la bonne action.

Quand utiliser les Actions Contextuelles ?

Utilisez les Actions Contextuelles quand votre message doit interagir avec l'interface utilisateur ou déclencher quelque chose au-delà du message lui-même.
Par exemple, vous pouvez les utiliser pour :

• Guider un nouvel utilisateur vers une fonctionnalité importante
• Mettre en avant un bouton pendant l'onboarding
• Tracker les clics sur un call-to-action
• Démarrer un survey de suivi après une première réponse
• Mettre à jour une propriété utilisateur une fois un product tour terminé
• Ouvrir votre propre widget de support depuis un message Screeb
• Copier automatiquement un code de parrainage ou un code promo

Avant de commencer

Avant d'utiliser les Actions Contextuelles, assurez-vous que :

• Le tag Screeb est installé sur la page où le message sera affiché
• Le message est créé et modifiable depuis le builder Screeb
• La page ou l'élément que vous voulez cibler est accessible à Screeb
• Si vous ciblez un élément spécifique, le sélecteur est assez stable pour être réutilisé
• Si vous voulez démarrer une autre campagne Screeb, cette campagne existe déjà

Pour les product tours et les popovers, nous recommandons de demander à votre équipe technique d'ajouter des ID CSS clairs et stables aux éléments que vous voulez cibler. Cela rend l'expérience plus fiable, en particulier sur les apps web modernes où les noms de classes générés peuvent changer au fil du temps.

Déplacer l'utilisateur dans la page

Certaines Actions Contextuelles aident les utilisateurs à atteindre le bon endroit sans avoir à chercher par eux-mêmes.

Scroll to position

Utilisez Scroll to position pour scroller automatiquement la page vers une zone spécifique.
Utile quand l'élément que vous voulez montrer est plus bas dans la page ou en dehors de la zone visible actuelle.
Exemple : dans une visite guidée, vous pouvez scroller directement l'utilisateur jusqu'au bouton "Export" plutôt que de lui demander de le trouver manuellement.
Cas d'usage recommandés :

• Product tours
• Découverte de fonctionnalités
• Pages longues avec plusieurs sections
• Parcours d'onboarding où l'action suivante n'est pas visible immédiatement

Reload page

Utilisez Reload page pour rafraîchir la page actuelle.
Utile après qu'un utilisateur active une option ou change un réglage depuis un message, et que l'interface doit se recharger avant que le changement devienne visible.
Exemple : après avoir activé une nouvelle fonctionnalité depuis un in-app message, rechargez la page pour que l'interface mise à jour apparaisse immédiatement.
Cas d'usage recommandés :

• Activation de fonctionnalité
• Mises à jour de réglages
• Interfaces nécessitant un rafraîchissement pour afficher les changements
• Parcours techniques où l'état de la page doit être mis à jour

Go back

Utilisez Go back pour renvoyer l'utilisateur à la page précédente dans l'historique de son navigateur.
Exemple : ajoutez un bouton comme "Annuler et revenir" dans un parcours guidé.
Cas d'usage recommandés :

• Parcours d'annulation
• Navigation guidée
• Onboarding multi-pages
• Messages d'aide où l'utilisateur pourrait vouloir revenir à l'écran précédent

Mettre en avant ou modifier un élément

Certaines Actions Contextuelles vous aident à attirer l'attention sur un élément ou à changer son comportement visuel.

Highlight element

Utilisez Highlight element pour mettre visuellement en avant un élément spécifique de la page.
Cela aide les utilisateurs à comprendre immédiatement où regarder ou cliquer.
Exemple : pendant l'onboarding, vous pouvez mettre en avant le bouton "Créer un projet" pour que l'utilisateur sache exactement quoi faire ensuite.
Cas d'usage recommandés :

• Annonces de nouvelles fonctionnalités
• Product tours
• Checklists d'onboarding
• Campagnes d'adoption de fonctionnalité
• Guidage support dans le produit

Set element attribute

Utilisez Set element attribute pour ajouter ou mettre à jour un attribut sur un élément de page.
Cela peut être utilisé pour modifier visuellement ou fonctionnellement un élément, selon la façon dont votre application gère cet attribut.
Exemple : vous pouvez désactiver un bouton jusqu'à ce qu'une condition soit remplie, marquer un champ comme requis, ou changer l'état d'un élément durant une expérience guidée.
Cas d'usage recommandés :

• Formulaires guidés
• Onboarding progressif
• Parcours d'activation étape par étape
• Expériences produit nécessitant des conditions spécifiques avant de continuer

Cette action peut nécessiter une coordination avec votre équipe technique, en particulier si votre application doit réagir à un attribut spécifique.

Attendre le bon moment

Les applications web modernes chargent souvent le contenu de façon asynchrone. Cela signifie qu'un élément peut ne pas être disponible immédiatement à l'apparition de la page.

Wait for element

Utilisez Wait for element pour attendre qu'un élément spécifique apparaisse avant de continuer la séquence d'actions.
Cela empêche Screeb d'essayer de pointer vers, mettre en avant, ou interagir avec un élément qui n'est pas encore chargé.
Exemple : dans une app où le dashboard se charge après quelques secondes, vous pouvez attendre que le bouton "Créer un rapport" apparaisse avant de le mettre en avant.
Cas d'usage recommandés :

• Applications monopage (SPA)
• Dashboards à chargement différé
• Contenu dynamique
• Product tours dépendant d'éléments chargés après une navigation
• Pages où les données apparaissent après un appel API

Cette action est particulièrement utile combinée avec des actions comme Highlight element, Scroll to position, ou des actions placées après une étape de navigation.

Déclencher des actions Screeb depuis un message

Certaines Actions Contextuelles vous permettent de contrôler Screeb directement depuis le message.

Start a campaign

Utilisez Start a campaign pour lancer une autre campagne Screeb depuis le message actuel.
Utile quand vous voulez créer une expérience de suivi basée sur la première interaction de l'utilisateur.
Exemple : après une première question de satisfaction, vous pouvez démarrer automatiquement un survey de suivi plus détaillé pour les utilisateurs ayant donné une réponse négative.
Cas d'usage recommandés :

• Parcours de feedback en plusieurs étapes
• Suivis de satisfaction
• Séquences d'onboarding
• Product tours conditionnels
• Parcours de découverte progressive

Track an event

Utilisez Track an event pour envoyer un événement Screeb quand l'utilisateur interagit avec le message.
Cela vous permet de mesurer comment les utilisateurs s'engagent avec un CTA ou une expérience guidée spécifique.
Exemple : trackez combien d'utilisateurs cliquent sur le bouton "Essayer la fonctionnalité X" dans votre message.
Cas d'usage recommandés :

• Mesurer les clics sur un CTA
• Tracker la découverte de fonctionnalités
• Construire des segments basés sur les interactions avec les messages
• Mesurer la complétion de l'onboarding
• Comprendre l'engagement avec les annonces produit

Une fois tracké, l'événement peut être utilisé pour l'analyse, la segmentation, ou le ciblage futur.

Set a property

Utilisez Set a property pour mettre à jour une propriété utilisateur depuis le message.
Cela vous permet de retenir quelque chose sur l'utilisateur et de le réutiliser plus tard pour le ciblage ou la segmentation.
Exemple : quand un utilisateur termine un product tour, définissez une propriété comme has_seen_product_tour = true.
Cas d'usage recommandés :

• Éviter de montrer à nouveau le même message
• Segmenter les utilisateurs selon les étapes d'onboarding complétées
• Stocker les préférences utilisateur
• Marquer les utilisateurs comme exposés à une fonctionnalité spécifique
• Construire des campagnes futures plus personnalisées

C'est particulièrement utile pour les parcours d'onboarding et d'activation, où vous voulez que l'expérience s'adapte selon ce que l'utilisateur a déjà vu ou fait.

Utiliser d'autres actions utiles

Les Actions Contextuelles peuvent aussi interagir avec le navigateur ou avec votre propre écosystème produit.

Copy to clipboard

Utilisez Copy to clipboard pour copier automatiquement un texte prédéfini quand l'utilisateur clique.
Exemple : ajoutez un bouton qui copie le code de parrainage de l'utilisateur, un code promo, ou un extrait de clé API.
Cas d'usage recommandés :

• Programmes de parrainage
• Codes promo
• Liens d'invitation
• Extraits de configuration
• Instructions de support

Assurez-vous que le message indique clairement ce qui a été copié.

Dispatch custom event

Utilisez Dispatch custom event pour envoyer un événement personnalisé à votre site ou application.
Cela crée un pont entre Screeb et vos propres outils, scripts, ou widgets tiers.
Exemple : depuis un in-app message Screeb, déclenchez un événement personnalisé qui ouvre votre Intercom, Crisp, ou chat de support personnalisé.
Cas d'usage recommandés :

• Ouvrir un chat de support
• Déclencher une modale personnalisée
• Connecter Screeb à la logique produit interne
• Envoyer des informations à un autre outil frontend
• Créer des workflows avancés avec votre équipe technique

Cette action nécessite généralement une configuration technique de votre côté, car votre application doit écouter l'événement personnalisé et décider quoi faire quand il est reçu.

Utiliser des actions après une navigation

Les Actions Contextuelles peuvent aussi être utilisées après une étape de navigation.
Par exemple, vous pouvez envoyer un utilisateur vers une autre page puis continuer le parcours en attendant un élément, en scrollant vers une section, ou en mettant en avant un bouton sur la nouvelle page.
Utile pour les product tours multi-pages où l'étape suivante se produit après que l'utilisateur s'est déplacé vers une autre zone de votre produit.
Exemple de parcours :

1. L'utilisateur clique sur "Montre-moi comment ça marche"
2. Le message l'envoie vers la page pertinente
3. Screeb attend que l'élément cible apparaisse
4. La page scrolle vers la bonne section
5. Le bouton clé est mis en avant

Cela rend les parcours guidés plus fluides, en particulier dans les produits complexes où les utilisateurs doivent se déplacer entre plusieurs pages.

Bonnes pratiques

Utilisez les Actions Contextuelles pour simplifier le parcours utilisateur, pas pour lui retirer le contrôle.
Une bonne expérience guidée doit sembler utile, claire, et facile à suivre.
Nous recommandons de :

• Utiliser des libellés de CTA clairs, comme "Montre-moi", "Essayer maintenant", ou "Continuer"
• Garder chaque étape concentrée sur une seule action
• Éviter de déclencher trop d'actions à la fois
• Tester l'expérience sur la vraie page cible avant de publier
• Utiliser des sélecteurs CSS stables quand vous ciblez des éléments de page
• Ajouter une option de repli ou de passage quand c'est possible
• Tracker les interactions clés pour mesurer l'impact de votre message
• Utiliser les propriétés utilisateur pour éviter d'afficher le même guidage à répétition

Dépannage

L'action ne se déclenche pas

Vérifiez que le message est en ligne, que l'utilisateur correspond aux règles de ciblage, et que l'action est attachée à la bonne étape ou au bon CTA.
Si l'action dépend d'un élément de page, assurez-vous que l'élément existe au moment où l'action se déclenche.

L'élément ciblé n'est pas trouvé

L'élément n'est peut-être pas encore disponible, ou le sélecteur n'est pas stable.
Essayez d'utiliser Wait for element avant de déclencher l'action suivante.
Vous pouvez aussi demander à votre équipe technique d'ajouter un ID CSS stable à l'élément que vous voulez cibler.

L'action fonctionne en aperçu mais pas en production

Assurez-vous que le tag Screeb est installé sur la page de production et que les règles de ciblage du message correspondent à l'environnement de production.
Vérifiez aussi que l'élément sélectionné existe de la même façon en production que dans votre environnement de test.

L'événement personnalisé ne fait rien

Si vous utilisez Dispatch custom event, votre application doit écouter cet événement et définir ce qui doit se passer quand il est reçu.
Demandez à votre équipe technique de confirmer que l'écouteur d'événement est correctement implémenté sur la page.

Conclusion

Les Actions Contextuelles vous aident à transformer les messages Screeb en expériences produit interactives.
Vous pouvez les utiliser pour guider les utilisateurs, mettre en avant des éléments importants, déclencher des campagnes Screeb, tracker des interactions, mettre à jour des propriétés utilisateur, et connecter vos messages à votre propre logique produit.
Elles sont particulièrement utiles quand vous voulez aider les utilisateurs à agir directement dans votre produit, au bon moment et dans le bon contexte.

Mis à jour le : 14/08/2026