Splash
| Key | Notes |
|---|---|
type | spalsh |
stepId | Unique step id |
title | The step title |
subtitle | The step subtitle |
footerText | The text at the end of the step. |
imageUrlDesktop | The splash image in desktop |
imageUrl | The splash image in mobile |
maxWidth | To add a max width to the splash image on big devices. |
maxWidthMobile | To add a max width to the splash image on small devices. |
useHTML | This allows you to add inline HTML to the title, subtitle of the step to give it a font-kalam or add a break to it </br> <span class='font-kalam' style='color:#FFA033;'>choose the amount</span> you pay. Here for example, this text will start on a new font and will be in font kalam in the color FFA033. In case like that you must set useHTML to true. |
splashLists | It is an array of the types of lists to show in the step (check below for more examples) "splashLists": [ { "type": "vertical", "content": [ { "text": "Restrictive diets", "textColor": "#FF464A", "icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/red-x-icon.svg", "iconBackgroundColor": "#FFF", "iconWidth": "15px" }, { "text": "Costly medical investments", "textColor": "#FF464A", "icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/red-x-icon.svg", "iconBackgroundColor": "#FFF", "iconWidth": "15px" }, { "text": "Save time - no waiting for appointments", "textColor": "#00AF85", "icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/green-checkmark-icon.svg", "iconBackgroundColor": "#FFF", "iconWidth": "20px" }, { "text": "Better digestive health", "textColor": "#00AF85", "icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/green-checkmark-icon.svg", "iconBackgroundColor": "#FFF", "iconWidth": "20px" } ] } ] |
backgroundColor | |
textColor | The main textColor on the page |
ctaText | The text of the main button |
ctaColor | The text color of the main button |
ctaBackgroundColor | The background color of the main button |
ctaHoverBackgroundColor | The background of the main button on hovering. |
backButtonColor | The text color of the back button |
backButtonText | The text of the back button |
backButtonBackgroundColor | The background color of the back button |
Examples
vertical list
"splashLists": [
{
"type": "vertical",
"content": [
{
"text": "Restrictive diets",
"textColor": "#FF464A",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/red-x-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "15px"
},
{
"text": "Costly medical investments",
"textColor": "#FF464A",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/red-x-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "15px"
},
{
"text": "Save time - no waiting for appointments",
"textColor": "#00AF85",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/green-checkmark-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "20px"
},
{
"text": "Better digestive health",
"textColor": "#00AF85",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/green-checkmark-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "20px"
}
]
}
]

horizontal list
"splashLists": [
{
"type": "horizontal",
"content": [
{
"text": "Restrictive diets",
"textColor": "#FF464A",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/red-x-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "15px"
},
{
"text": "Costly medical investments",
"textColor": "#FF464A",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/red-x-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "15px"
},
{
"text": "Save time - no waiting for appointments",
"textColor": "#00AF85",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/green-checkmark-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "20px"
},
{
"text": "Better digestive health",
"textColor": "#00AF85",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/green-checkmark-icon.svg",
"iconBackgroundColor": "#FFF",
"iconWidth": "20px"
}
]
}
]

Two lists
"splashLists": [
{
"type": "vertical",
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/red-x-icon.svg",
"maxWidth": "267px",
"textCenter": true,
"iconWidth": "20px",
"iconBackgroundColor": "#FFF",
"content": [
{
"text": "Unwanted side effects",
"textColor": "#FF464A"
},
{
"text": "Dietary restrictions",
"textColor": "#FF464A"
},
{
"text": "Expensive supplements",
"textColor": "#FF464A"
}
]
},
{
"type": "vertical",
"maxWidth": "267px",
"textCenter": true,
"icon": "https://c.thefab.co/web-onboarding/shape/ibs/icons/green-checkmark-icon.svg",
"iconWidth": "24px",
"iconBackgroundColor": "#FFF",
"content": [
{
"text": "Low-cost",
"textColor": "#00AF85"
},
{
"text": "Reduced stress and anxiety",
"textColor": "#00AF85"
},
{
"text": "Target the underlying link between the gut and the mind",
"textColor": "#00AF85"
}
]
}
]
