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 event to register users for a specific newsletter upon selection.
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.
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 event processes and stores the submitted data.
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:
On each page load, the appropriate Engage element is displayed, corresponding to Step 1, 2, or 3.
The user is assigned to the correct step using the browser's Local Storage.
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 😊