Benefits

A dynamic onboarding step component that displays a list of benefits and a main benefit with images. The component supports responsive design with different layouts for mobile and desktop views, featuring a grid of benefits with alternating image positions and a prominent main benefit section at the bottom.

Step Config

Key	Description	Is Optional?
type	Should be benefits to identify this step type.	Required
stepId	Unique step identifier.	Required
backgroundColor	The background color of the page.	Optional
logo	URL to the logo image to be displayed at the top of the step.	Optional
title	Title text to show at the top of the step.	Required
benefits	Array of benefit items to display in the grid. Each benefit requires title, description, image (mobile), and desktopImage.	Required
mainBenefit	The main benefit to be displayed prominently at the bottom. Requires title, description, and image.	Required
cta	The CTA configuration to be added (see CTA Config section below).	Required

Benefits & MainBenefit Config

Key	Description	Is Optional?
title	String text.	Required
description	String description.	Required
images	Image URL.	Required

CTA Config

Key	Description	Is Optional?
text	CTA text.	Required
textColor	CTA text color.	Required
backgroundColor	The background color of the CTA.	Required

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": "benefits",
      "stepId": "benefits",
      "backgroundColor": "linear-gradient(180deg, #FFF 0%, #FFF1E9 100%)",
      "title": "What you will get with Fabulous",
      "logo": "https://storage.googleapis.com/c.thefab.co/fabulous/logos/img_logo_fabulous.png",
      "benefits": [
        {
          "title": "Healthy habits & routines",
          "description": "The life you've always wanted, with the help of behavioral science.",
          "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/benefits/img_benefits_fabulous_1.png",
          "desktopImage": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/benefits/img_benefits_fabulous_1_desktop.png"
        },
        {
          "title": "Improved well-being",
          "description": "Stepwise programs to enhance health, self-esteem, relationships & more.",
          "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/benefits/img_benefits_fabulous_2.png",
          "desktopImage": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/benefits/img_benefits_fabulous_2_desktop.png"
        },
        {
          "title": "Coaching sessions",
          "description": "On-demand coaching audios & 1-on-1 personalized support (on upgrade).",
          "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/benefits/img_benefits_fabulous_3.png",
          "desktopImage": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/benefits/img_benefits_fabulous_3_desktop.png"
        }
      ],
      "mainBenefit": {
        "title": "Tools that support your goal",
        "description": "Full access to all meditations, guided workouts, deep work rooms, bedtime stories & more.",
        "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/image/benefits/img_benefits_fabulous_4_desktop.png"
      },
      "cta": {
        "text": "Continue",
        "backgroundColor": "#FF6A04",
        "textColor": "#FFFFFF"
      }
    },
    {
      "checkoutType": "discount-offer",
      "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

• Responsive design with different layouts for mobile and desktop views
• Grid layout for benefits with alternating image positions
• Prominent main benefit section with large image
• Optional logo display at the top
• Sticky CTA button on mobile, fixed position on desktop
• Terms and Privacy links at the bottom
• Support for both mobile and desktop images for each benefit

Design Notes

• Benefits are displayed in a grid layout on desktop and stacked on mobile
• Images alternate between left and right positions for visual interest
• Main benefit is displayed prominently at the bottom with a larger image
• CTA button is sticky on mobile and fixed at the bottom on desktop
• All text is centered on desktop view for better readability
• Images are optimized for both mobile and desktop viewing