Trial Explanation

A dynamic onboarding step component that explains the trial process using a timeline visualization. The component displays a series of trial steps with a timeline indicator, accompanied by a trial image and customizable colors. It features a responsive design with a sticky CTA button on mobile and includes terms and privacy links.

Step Config

Key	Description	Is Optional?
`type`	Should be `trialExplanation` to identify this step type.	Required
`stepId`	Unique step identifier.	Required
`backgroundColor`	The background color of the page.	Optional
`header`	Header text to show at the top of the step.	Required
`logo`	URL to the logo image to be displayed at the top of the step.	Optional
`trial`	Configuration object for the trial explanation section. See [Trial Explanation](Trial Explanation) for details.	Required
`cta`	The [Trial Explanation](Trial Explanation) to be added.	Required

Trial Config

Key	Description	Is Optional?
`primaryColor`	Primary color used for the timeline and CTA button (if not overridden).	Required
`secondaryColor`	Secondary color used for the timeline elements.	Required
`steps`	Array of exactly 3 trial steps, each containing a title and description.	Required
`image`	URL to the trial explanation image to be displayed below the timeline.	Required

CTA Config

Key	Description	Is Optional?
`text`	CTA text.	Required
`textColor`	CTA text color. If not provided, defaults to white (#ffffff).	Optional
`backgroundColor`	The background color of the CTA. If not provided, uses the trial's primaryColor.	Optional

Example

{
  "id": "fabulous_app_id2",
  "journeyId": "6Gr4B9SkA3",
  "bold": true,
  "appId": "co.thefabulous.app",
  "language": "en",
  "seo": {
    "title": "Fabulous",
    "favicon": "https://www.thefabulous.co/images/favicon.png",
    "description": "Track Your Way to Better Mental Health with A Top-Ranked App. Say Goodbye to uncertainty with Fabulous, Kickstart your day with a productive and healthy routine."
  },
  "managerConfig": {
    "type": "energy",
    "properties": {
      "onboarding_in_app_message_sequence_enabled": false,
      "onboarding_play_alternate_pings": true,
      "onboarding_play_background_music": true
    }
  },
  "steps": [
    {
     "moveToNextStepOnPriceSelection": true,
      "type": "pwywWithDiscountedOffer",
      "stepId": "pwyw",
      "backgroundColor": "white",
      "logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
      "profileIconColor": "#7A90A3",
      "textColor": "#14191D",
      "subtitleColor": "#4F6171",
      "paragraphColor": "#7A90A3",
      "ctaTextColor": "white",
      "ctaBackgroundColor": "#FF6A04",
      "ctaHoverBackgroundColor": "#E94F0D",
      "textWithArrowColor": "#FF6A04",
      "desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-desktop.webp",
      "tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-tablet.webp",
      "mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw-bg-mobile.webp",
      "discountOfferPlanCode": "fab-subs-quarterly-19",
      "overlayColor": "#0006",
      "discount": 25,
      "choices": [
        {
          "planCode": "fab-subs-quarterly-intro-1-thirtynine",
          "textColor": "#004585",
          "backgroundColor": "#E1F1FF",
          "borderColor": "#004585"
        },
        {
          "planCode": "fab-subs-quarterly-intro-10-thirtynine",
          "textColor": "#004585",
          "backgroundColor": "#CEE8FF",
          "borderColor": "#004585"
        },
        {
          "planCode": "fab-subs-quarterly-intro-16-thirtynine",
          "textColor": "#FF6A04",
          "backgroundColor": "#FFEBDF",
          "borderColor": "#FF6A04",
          "titleColor": "white",
          "titleBackgroundColor": "#FF6A04",
          "mostPopular": true
        }
      ],
      "useClassicCheckout": true,
      "popupForm": {
        "backgroundColor": "white",
        "secondaryColor": "#7A90A3",
        "closeIconColor": "#7A90A3",
        "timer": {
          "textColor": "#7871E4",
          "backgroundColor": "white",
          "buttonBackgroundColor": "linear-gradient(to right, #574DFF, #BFBAFF)",
          "buttonColor": "white",
          "boxShadow": "0 0 20px #5a50ff26",
          "circlePrimaryColor": "#6455FE",
          "circleSecondaryColor": "#BFBAFF",
          "circleBackgroundColor": "#EFF4FF",
          "ctaText": "Claim your free trial now"
        },
        "form": {
          "placeholderColor": "#7A90A3",
          "inputColor": "#14191d",
          "inputBorderColor": "#E8EAED",
          "ctaBackgroundColor": "linear-gradient(180deg, #00BAAF, #00BA82)",
          "ctaTextColor": "white",
          "noCommitmentsTextColor": "rgb(122, 144, 163)",
          "linkColor": "rgb(58, 68, 230)",
          "cvvHelperIconColor": "#7A90A3",
          "ctaText": "START MEMBERSHIP"
        },
        "planDetails": {
          "titleColor": "rgb(37, 28, 147)",
          "titleBackgroundColor": "rgb(236, 234, 255)",
          "textColor": "#14191D",
          "subtitleColor": "#4F6171",
          "hrColor": "#E8EAED",
          "discountColor": "white",
          "discountBackgroundColor": "linear-gradient(270deg,#88d16e,#07cb99)",
          "cycleColor": "#A6B5C2"
        },
        "tabs": {
          "activeTextColor": "white",
          "textColor": "#4f6171",
          "activeBackgroundColor": "#130a7e",
          "backgroundColor": "#f1f3f5"
        },
        "terms": {
          "type": "with-plan-details",
          "linkColor": "rgb(44, 95, 255)",
          "backgroundColor": "rgb(246, 245, 255)",
          "textColor": "rgb(92, 81, 206)"
        }
      },
      "discountOffer": {
        "desktopBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_desktop.webp",
        "tabletBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_tablet.webp",
        "mobileBackground": "https://c.thefab.co/web-onboarding/fabulous/pwyw_popup_discount_bg_mobile.webp",
        "ctaTextColor": "white",
        "ctaBackgroundColor": "#00CC9F",
        "ctaHoverBackgroundColor": "#00A87F",
        "textColor": "white",
        "titleColor": "#FF8762",
        "closeIconColor": "white",
        "discount": 50,
        "planDetails": {
          "borderColor": "#FF8762",
          "backgroundColor": "white",
          "primaryColor": "#343D45",
          "secondaryColor": "#7A90A3"
        }
      },
      "postPurchaseParams": {
        "continuationLink": "/download-mobile.html",
        "upsellFlowId": "fabulous_upsell_bundle_5apps_49_no_pdf_expert"
      }
    },
    {
      "type": "trialExplanation",
      "stepId": "trialExplanation",
      "backgroundColor": "linear-gradient(180deg, #FFF 0%, #FFF1E9 100%)",
      "header": "How your trial works?",
      "logo": "https://storage.googleapis.com/c.thefab.co/fabulous/logos/img_logo_fabulous.png",
      "trial": {
        "cta": {
          "text": "Continue",
          "backgroundColor": "#FF6A04",
          "textColor": "white"
        },
        "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/trial-explanation/img_trial_fabulous_1.png",
        "primaryColor": "#FF6A04",
        "secondaryColor": "#FFC2A0",
        "steps": [
          {
            "title": "Today",
            "description": "Gain full access to Clarify for 14 days. Watch it supercharge your focus and productivity."
          },
          {
            "title": "Day 12",
            "description": "Set a reminder for yourself that your trial is about to end."
          },
          {
            "title": "Day 14",
            "description": "End of the your trial. You will be charged unless you cancel beforehand."
          }
        ]
      }
    },
    {
      "checkoutType": "normal",
      "type": "checkout",
      "stepId": "discount-offer",
      "backgroundColor": "white",
      "planCode": "fab-subs-quarterly-19",
      "logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
      "textColor": "#14191D",
      "secondaryColor": "#7A90A3",
      "discount": 50,
      "maxWidth": "728px",
      "useClassicCheckout": true,
      "timer": {
        "textColor": "#7871E4",
        "backgroundColor": "white",
        "buttonBackgroundColor": "linear-gradient(to right, #574DFF, #BFBAFF)",
        "buttonColor": "white",
        "boxShadow": "0 0 20px #5a50ff26",
        "circlePrimaryColor": "#6455FE",
        "circleSecondaryColor": "#BFBAFF",
        "circleBackgroundColor": "#EFF4FF",
        "ctaText": "Claim your free trial now"
      },
      "postPurchaseParams": {
        "continuationLink": "/download-mobile.html",
        "upsellFlowId": "fabulous_upsell_bundle_5apps_49_no_pdf_expert"
      },
      "form": {
        "placeholderColor": "#7A90A3",
        "inputColor": "#14191d",
        "inputBorderColor": "#E8EAED",
        "ctaBackgroundColor": "linear-gradient(180deg, #00BAAF, #00BA82)",
        "ctaTextColor": "white",
        "noCommitmentsTextColor": "rgb(122, 144, 163)",
        "linkColor": "rgb(58, 68, 230)"
      },
      "planDetails": {
        "titleColor": "rgb(37, 28, 147)",
        "titleBackgroundColor": "rgb(236, 234, 255)",
        "textColor": "#14191D",
        "subtitleColor": "#4F6171",
        "hrColor": "#E8EAED",
        "discountColor": "white",
        "discountBackgroundColor": "linear-gradient(270deg,#88d16e,#07cb99)",
        "cycleColor": "#A6B5C2"
      },
      "tabs": {
        "activeTextColor": "white",
        "textColor": "#4f6171",
        "activeBackgroundColor": "#130a7e",
        "backgroundColor": "#f1f3f5"
      },
      "terms": {
        "type": "with-plan-details",
        "linkColor": "rgb(44, 95, 255)",
        "backgroundColor": "rgb(246, 245, 255)",
        "textColor": "rgb(92, 81, 206)"
      }
    }
  ],
  "logic": []
}

Component Features

Timeline visualization of trial steps with exactly 3 steps
Customizable colors for timeline elements
Responsive design with mobile-first approach
Sticky CTA button on mobile, fixed position on desktop
Optional logo display at the top
Terms and Privacy links at the bottom
Support for custom background colors
Fallback to trial primary color for CTA if not specified

Design Notes

Timeline steps are displayed in a horizontal sequence on desktop and vertical on mobile
Each step is connected by a line using the secondary color
Trial image maintains a 53:40 aspect ratio
CTA button is sticky on mobile with a white background and shadow
CTA button is fixed at the bottom on desktop without shadow
All content is centered for better readability
Header and logo are displayed at the top of the page
Terms and Privacy links are displayed at the bottom with bullet point separator

Step Config

Trial Config

CTA Config

Example​

Component Features​

Design Notes​

Example

Component Features

Design Notes