Ajoute des tooltips de feedback contextuel sur des éléments spécifiques de ton app.

Beacons

Les beacons sont des tooltips de feedback contextuel que tu ancres sur des éléments spécifiques de ton interface. Plutôt que de demander un retour global sur ton application, ils permettent de collecter du feedback précis sur une fonctionnalité, une page ou un composant en particulier — directement à l'endroit où l'utilisateur interagit avec l'élément concerné.

Ce qu'est un beacon

Un beacon est un indicateur visuel — par défaut un petit point animé — qui apparaît sur l'élément de ton interface que tu désignes via un sélecteur CSS. Quand l'utilisateur clique ou survole cet indicateur, un tooltip s'affiche avec un titre, un message et un bouton d'action. L'action peut ouvrir le widget Saasy (pour soumettre du feedback) ou rediriger l'utilisateur vers une URL.

Un beacon est entièrement configuré depuis le dashboard Saasy — pas besoin de modifier ton code à chaque fois que tu veux en ajouter ou en modifier un. Le script beacon se charge d'injecter les indicateurs au bon endroit au moment du chargement de la page.

Cas d'usage

Feedback sur une fonctionnalité spécifique : ancre un beacon sur un nouveau bouton ou un nouveau composant et demande aux utilisateurs ce qu'ils en pensent après leur première utilisation.
Invite d'onboarding : guide tes nouveaux utilisateurs vers une section clé de l'interface avec un message de contexte et un lien vers la documentation.
NPS contextuel : déclenche une question de satisfaction directement au niveau d'une fonctionnalité plutôt que d'envoyer un sondage global.
Collecte de feedback sur une interface en beta : identifie les zones de friction en plaçant des beacons sur les éléments que tu veux valider avant un lancement.

Installer le script beacon

Le script beacon est distinct du script principal du widget. Il doit être chargé en complément, dans le <head> de ton application :

<script>
  window.SaasyConfig = {
    embedKey: "TON_EMBED_KEY",
    appKey: "TON_APP_KEY",
  };
</script>
<script
  src="https://cdn.saasy.fr/widget.js"
  async
  defer
></script>
<script
  src="https://cdn.saasy.fr/beacon.js"
  async
  defer
></script>

Le script beacon.js s'initialise automatiquement après le widget. Il récupère la liste des beacons configurés pour ton application depuis l'API Saasy et les injecte dans la page selon les règles de ciblage que tu as définies.

Ordre de chargement

Le script beacon.js dépend de window.SaasyConfig.embedKey pour s'initialiser. Assure-toi que le bloc de configuration est placé avant les deux balises <script> de chargement.

Configurer un beacon dans le dashboard

Depuis le dashboard Saasy, sélectionne ton application et va dans Beacons > Nouveau beacon. Remplis les champs suivants :

Ancrage

Sélecteur CSS — Le sélecteur qui cible l'élément sur lequel le beacon doit apparaître. Tu peux utiliser n'importe quel sélecteur CSS valide :

#mon-bouton pour cibler un élément par son id
.nouveau-module pour cibler un élément par sa classe
[data-beacon="export"] pour cibler un élément par un attribut de données

Utilise des sélecteurs stables

Évite les sélecteurs trop génériques (comme button ou div.flex) qui risquent de correspondre à plusieurs éléments. Préfère des identifiants ou des attributs data-* dédiés, que tu ajoutes spécifiquement pour tes beacons. Cela te garantit que le beacon apparaît exactement où tu le souhaites, même si l'interface évolue.

Titre — Le titre affiché en haut du tooltip (texte court, 40 caractères maximum).
Message — Le corps du tooltip. Tu peux y expliquer le contexte ou poser une question directe à l'utilisateur (200 caractères maximum).
Libellé du bouton d'action — Le texte du bouton dans le tooltip (ex. Donner mon avis, En savoir plus).

Action du bouton

Choisis l'action déclenchée quand l'utilisateur clique sur le bouton du tooltip :

Ouvrir le widget — ouvre le widget Saasy en mode feedback. L'utilisateur peut alors soumettre un retour directement. C'est l'action recommandée pour la collecte de feedback.
Naviguer vers une URL — redirige l'utilisateur vers l'URL que tu spécifies. Utile pour pointer vers de la documentation, un formulaire externe ou une page d'onboarding.

Ciblage par appareil

Tu peux restreindre l'affichage d'un beacon a certains types d'appareils :

Cible	Description
Tous les appareils	Le beacon s'affiche sur desktop, tablette et mobile.
Desktop uniquement	Le beacon s'affiche uniquement sur les écrans de largeur supérieure à 1024 px.
Mobile uniquement	Le beacon s'affiche uniquement sur les écrans de largeur inférieure à 768 px.

Ce ciblage est utile quand l'élément cible n'existe que dans une version spécifique de ton interface (par exemple, un menu hamburger visible uniquement sur mobile).

Règles d'URL

Par défaut, un beacon s'affiche sur toutes les pages de ton application où le sélecteur CSS correspond à un élément. Tu peux restreindre son affichage à certaines URLs en ajoutant des règles dans le champ Règles d'URL :

Exacte : le beacon s'affiche uniquement si l'URL de la page correspond exactement a la valeur saisie.
Commence par : le beacon s'affiche sur toutes les pages dont l'URL commence par le préfixe indiqué (ex. /app/settings pour toutes les sous-pages des paramètres).
Contient : le beacon s'affiche sur toutes les pages dont l'URL contient la chaîne indiquée.

Tu peux combiner plusieurs règles — le beacon s'affiche si au moins une règle est satisfaite.

Environnements multiples

Si tu utilises le même embedKey en staging et en production, les beacons configurés s'afficheront dans les deux environnements. Si tu veux des beacons différents par environnement, crée une application Saasy distincte pour chaque environnement et utilise les embedKey correspondants.

Désactiver ou archiver un beacon

Depuis la liste des beacons dans le dashboard, tu peux à tout moment :

Désactiver un beacon pour le masquer sans le supprimer — il reste configurable et réactivable en un clic.
Archiver un beacon pour le retirer de la liste active tout en conservant les données de feedback collectées.
Supprimer un beacon définitivement, ce qui efface également les données associées.