Apprends à créer des flows d'onboarding avec le Canvas Builder : exemples de flows, types de nodes, et bonnes pratiques.

Guide du Canvas Builder

Le Canvas Builder est l'éditeur visuel de Saasy Onboarding. Tu y construis tes flows en glissant des nodes sur le canvas et en les connectant entre eux.

Concepts clés

Nodes

Chaque node représente une étape ou une action dans ton flow. Il existe 4 catégories de nodes :

Catégorie	Nodes	Description
Étapes	Tooltip, Modale, Bannière, Slideout	Composants UI affichés à l'utilisateur
Composants	Checklist, Centre de ressources	Éléments persistants liés à des entités existantes
Logique	Condition, Délai	Branchement conditionnel et temporisation
Pont Feedback	Déclencher sondage, Déclencher beacon	Intégration avec Saasy Feedback

Edges (connexions)

Les edges relient les nodes entre eux et definissent l'ordre de progression :

Séquentiel — Le node suivant s'affiche après que l'utilisateur a complété le précédent
Conditionnel — Le node Condition évalue un attribut utilisateur et dirige vers la branche "Vrai" ou "Faux"

Panneau de proprietes

Quand tu sélectionnes un node sur le canvas, le panneau de droite affiche ses propriétés éditables :

Contenu — Titre, texte, sélecteur CSS, position
Style — Animation, espacement spotlight
Actions — Boutons d'action (Suivant, Précédent, Fermer, Lien, Événement)

Exemples de flows

1. Flow de bienvenue

Un flow classique pour accueillir un nouvel utilisateur avec une modale de bienvenue suivie de tooltips sur les éléments importants.

[Modale: Bienvenue]
    |
[Tooltip: Sidebar navigation]
    |
[Tooltip: Bouton Créer]
    |
[Tooltip: Paramètres]

Configuration :

Modale "Bienvenue"
- Disposition : Grande
- Titre : "Bienvenue sur MonApp !"
- Contenu : "Laisse-nous te montrer les fonctionnalités essentielles."
- Media : Image ou vidéo de présentation
- Actions : Commencer (type: Suivant)
Tooltip "Navigation"
- Sélecteur CSS : #nav-dashboard
- Position : Right
- Titre : "Ton tableau de bord"
- Contenu : "Retrouve toutes tes métriques ici."
- Fond assombri : Oui
- Actions : Suivant (type: Suivant), Passer (type: Fermer)
Tooltip "Creer"
- Sélecteur CSS : #create-project-btn
- Position : Bottom
- Titre : "Crée ton premier projet"
- Contenu : "Clique ici pour commencer."
- Fond assombri : Oui
- Actions : Suivant (type: Suivant)
Tooltip "Paramètres"
- Sélecteur CSS : #nav-settings
- Position : Right
- Titre : "Personnalise ton espace"
- Contenu : "Configure ton profil et tes préférences."
- Actions : Terminer (type: Fermer)

2. Flow avec condition

Un flow qui affiche un contenu différent selon le plan de l'utilisateur (gratuit vs payant).

[Condition: user.plan == "free"]
   |                    |
  Vrai                Faux
   |                    |
[Banniere: Upgrade]  [Tooltip: Nouvelle feature]

Configuration :

Condition
- Attribut : user.plan
- Opérateur : Égal à
- Valeur : free
Banniere "Upgrade" (branche Vrai)
- Position : Haut
- Contenu : "Passe au plan Pro pour débloquer toutes les fonctionnalités."
- Couleur de fond : #3B82F6 (bleu)
- Couleur du texte : #FFFFFF
- Actions : Voir les plans (type: Lien, URL: /pricing)
Tooltip "Nouvelle feature" (branche Faux)
- Sélecteur CSS : #feature-export
- Position : Bottom
- Titre : "Nouveau : Export PDF"
- Contenu : "Tu peux maintenant exporter tes rapports en PDF."
- Actions : Compris (type: Fermer)

3. Flow avec checklist

Un flow qui combine une modale de bienvenue avec une checklist pour guider l'utilisateur dans ses premières actions.

[Modale: Bienvenue]
    |
