Example of usage
https://web.onboarding.online/test1?isPremium=no
Path to find an example:
General Mechanics
To implement link parameter–based branching:
Add a custom screen at the start of your onboarding flow.
Read parameters from the link.
Create and set a variable that will be used for branching.
Set transition conditions between screens based on this variable.
1. Adding a Custom Screen
In order to add a Custom screen, please, follow the official guide:
How to Add a Custom Web Screen
A custom screen will allow you to insert custom HTML script for logic execution.
2. Creating a Branching Parameter
Open the Edit menu of the custom screen, locate Input dict, and click Add.
Assign a name to the Input and select its type.
3. Setting Transition Conditions
Navigate to the Transition settings:
Set the transition condition between screens by referencing your parameter
4. Using HTML in a Custom Screen
Insert an HTML setting into your screen.
Click "Edit HTML"
5. Script edit
Implement the logic for displaying the screen, reading input parameters from the link, and setting the variable value for branching.
<html>
<head>
<meta charset='UTF-8'>
<title>Custom Screen with Lottie</title>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script>
window.onboardingOnlineCustomScreenData={inputs:{},labels:{},userData:{},customData:{},incomeUserData:{}};
window.nextScreen=()=>{};
window.backScreen=()=>{};
window.acceptCookie=()=>{};
window.declineCookie=()=>{};
let isPremium='no';
function setIsPremium(){
if(!window.onboardingOnlineCustomScreenData.incomeUserData.initialUrl){return;}
const url=new URL(window.onboardingOnlineCustomScreenData.incomeUserData.initialUrl);
const params=new URLSearchParams(url.search);
isPremium=params.get('isPremium')??'no';
}
window.onmessage=(event)=>{
if(typeof(event.data)==='object'&&event.data.eventName==='InitCustomScreen'){
window.onboardingOnlineCustomScreenData.inputs=event.data.args.inputs;
window.onboardingOnlineCustomScreenData.labels=event.data.args.labels;
window.onboardingOnlineCustomScreenData.userData=event.data.args.userData;
window.onboardingOnlineCustomScreenData.customData=event.data.args.customData;
window.onboardingOnlineCustomScreenData.incomeUserData=event.data.args.incomeUserData;
setIsPremium();
setTimeout(()=>{window.nextScreen({isPremium});},3000);
const port=event.ports[0];
if(port){
window.nextScreen=(args)=>{port.postMessage({eventName:'NextScreen',args,},[])}
window.backScreen=()=>{port.postMessage({eventName:'BackScreen',args:null,},[])}
window.acceptCookie