Ultra Pages

We have two types of Ultra pages:

platinum_ultra - one-step page
ultra_default - two-step page
access-all-apps - two-step page

These templates are used to support the pages in this design:

Figma design (platinum_ultra)
<https://www.figma.com/design/fCbYBLRrLyT0ep7THkuwcJ/Ultra-Membership-Bundle?node-id=768-5176&m=dev> (ultra_default &access-all-apps)

Using Ultra pages in the onboarding

The ultra pages are a type of platinum offer, so to add it as a step to the onboarding, you’ll need to specify platinumType for the step needed:

{
      "stepId": "ultra",
      "type": "platinum",
      "platinumType": "platinum_ultra",
      "plan": "fab-subs-bimonthly-normal-bundleapps-ultra-49",
      "discountedPlanCode": "fab-subs-bimonthly-discount-bundleapps-upgrade-59-p1"
}

Using Ultra pages as standalone pages

Ultra can also be used as standalone pages in the upsell flows:

Pages pathnames:

/offers/platinum/fabulous/ultra platinum_ultra - one-step page
- Link in staging:
```
https://start.thefabulous-staging.co/offers/platinum/fabulous/ultra
```
/offers/ultra/fabulous/control (type ultra_default - two-step page)
- Link in staging:
```
https://start.thefabulous-staging.co/offers/ultra/fabulous/control
```
/offers/ultra/fabulous/access-all-apps (access-all-apps two-step page)
- Link in staging:
```
https://start.thefabulous-staging.co/offers/ultra/fabulous/access-all-apps
```

/offers/ultra/fabulous/ultra-letter (3-step page)

Link in staging:

https://start.thefabulous-staging.co/offers/ultra/fabulous/ultra-letter

[!IMPORTANT] Another variant that we can use with the ultra_default pages is to use them without the features by using the params hideFeatures:
https://start.thefabulous-staging.co/offers/ultra/fabulous/control?hideFeatures=true
This variant is the same as the default/control one; it doesn’t have the features card:

Using a different plan code

The default plan code used with the Ultra pages is: fab-subs-bimonthly-normal-bundleapps-ultra-49, but you can override it by passing the plan param with the standalone link or the onboarding step.

To show a discounted offer on any of the pages, you’ll also need to add a discountedPlanCode param, or add it directly in the onboarding step:

https://start.thefabulous-staging.co/offers/platinum/fabulous/ultra?plan=fab-subs-bimonthly-discount-bundleapps-upgrade-59-p1&discountedPlanCode=fab-subs-bimonthly-normal-bundleapps-ultra-49

The default JSON used in platinum_ultra