[Checklist: Premières étapes]

Prérequis : Crée d'abord ta checklist dans l'onglet Checklists du module Onboarding.

Configuration :

Modale "Bienvenue"
- Disposition : Grande
- Titre : "Bienvenue ! Voici tes premières étapes."
- Actions : C'est parti ! (type: Suivant)
Node Checklist
- Sélectionne la checklist dans le menu déroulant du panneau de propriétés
- La checklist apparait avec son nom et son statut (Actif/Inactif)

Creer la checklist (onglet Checklists) :

Nom : "Premières étapes"
Titre : "Bien démarrer"
Mode d'affichage : Flottant
Items :
- "Compléter ton profil" (Action : Lien vers /settings/profile)
- "Créer ton premier projet" (Action : Lien vers /projects/new)
- "Inviter un coéquipier" (Action : Lien vers /settings/team)
- "Explorer les intégrations" (Action : Lien vers /settings/integrations)

Bon à savoir : Le node Checklist dans le canvas ne contient pas les items directement — il fait référence à une checklist existante. Cela te permet de réutiliser la même checklist dans plusieurs flows.

4. Flow avec délai

Un flow qui attend 2 jours après l'inscription avant de proposer une action à l'utilisateur.

[Délai: 2 jours]
    |
[Slideout: Découvre les intégrations]

Configuration :

Délai
- Durée : 2
- Unité : Jours
Slideout "Intégrations"
- Position : Droite
- Largeur : Moyenne
- Titre : "Connecte tes outils"
- Contenu : "Saasy s'intègre avec Slack, Jira, GitHub et plus encore. Configure tes intégrations pour automatiser ton workflow."
- Actions : Voir les intégrations (type: Lien, URL: /settings/integrations), Plus tard (type: Fermer)

5. Flow avec centre de ressources

Un flow qui affiche un centre de ressources avec des articles d'aide contextuels.

