> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Créer un onboarding en plusieurs étapes avec Engage

Rien de tel qu'un accueil chaleureux pour poser les bases d'une longue relation avec ses nouveaux abonnés, et ainsi travailler un aspect crucial : la **rétention**.

Proposer un onboarding en plusieurs étapes, **juste après la confirmation de paiement** d'un(e) nouvel(le) abonné(e), s'avère être un outil très efficace pour guider vos lecteurs en douceur.

Cet article a pour but de proposer un exemple d'**onboarding en 3 étapes**, et une manière (parmi d'autres) d'utiliser le SDK Engage pour y parvenir.

## Exemple d'onboarding à étapes

Le cas d'usage présenté ici est pensé pour se déclencher **juste après la confirmation à l'abonnement**, sur une page dédiée. Voici les différentes étapes.

#### Etape 1 : Choisir parmi une sélection de newsletters

La première étape consiste dans notre exemple à proposer plusieurs blocs, chacun déclenchant l'inscription du nouvel abonné à une newsletter en particulier. Un bouton permet ensuite de passer à l'étape suivante.

💡 Tirez partie de la flexibilité de l'événement [click](https://www.poool.dev/fr/docs/engage/javascript/events#click) pour réaliser l'inscription effective de vos abonnés à l'une ou l'autre des newsletters.

