Intègre les parcours d'onboarding interactifs dans ton application avec une seule balise script.

Installer Saasy Onboarding

Saasy Onboarding s'intègre dans ton application existante via le widget JavaScript Saasy. Tu peux l'utiliser seul ou en complément de Saasy Feedback.

Prérequis

Un compte Saasy avec un plan Onboarding actif (Starter, Growth ou Enterprise)
Une application créée dans ton dashboard Saasy
Ta clé d'intégration (appKey) disponible dans Onboarding > Paramètres

Modes d'installation

Onboarding seul

Si tu utilises uniquement Saasy Onboarding (sans Feedback), configure ton appKey :

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

L'appKey est un identifiant unique lié à ton application. Tu le trouves dans ton dashboard Saasy sous Onboarding > Paramètres.

Feedback + Onboarding

Si tu utilises déjà Saasy Feedback et que tu veux ajouter l'Onboarding, ajoute ton appKey à ta configuration existante :

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

L'embedKey identifie ton widget Feedback (lié à un board). L'appKey identifie ton application pour l'Onboarding. Les deux sont indépendants : tu peux avoir plusieurs widgets Feedback mais un seul appKey par application.

Identifier les utilisateurs

Pour que la progression d'onboarding soit persistante entre les sessions, identifie tes utilisateurs :

<script>
  window.SaasyConfig = {
    appKey: "app_ton_app_key",
  };
</script>
<script src="https://cdn.saasy.fr/widget.js" async></script>
<script>
  // Après le chargement du widget
  window.Saasy.identify({
    userId: "usr_123",
    email: "alice@exemple.fr",
    name: "Alice Martin",
    plan: "pro",
    createdAt: "2025-01-15",
  });
</script>

Les attributs passés à identify() sont utilisés par le moteur de ciblage pour évaluer les segments. Tu peux passer n'importe quel attribut custom.

API JavaScript Onboarding

Le widget expose un namespace window.Saasy.onboarding avec les methodes suivantes :

Méthode	Description
`Saasy.onboarding.startFlow(flowId)`	Démarre un flow spécifique manuellement
`Saasy.onboarding.dismissFlow()`	Ferme le flow actif
`Saasy.onboarding.completeChecklist(id)`	Marque une checklist comme terminée
`Saasy.onboarding.identify(props)`	Met à jour les attributs de l'utilisateur pour le ciblage
`Saasy.identify(user)`	Identifie l'utilisateur (partagé avec Feedback)

Événements

L'onboarding émet des CustomEvent sur document que tu peux écouter :

document.addEventListener("saasy:onb:flow:completed", (e) => {
  console.log("Flow terminé :", e.detail);
});

document.addEventListener("saasy:onb:step:viewed", (e) => {
  console.log("Étape vue :", e.detail);
});

document.addEventListener("saasy:onb:checklist:item_completed", (e) => {
  console.log("Item checklist complété :", e.detail);
});

Liste des événements

Événement	Détail
`saasy:onb:flow:started`	`{ flowId }`
`saasy:onb:flow:completed`	`{ flowId }`
`saasy:onb:flow:dismissed`	`{ flowId }`
`saasy:onb:step:viewed`	`{ flowId, stepId, nodeType }`
`saasy:onb:step:completed`	`{ flowId, stepId }`
`saasy:onb:step:dismissed`	`{ flowId, stepId }`
`saasy:onb:step:cta_clicked`	`{ flowId, stepId, action }`
`saasy:onb:checklist:viewed`	`{ checklistId }`
`saasy:onb:checklist:item_completed`	`{ checklistId, itemId }`
`saasy:onb:checklist:completed`	`{ checklistId }`
`saasy:onb:resource:viewed`	`{ resourceId }`

Étape suivante

Consulte l'exemple complet pour voir toutes les fonctionnalités en action dans une page HTML autonome.