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"
      }
  ]
}
]