Goal Choice

goalChoice in the template that supports showing goal choice steps in the web onboarding. These are the valid keys that its config accepts:

Key	Notes
`type`	`goalChoice`
`stepId`	Unique step id
`title`	Optional - text to show above the video
`subtitle`	Optional - text to show above the video
`choices`	An array of the choices to choose from. Example: `"choices": [` `{` `"name": "Develop core executive skills to better navigate life",` `"value": "develop_core",` `"nameColor": "#0a7799",` `"backgroundColor": "#FFFFFF",` `"hoverBackgroundColor": "rgba(255, 255, 255, 0.7)",` `"layerImage": "https://c.thefab.co/adhd/onboarding/recap2/structure.png",` `"strengthArea": "creative_flexibility"` `},` `{` `"name": "Better understand my ADHD",` `"value": "better_understand",` `"nameColor": "#0a7799",` `"backgroundColor": "#FFFFFF",` `"hoverBackgroundColor": "rgba(255, 255, 255, 0.7)",` `"layerImage": "https://c.thefab.co/adhd/onboarding/recap2/emotion_regulation.png",` `"strengthArea": "passionate_focus"` `},` `{` `"name": "Learn how to leverage my ADHD as a strength",` `"value": "leverage_strength",` `"nameColor": "#0a7799",` `"backgroundColor": "#FFFFFF",` `"hoverBackgroundColor": "rgba(255, 255, 255, 0.7)",` `"layerImage": "https://c.thefab.co/adhd/onboarding/recap2/productivity.png",` `"strengthArea": "structured_navigating"` `},` `{` `"name": "Connect with a community of people who also have ADHD",` `"value": "connect_community",` `"nameColor": "#0a7799",` `"backgroundColor": "#FFFFFF",` `"hoverBackgroundColor": "rgba(255, 255, 255, 0.7)",` `"layerImage": "https://c.thefab.co/adhd/onboarding/recap2/productivity.png",` `"strengthArea": "adaptive_resilience"` `}` `]` > [!IMPORTANT] Each choice also supports an `iconUrl` link to show icons for each choice when needed. NOTE: the keys `layerImage` and `strengthArea` are optional and only added when the goalChoice is included in the [Step Script](Step Script).
`useHTML`	Supporting HTML (e.g. `<br/>`) in the `title` and `subtitle` – default: `false`
`layerPriority`	An optional key when the answer of that step is included in the [Step Script](Step Script).
`backgroundColor`	The background color of the page
`backgroundImage`	To show a full background image
`textColor`	Required if the step has a `title` or `subtitle`
`innerBackgroundColor`	It could be used to show an inner bg color for the step on the desktop.
`showInnerProgressBar`	This is to show the progressbar as in the screenshot above
`riveOverlay`	check [Rive Intro Overlay](Components/Rive Intro Overlay)

Example of a goalChoice

{
      "type": "goalChoice",
      "title": "In general, how often do you feel joyful or happy?",
      "backgroundImage": "https://c.thefab.co/Elixir/goalchoice/img_goalchoice_butterfly_and_flower02_opt.jpg",
      "stepId": "joyful_happy",
      "subtitle": "",
      "key": "joyful_happy",
      "backgroundColor": "#ED7D92",
      "textColor": "#fff",
      "desktopBackground": "https://c.thefab.co/paged-content-editor/butterfly_pink_desktop.jpeg",
      "choices": [
        {
          "name": "Rarely - I struggle with finding happiness",
          "value": "rarely",
          "backgroundColor": "#FFF",
          "hoverBackgroundColor": "rgba(255, 255, 255, 0.7)"
        },
        {
          "name": "Occasionally - I experience happiness in small doses",
          "value": "occasionally",
          "backgroundColor": "#FFF",
          "nameColor": "#2f0191",
          "hoverBackgroundColor": "rgba(255, 255, 255, 0.7)"
        },
        {
          "name": "Often - I experience happiness on a regular basis",
          "value": "often",
          "nameColor": "#2f0191",
          "backgroundColor": "#FFF",
          "hoverBackgroundColor": "rgba(255, 255, 255, 0.7)"
        },
        {
          "name": "Almost always - I experience happiness almost every day",
          "value": "always",
          "nameColor": "#2f0191",
          "backgroundColor": "#FFF",
          "hoverBackgroundColor": "rgba(255, 255, 255, 0.7)"
        }
      ]
    }