{
  "platinumType": "platinum_ultra",
  "backgroundColor": "#161023",
  "planCode": "fab-subs-bimonthly-normal-bundleapps-ultra-49",
  "textColor": "#9C8AB6",
  "animation": {
    "url": "https://c.thefab.co/web-onboarding/fabulous/rive/ultra/ultra_vip_letter_%26_card_p2_v40_exta_padding.riv",
    "renderer": "wegl",
    "autoplay": true,
    "texts": {
      "name": "{{NAME}}"
    },
    "fit": "fill"
  },
  "ctaText": "Confirm for {{SETUP_FEE}}",
  "ctaTextColor": "#19223E",
  "ctaBackgroundColor": "linear-gradient(53deg, #EDE8FF -19.57%, #87A7FF 48.59%, #FEB0FE 115.47%)",
  "ctaHoverBackgroundColor": "linear-gradient(rgba(35, 15, 153, 0.1), rgba(35, 15, 153, 0.1)), linear-gradient(53deg, #EDE8FF -19.57%, #87A7FF 48.59%, #FEB0FE 115.47%)",
  "bottomViewBackgroundColor": "#1e162f",
  "skipCta": {
    "text": "Skip offer",
    "backgroundColor": "#382A4F",
    "textColor": "#B3C0DD"
  },
  "summary": {
    "title": "Summary",
    "borderColor": "#BF92FF33",
    "titleColor": "white",
    "premium": [
      {
        "title": "Fabulous Premium",
        "subtitle": "Included",
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/icon_promotion_opt.jpg",
        "iconColor": "#D2D6EF"
      }
    ],
    "ultra": {
      "title": "Ultra Membership",
      "subtitle": "Auto renew at <span style=\"text-decoration:line-through;\">{{INITIAL_PRICE}}</span> {{PRICE}} /{{PERIOD_IN_MONTHS}} months after {{TRIAL_IN_DAYS}} days",
      "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/icon_fabulous_ultra_48_optimized.png"
    },
    "discountImageUrl": "https://c.thefab.co/web-onboarding/fabulous/special-price.svg"
  },
  "featuresList": {
    "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/check-mark-gradiant.svg",
    "title": "What do I get?",
    "borderColor": "#BF92FF33",
    "titleColor": "white",
    "items": [
      "Ultra Access to ALL Fabulous Suite Apps: Clarify, Elixir, Lune, Shape, Lumiere, Fountain during your membership.",
      "A friendly email reminder before your trial ends.",
      "A 25 min call with a real coach to create your Personalized Plan.",
      "No commitments. Cancel anytime."
    ]
  },
  "featuresCards": {
    "type": "columns",
    "title": "What’s included in the Ultra Membership?",
    "titleColor": "white",
    "cards": [
      {
        "text": "Start with a 25 min <span style=\"color:#83D8FF;font-weight:700;\">Live Coaching Call</span> to create a Personalized Plan and get ready for a life reset.",
        "textColor": "#D2D6EF",
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/ic_ultra_benefits.png",
        "backgroundColor": "linear-gradient(119deg, rgba(132, 137, 245, 0.16) 7.17%, rgba(132, 137, 245, 0.04) 95.44%)"
      },
      {
        "text": "Get Premium access to <span style=\"color:#83D8FF;font-weight:700;\">ALL Fabulous Apps</span> to make your plan a reality.",
        "textColor": "#D2D6EF",
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/ic_ultra_real_coach.png",
        "backgroundColor": "linear-gradient(119deg, rgba(132, 137, 245, 0.16) 7.17%, rgba(132, 137, 245, 0.04) 95.44%)"
      }
    ]
  },
  "featuresTabs": {
    "type": "default",
    "backgroundShadowImage": "https://c.thefab.co/web-onboarding/fabulous/ulta-bg-shadow.svg",
    "title": "Make your day count! Focus on this 90-Days Ultra Plan if you’re ready to completely transform your life, shift your mindset, and discover your true mission. ",
    "titleColor": "#9C8AB6",
    "subtitle": "It’s an investment you make once, then reap the benefits for the rest of your life. ",
    "subtitleColor": "white",
    "backgroundColor": "linear-gradient(153deg, rgba(132, 137, 245, 0.12) 2.26%, rgba(132, 137, 245, 0.03) 101.29%)",
    "tabs": {
      "title": "Unlock Deep Transformation",
      "subtitle": "Fabulous Ultra, powered by AI",
      "titleColor": "white",
      "subtitleColor": "#58C4F6",
      "premium": {
        "title": "Premium",
        "backgroundColor": "#1B172E",
        "textColor": "white",
        "activeColor": "white",
        "inactiveColor": "#4F4384",
        "items": [
          "One App Access",
          "No Ads",
          "Journeys / Guide / Coaching"
        ],
        "listIcon": "https://c.thefab.co/web-onboarding/fabulous/icon/white-checkmark.svg",
        "inactiveListIcon": "https://c.thefab.co/web-onboarding/fabulous/icon/ultra-close.svg"
      },
      "ultra": {
        "title": "Ultra",
        "backgroundColor": "linear-gradient(119deg, rgba(132, 137, 245, 0.16) 7.17%, rgba(132, 137, 245, 0.04) 95.44%)",
        "textColor": "white",
        "inactiveColor": "#4F4384",
        "activeColor": "linear-gradient(119deg, #FEB0FE, #8495F5)",
        "boxShadow": " 0 4px 20px 0 rgba(0, 0, 0, 0.25)",
        "listIcon": "https://c.thefab.co/web-onboarding/fabulous/icon/check-mark-gradiant.svg",
        "inactiveListIcon": "https://c.thefab.co/web-onboarding/fabulous/icon/check-mark-gradiant.svg",
        "items": [
          "One App Access",
          "No Ads",
          "Journeys / Guide / Coaching",
          "Access to 5 Premium Apps",
          "Ai Tools for behavior change",
          "25 min live Coaching call"
        ]
      }
    }
  },
  "accordion": {
    "titleColor": "white",
    "textColor": "#9C8AB6",
    "itemBorderColor": "rgba(191, 146, 255, 0.20)",
    "list": [
      {
        "title": "Clarify - An ADHD focus keeper",
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_icon_clarify_ultra.png",
        "items": [
          "Eliminate distractions like doom scrolling and other quick dopamine hits",
          "Replace them with healthy habits: workouts, meaningful projects, enriching conversations, or walks in nature",
          "Create a Deep Work Routine, free of distractions",
          "Manage ADHD: create structure, deal with emotion sensitivity, and master your hyperfocus"
        ]
      },
      {
        "title": "Shape - Nourish your body",
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_icon_shape-ultra.png",
        "items": [
          "Eliminate junk food from your diet",
          "Be mindful — don’t use food or drinks to cope with emotions",
          "Fuel your body with healthy, nutritious food",
          "Build a 16:8 fasting habit by following a cycle of fast and feast"
        ]
      },
      {
        "title": "Elixir - Find your purpose",
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_icon_elixir_ultra.png",
        "items": [
          "Set a meaningful goal to achieve over the next 90 days and write it down",
          "Choose one secret project that inspires you — whether it’s for your body, finances, or career",
          "Take one step each day toward your ideal outcome"
        ]
      },
      {
        "title": "Lune - Fix your sleep",
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_icon_lune_ultra.png",
        "items": [
          "Prioritize 7-8 hours of quality sleep each night",
          "Follow the 3-2-1 rule: no food 3 hours before bed, no liquids 2 hours before bed, and no screens 1 hour before bed",
          "Create a soothing bedtime routine to signal your body to unwind",
          "Block doom scrolling apps at your sleep time"
        ]
      },
      {
        "title": "Lumiere - Boost emotional health",
        "iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/img_icon_lumiere_ultra.png",
        "items": [
          "Manage negative thoughts and reframe them with AI",
          "Start each day with deep, mindful breaths",
          "Take a picture of something you’re grateful for daily",
          "Accept your emotions instead of bottling them up"
        ]
      }
    ]
  },
  "discountModal": {
    "type": "ultra",
    "title": "Did you know?",
    "subtitle": "Fabulous members who upgrade to Ultra Membership (Powered by AI) are <span style=\"color:#83D8FF;font-weight:700;\">40%</span> more likely to <span style=\"color:#83D8FF; font-weight:700;\">achieve their goals</span> in just <span style=\"color:#83D8FF; font-weight:700;\">3 months</span>.",
    "ctaText": "Continue",
    "ctaTextColor": "#19223E",
    "ctaBackgroundColor": "linear-gradient(53deg, #EDE8FF -19.57%, #87A7FF 48.59%, #FEB0FE 115.47%)",
    "ctaHoverBackgroundColor": "linear-gradient(rgba(35, 15, 153, 0.1), rgba(35, 15, 153, 0.1)), linear-gradient(53deg, #EDE8FF -19.57%, #87A7FF 48.59%, #FEB0FE 115.47%)",
    "backgroundColor": "#1E162F",
    "overlayColor": "rgba(7, 2, 12, 0.8)",
    "textColor": "#E7E9F9",
    "animation": {
      "url": "https://c.thefab.co/web-onboarding/fabulous/rive/ultra/ultra-rive-discount-offer.riv",
      "renderer": "webgl",
      "autoplay": true,
      "fit": "cover"
    },
    "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/ultra_shiny_card.svg"
  },
  "footerAnimation": {
    "url": "https://c.thefab.co/web-onboarding/fabulous/rive/ultra/fabulous_ultra_fable_25_3_31.riv",
    "renderer": "webgl",
    "autoplay": true
  }
}

[!NOTE] A rive Utrla page can be used in the flow as well:
https://start.thefabulous-staging.co/offers/ultra/fabulous/rive

Using Ultra pages in the onboarding​

Using Ultra pages as standalone pages​

Using a different plan code​

Using Ultra pages in the onboarding

Using Ultra pages as standalone pages

Using a different plan code