Installer le widget | Saasy Documentation

Intègre le widget Saasy Feedback dans ton application en quelques lignes de code.

Le widget Saasy Feedback s'intègre directement dans ton application et permet à tes utilisateurs de soumettre des idées, consulter la roadmap et lire le changelog sans quitter ton interface.

Installation de base (HTML)

Ajoute ce snippet avant la fermeture de la balise </body> de ta page :

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

C'est tout. Le widget se charge de façon asynchrone et n'impacte pas les performances de ton application.

Tu trouves tes cles dans Parametres > Developpeur de ton app Saasy. L'appKey est necessaire pour activer les modules Onboarding et Analytics.

Options de configuration

L'objet SaasyConfig accepte plusieurs options pour adapter le widget à ton contexte :

Option	Type	Description
`embedKey`	`string`	Cle d'integration du widget. Obligatoire si tu n'utilises pas `appKey`.
`appKey`	`string`	Cle d'application pour l'onboarding/analytics seul. Obligatoire si tu n'utilises pas `embedKey`.
`apiUrl`	`string`	URL de l'API Saasy (optionnel, detecte automatiquement).
`locale`	`string`	Langue du widget (`fr`, `en`, etc.).

Exemple avec toutes les options

<script>
  window.SaasyConfig = {
    embedKey: "ton_embed_key",
    appKey: "ik_xxx",
    locale: "fr",
  };
</script>
<script src="https://cdn.saasy.fr/widget.js" async></script>

embedKey charge le widget Feedback complet. appKey charge uniquement l'onboarding et l'analytics. Tu peux utiliser les deux ensemble.

Intégration par framework

Crée un composant SaasyWidget et charge le script une seule fois au montage de ton application :

import { useEffect } from "react";

export function SaasyWidget() {
  useEffect(() => {
    window.SaasyConfig = {
      embedKey: "ton_embed_key",
      appKey: "ton_app_key",
      locale: "fr",
    };

    const script = document.createElement("script");
    script.src = "https://cdn.saasy.fr/widget.js";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Ajoute <SaasyWidget /> dans ton composant racine, par exemple dans App.tsx ou _app.tsx.

Installation du beacon (optionnel)

Le beacon est un bouton flottant qui apparaît dans un coin de ton application et ouvre le widget au clic. C'est la solution la plus simple pour déclencher le widget sans modifier ton interface existante.

Pour activer le beacon, ajoute l'attribut data-saasy-beacon à n'importe quel élément HTML, ou laisse Saasy en créer un automatiquement :

<script>
  window.SaasyConfig = {
    embedKey: "ton_embed_key",
    appKey: "ton_app_key",
    beacon: {
      enabled: true,
      position: "bottom-right",
    },
  };
</script>
<script src="https://cdn.saasy.fr/widget.js" async></script>

Tu peux aussi déclencher le widget manuellement depuis ton propre bouton :

document.getElementById("mon-bouton-feedback").addEventListener("click", () => {
  window.Saasy.open();
});

Préfère un bouton personnalisé dans ta navigation plutôt que le beacon flottant pour une intégration plus cohérente avec le design de ton application.

Étape suivante

Le widget est installé. Personnalise maintenant son apparence et son contenu depuis le Widget Builder dans ton tableau de bord. Consulte la page Personnalisation pour adapter les couleurs et le style.