[Tooltip: Centre d'aide]
    |
[Centre de ressources]

Prérequis : Crée d'abord tes ressources dans l'onglet Ressources du module Onboarding.

Configuration :

Tooltip "Centre d'aide"
- Sélecteur CSS : #help-btn
- Position : Left
- Titre : "Besoin d'aide ?"
- Contenu : "Consulte notre centre de ressources pour trouver des guides et tutoriels."
- Actions : Ouvrir (type: Suivant)
Node Centre de ressources
- Coche les ressources à inclure dans le panneau de propriétés
- Chaque ressource apparait avec une case a cocher

Creer les ressources (onglet Ressources) :

"Guide de démarrage" (type: article)
"Tutoriels vidéo" (type: vidéo)
"FAQ" (type: article)

Bon à savoir : Le node Centre de ressources fait référence à des ressources existantes via des cases à cocher. Tu peux sélectionner plusieurs ressources pour les regrouper dans un seul centre.

6. Flow avec pont Feedback

Un flow qui déclenche un sondage NPS après la complétion du parcours d'onboarding.

[Modale: Fin d'onboarding]
    |
[Délai: 1 heure]
    |
[Déclencher sondage]

Prérequis : Crée d'abord un sondage dans le module Saasy Feedback.

Configuration :

Modale "Fin d'onboarding"
- Disposition : Compacte
- Titre : "Tu es prêt !"
- Contenu : "Tu as complété ton onboarding. Bonne utilisation !"
- Actions : Commencer à utiliser (type: Fermer)
Délai
- Durée : 1
- Unité : Heures
Déclencher sondage
- Sélectionne le sondage NPS dans les propriétés
- Renseigne l'ID du board Feedback

Types de nodes en détail

Bulle contextuelle ancrée à un élément de ta page.

Propriété	Description
Titre	Titre de la bulle
Contenu	Texte explicatif
Sélecteur CSS	Sélecteur de l'élément cible (ex: `#mon-bouton`, `.ma-classe`)
Position	Top, Bottom, Left, Right, Auto
Fond assombri	Active le backdrop spotlight autour de l'élément
Animation	Fondu, Glissement, Échelle, Rebond, Aucune
Actions	Boutons d'action (max 4)

Modale

Overlay centré.

Propriété	Description
Titre	Titre de la modale
Contenu	Texte ou HTML
Disposition	Plein écran, Grande, Compacte, Bottom sheet
URL du media	Image, vidéo ou animation Lottie
Type de media	Image, Vidéo, Lottie
Peut être fermé	L'utilisateur peut fermer sans compléter
Actions	Boutons d'action (max 4)

Banniere

Barre sticky en haut ou en bas de la page.

Propriété	Description
Contenu	Texte de la bannière
Position	Haut ou Bas
Fixe	Reste visible au scroll
Peut être fermé	Affiche un bouton de fermeture
Couleur de fond	Code hexadécimal
Couleur du texte	Code hexadécimal
Icone	Nom de l'icone Lucide (info, alert-circle, etc.)
Actions	Boutons d'action (max 4)

Slideout

Panneau latéral.

Propriété	Description
Titre	Titre du panneau
Contenu	Texte ou HTML
Position	Gauche, Droite, Bas
Largeur	Petite, Moyenne, Grande
Actions	Boutons d'action (max 4)

Checklist

Relié à une checklist existante (créée dans l'onglet Checklists).

Propriété	Description
Checklist	Sélectionner dans la liste déroulante

La checklist doit être créée au préalable dans l'onglet Checklists du module Onboarding. Le node fait référence à cette checklist par son identifiant.

Centre de ressources

Relié à des ressources existantes (créées dans l'onglet Ressources).

Propriété	Description
Ressources liées	Cocher les ressources à inclure

Les ressources doivent être créées au préalable dans l'onglet Ressources du module Onboarding.

Condition

Branchement conditionnel basé sur un attribut utilisateur.

Propriété	Description
Attribut	Attribut utilisateur (ex: `user.plan`, `user.createdAt`)
Opérateur	Égal à, Différent de, Supérieur à, Contient, Avant, Après, etc.
Valeur	Valeur à comparer

Le node Condition a deux sorties : Vrai (vert, à gauche) et Faux (rouge, à droite). Connecte chaque sortie au node correspondant.

Opérateurs disponibles :

Opérateur	Description	Exemple
Égal à	Comparaison stricte	`user.plan` égal à `free`
Différent de	N'est pas égal	`user.role` différent de `admin`
Supérieur à	Nombre plus grand	`user.sessionCount` supérieur à `10`
Contient	Sous-chaine	`user.email` contient `@gmail.com`
Commence par	Début de chaîne	`user.name` commence par `A`
Existe	L'attribut est défini	`user.company` existe
N'existe pas	L'attribut est absent	`user.avatar` n'existe pas
Avant	Date antérieure	`user.createdAt` avant `2026-01-01`
Après	Date postérieure	`user.trialEndsAt` apres `2026-03-01`
Dans la liste	Valeur dans un ensemble	`user.plan` dans la liste `pro,enterprise`

Délai

Temporisation avant le node suivant.

Propriété	Description
Durée	Nombre (entier positif)
Unité	Secondes, Minutes, Heures, Jours

Pont Feedback

Déclenchement d'un sondage ou beacon Saasy Feedback depuis un flow Onboarding.

Propriété	Description
ID du sondage / beacon	Identifiant dans Saasy Feedback
ID du board	Board Feedback associé

Bonnes pratiques

Commence simple — Un flow de 3-5 étapes est plus efficace qu'un flow de 20 étapes. Les utilisateurs décrochent après 5-6 étapes.
Utilise les conditions — Adapte le contenu au profil de l'utilisateur. Un utilisateur sur le plan gratuit n'a pas les mêmes besoins qu'un utilisateur Pro.
Ajoute des délais — Ne bombarde pas l'utilisateur de modales au premier login. Espace les flows avec des délais de quelques heures ou jours.
Combine checklist et tooltips — Les tooltips guident l'utilisateur vers une action spécifique, la checklist donne une vue d'ensemble de la progression.
Teste avec la preview — Utilise le mode Preview du canvas pour simuler le flow avant de le publier.
Cible avec les segments — Crée des segments (onglet Segments) pour cibler tes flows sur les bons utilisateurs au bon moment.