Interstitial

interstitial in Web issimilar and supports many of the keys as in-app.

Key	Notes
type	interstitial
stepId	Unique id for the step
useHTML	Optional - set it to true to support HTML tags as break lines <br/> in the title or subtitle of the step
hideProgressBar	Boolean. It can be used to hide the progress if needed.
config	An object for all the context and style of the step – read more about that object below.

The config Object

Key	Notes
type	interstitial
title	Used if the step has a title.
subtitle	Used if the step has a subtitle.
textColor	The color for the title and subtitle.
image	The URL of the step’s image
cta	The text of the CTA – e.g. Continue.
color_cta	The text color of the CTA.
color_cta_button	The background color of the CTA.
color_background	The background color of the step.
color_background_mobile	Optional, if we want to use a different background color on mobile devices. (The default color will be color_background if color_background_mobile isn’t passed to the config.
autoNext	Set it to true if the step should move to the next step directly without having the CTA button.
autoNextDelay	The number of milliseconds we should wait until auto-move to the next step – e.g 5000 for wait for 5 seconds.
mode	In Web, only CENTER is supported and it can be used to show the title in the center without having an autoNext to the step
imageAltText	Text can be added as the alt text of the image.
lottieUrl	It can be used instead of image to show a Lottie file.

Examples

Step with a title and autoNext set to true

{
    "type": "interstitial",
    "stepId": "celebrating_strengths",
    "config": {
        "id": "celebrating_strengths",
        "title": "This journey isn't about labeling or diagnosing – it's about celebrating the unique strengths and talents that accompany ADHD",
        "image": "https://c.thefab.co/web-onboarding/time/img-inter-gems.webp",
        "color_background": "#037296",
        "autoNext": true,
        "autoNextDelay": 5000,
        "textColor": "#fff"
    }
}

Step with a title and subtitle and cta:

{
    "type": "interstitial",
    "stepId": "discover_power",
    "config": {
        "id": "discover_power",
        "title": "Ready to discover your superpowers?",
        "subtitle": "At the end of this exploration, we'll compile your responses to generate a personalized Strengths Portrait.",
        "image": "https://c.thefab.co/web-onboarding/time/img-inter-superpowers-opt-zoom.webp",
        "color_cta": "#FFFFFF",
        "color_cta_button": "#37CDB8",
        "color_background": "#004b42",
        "cta": "Let's begin",
        "textColor": "#fff"
    }
}