[![](https://storage.crisp.chat/users/helpdesk/website/-/e/d/e/c/edec99128e86000/eaa86559-1607-4837-8341-aa6089_g1hkzx.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1257328429/d1812d9e7cbfa7c63b2976005848/image.png?expires=1773414000&signature=fb27c5c9b2522b47383aeb6bf523fc62bac5f2b301badbb9fe2425dddd4ec0f0&req=dSIiEcp8lYVdUPMW1HO4zUvIrKqOe9U7VAzLcHK2JN9k1%2FSxwwqqrzMLsC70%0AFNoC9ZXg47vgd%2FZSQyM%3D%0A)

_Exemple The Telegraph_

**Mise en place sur le dashboard** :

* Utiliser la **condition d'affichage** de l'élément "**Selon un filtre personnalisé**" avec une valeur unique, par exemple `Etape1`
* Pour les différents boutons sous forme d'image, **utiliser un composant "cliquable"** contenant un composant image.
* Sélectionner **l'action** du composant cliquable "**déclencher un événement**"
* Définir un nom d'événement Javascript qui devra être ciblé dans l'intégration technique pour effectuer votre logique d'inscription
* Utiliser un composant bouton avec action "**déclencher un événement**" pour passer à l'étape suivante
* Définir un nom d'événement, par exemple `Etape1-completed`

#### Etape 2 : Télécharger l'app mobile

Dans le cas d'un nouvel abonné navigant sur ordinateur, on souhaite proposer un **QR code**, que le lecteur va scanner sur son écran pour télécharger l'app mobile du titre média.

Pour passer à l'étape suivante, on reprend le fonctionnement de l'étape précédente avec un bouton permettant de déclencher cette interaction.

[![](https://storage.crisp.chat/users/helpdesk/website/-/9/f/7/6/9f769451e9752000/656cf6e2-d5f5-4eb4-a269-ed01f1_cddfub.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1257420006/846a956136fbcf52a94683238e8e/image.png?expires=1773414000&signature=329bcfbf1a325a33da8d6a48222b1181bb0741c50a37545e25ff49c780bf839d&req=dSIiEc18nYFfX%2FMW1HO4zZHIourtg1vHkBsP6ZIvU6QOryDjpClM%2FgheTYNU%0AVUdQnlempfjC%2BJ2izhI%3D%0A)

_Exemple The Economist_

**Mise en place sur le dashboard** :

* Utiliser la **condition d'affichage** de l'élément "**Selon un filtre personnalisé**" avec comme valeur le nom envoyé sur le bouton de l'étape précédente, par exemple `Etape1-completed`
* Utiliser un composant bouton avec action "**déclencher un événement**" pour passer à l'étape suivante
* Définir un nom d'événement, par exemple `Etape2-completed`

#### Etape 3 : Compléter ses informations personnelles

A ce stade, on souhaite proposer une meilleure **personnalisation de l'expérience abonné** et clore l'onboarding.

On met alors en place un **formulaire** contenant l'ensemble des champs nécessaires et on utilise l'événement [formsubmit](https://www.poool.dev/fr/docs/engage/javascript/events#formsubmit) pour traiter les informations envoyées.

[![](https://storage.crisp.chat/users/helpdesk/website/-/7/d/4/b/7d4b4048c9ba2400/16f5b704-68d6-4ba3-b86d-acf6ce_3aju49.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1418520984/0983fe8d362bdce551d42d1db537/Capture+d%E2%80%99%C3%A9cran+2025-02-24+%C3%A0+10_22_15+%281%29.png?expires=1773414000&signature=e76c76fd749e58758f8f4c6262517b67845cd2627f07ad63ce63c0961e83170e&req=dSQmHsx8nYhXXfMW1HO4zaaT%2FVF6lp00kanKr%2FNrrl6nerlKEomL0KocPd%2Bx%0A4A1iuWhY3tFACmsKrnI%3D%0A)

_Le Parisien_

**Mise en place sur le dashboard** :

* Définir le **slug** de l'élément, par exemple "onboarding-etape-3"
* Utiliser la **condition d'affichage** de l'élément "**Selon un filtre personnalisé**" avec comme valeur le nom envoyé sur le bouton de l'étape précédente, par exemple `Etape2-completed`
* Utiliser un **composant bouton** avec action "**Soumettre le formulaire**"

## Mise en place technique avec le SDK Engage

L'exemple d'intégration présenté ici se base sur la logique suivante :

* **A chaque chargement de page, un élément Engage différent est chargé**, correspondant à l'étape 1, 2 ou 3 du parcours d'onboarding.
* L'utilisateur est **attribué à la bonne étape** correspondant à son parcours, grâce à l'utilisation du **Local Storage** **du navigateur**.
* L'élément adéquat est chargé à travers l'utilisation des **filtres personnalisés**, passés sous `.autoCreate({ filters: });`

💡Bien que cet exemple représente une méthode fonctionnelle d'intégration, **elle pourrait ne pas vous convenir**. N'hésitez pas à en tester d'autres ou à vous rapprocher de notre équipe support pour validation.

```
Engage.init("<your-app-id>")     
   // name = nom de l'évènement JavaScript relié au bouton (setup sur le   
   // dashboard)  
   // Exemple : le bouton de l'étape 1 enverra 'Etape1-completed'  
   .on("click", ({ name }) => {      
     // Pour l'exemple, on utilise le localStorage pour stocker   
     // l'information de l'état de l'onboarding.  
     localStorage.setItem("etapeOnboarding", name);  
     // On recharge la page pour charger l'élément de l'étape suivante.  
     window.location.reload();     
})  
   .on("formSubmit", ({ element }) => {  
     // Pour gérer le formulaire de l'étape 3, on se sert du slug        
     // de l'élément pour mettre à jour l'état de l'onboarding.       
     if (element.slug === 'onboarding-etape-3') {         
       localStorage.setItem("etapeOnboarding", 'Etape3-completed');         
       // On recharge la page pour charger l'élément de l'étape suivante    
       (si applicable. Sinon, vous pouvez appliquer une redirection vers   
       la page souhaitée)         
       window.location.reload();       
     }     
   })     
   .autoCreate({       
     // On récupère la dernière étape complétée/passée et        
     // on l'applique en tant que filtre.             
     // NB : || "Etape1" permet d'afficher la première        
     // étape en se basant sur un filtre si l'onboarding n'a pas commencé.       
     filters: localStorage.getItem("etapeOnboarding") || "Etape1",     
   });

```

---

Pour toute question ou si besoin d'aide, n'hésitez pas à nous écrire via le chat en direct ou par email 😊