> ## 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).

# Creating a Multi-Step Onboarding with Engage

A warm welcome is key to building a long-term relationship with new subscribers and improving a crucial aspect: **retention**.

Providing a multi-step onboarding process **right after payment confirmation** is an effective way to guide readers smoothly through their first interactions.

This article presents an example of a **three-step onboarding** process and one way (among others) to implement it using the Engage SDK.

---

## Example of a Multi-Step Onboarding

The following use case is designed to trigger **right after a subscription confirmation**, on a dedicated onboarding page. Here are the different steps:

### Step 1: Choosing a Newsletter Subscription

In this step, we propose several blocks, each allowing the new subscriber to sign up for a specific newsletter. A button is included to proceed to the next step.

💡 Use the flexibility of the [`click`](https://www.poool.dev/en/docs/engage/javascript/events#click) event to register users for a specific newsletter upon selection.

[![](https://storage.crisp.chat/users/helpdesk/website/-/8/c/e/b/8ceb6bdb0d10c800/68935c52-bb93-4c95-9eac-51a10a_15ry5gc.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1418489843/96dd29a541e16aad0b1df2d8e2bc/image.png?expires=1773333000&signature=8a2e6d2390ee442ab535c546a9ba8aeb775869648b490b0dddef776ecd83f854&req=dSQmHs12lIlbWvMW1HO4zXu9Zls3wanr3RRmZx6USvQe9lfKyKZLha9Y0g8x%0AOFJuSRlyciXlJuuIqnc%3D%0A)

*The Telegraph*

Implementation on the Engage Dashboard:

* Set the **display condition** of the element to **"Based on a custom filter"**, using a unique value such as `Step1`.
* Use **clickable image components** for each newsletter option.
* Set the **click action** to **"Trigger an event"** for each selection.
* Define a JavaScript event name, which will be handled in the integration logic to process the subscription.
* Use a button component with the action **"Trigger an event"** to proceed to the next step.
* Define an event name, e.g., `Step1-completed`.

### Step 2: Download the Mobile App

For new subscribers browsing on a **desktop device**, we display a **QR code** that they can scan to download the publisher’s mobile app.

To proceed to the next step, we use the same approach as in Step 1: a button to trigger the next interaction.

[![](https://storage.crisp.chat/users/helpdesk/website/-/a/9/1/3/a9135bdd39e6f000/b1f61ac4-f10e-4077-822e-781c1e_1xln0ae.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1418491673/4a599edb7549611145647e3b5b1e/image.png?expires=1773333000&signature=758a3f25e1f47dce76491e56ba3b692788d12853ca36d44714836266a0f13f6f&req=dSQmHs13nIdYWvMW1HO4zYo%2FJtLtf5ILhHm%2BR8ZeILpJ9kGd%2FQV9bg%2BXh1j8%0ANRYF35TVbU9fVyvPwqA%3D%0A)

*The Economist*

Implementation on the Engage Dashboard:

* Set the **display condition** to **"Based on a custom filter"**, using the event name from the previous step (e.g., `Step1-completed`).
* Use a button component with the action **"Trigger an event"** to proceed to the next step.
* Define an event name, e.g., `Step2-completed`.

### Step 3: Completing Personal Information

At this stage, we aim to enhance the **subscriber’s personalized experience** while completing the onboarding process.

A **form** is displayed to collect essential user information. The [`formSubmit`](https://www.poool.dev/en/docs/engage/javascript/events#formsubmit) event processes and stores the submitted data.

[![](https://storage.crisp.chat/users/helpdesk/website/-/a/2/a/a/a2aa17e3bc5cf000/92d55278-b60c-40ea-b950-a5261a_13g9cjb.png)](https://downloads.intercomcdn.com/i/o/s22rivig/1418515832/cf186ab860991e79daf0ff75a309/Capture+d%E2%80%99%C3%A9cran+2025-02-24+%C3%A0+10_22_15+%281%29.png?expires=1773333000&signature=73892d8884e7b20c4fa076c3b935a944155b988cdb47e38fee62a87aa79da092&req=dSQmHsx%2FmIlcW%2FMW1HO4zYaMYPZtPd4T1%2FpPB5j1vNqtktzXH03x0o%2BnfmGz%0A1erZanmmPgBLSlqmg78%3D%0A)

*Le Parisien*

Implementation on the Engage Dashboard:

* Set the **slug** of the element (e.g., `"onboarding-step-3"`).
* Set the **display condition** to **"Based on a custom filter"**, using the event name from the previous step (e.g., `Step2-completed`).
* Use a **button component** with the action **"Submit form"** to process the data.

## Technical Implementation with the Engage SDK

This example follows the logic below:

1. **On each page load, the appropriate Engage element is displayed**, corresponding to Step 1, 2, or 3.
2. The user is **assigned to the correct step** using the **browser's Local Storage**.
3. The right Engage element is loaded **by applying a custom filter** via `.autoCreate({ filters: });`.

💡 While this is a functional integration method, it **may not suit every use case**. Feel free to explore other approaches or contact our support team for validation.

```
Engage.init("<your-app-id>")     
   .on("click", ({ name }) => {      
     // Store onboarding progress in localStorage  
     localStorage.setItem("onboardingStep", name);  
     // Reload the page to display the next step  
     window.location.reload();     
   })  
   .on("formSubmit", ({ element }) => {  
     if (element.slug === 'onboarding-step-3') {         
       localStorage.setItem("onboardingStep", 'Step3-completed');         
       // Reload the page for the next step (or redirect as needed)  
       window.location.reload();       
     }     
   })     
   .autoCreate({       
     // Retrieve the last completed step and apply it as a filter.  
     // If no step is completed, default to Step 1.  
     filters: localStorage.getItem("onboardingStep") || "Step1",     
   });
```

---

If you have any questions or need assistance, feel free to reach out via **live chat** or **email** 😊