Goal Choice Radio
goalChoiceRadio is a template that supports single-choice radio buttons.
| Key | Notes |
|---|---|
type | goalChoiceRadio |
stepId | Unique step id |
title | The step title |
subtitle | The step subtitle |
choiceBackgroundColor | The choices background color |
choiceTextColor | The choices text color |
hoverBackgroundColor | The background color on hovering one of the choice. |
selectedCheckboxBackgroundColor | The color of the selected choice. |
checkboxBackgroundColor | The color of the selected choice. |
backgroundImage | Background image for mobile |
desktopBackground | Background image for desktop |
choices | An array of the choices on that step "choices": [ { "name": "Yes", "value": "Yes" }, { "name": "No", "value": "No" } ] |
textColor | The main textColor on the page |
ctaText | The text of the main button |
ctaColor | The text color of the main button |
ctaBackgroundColor | The background color of the main button |
ctaHoverBackgroundColor | The background of the main button on hovering. |
backButtonColor | The text color of the back button |
backButtonBackgroundColor | The background color of the back button |
backButtonText | The text of the back button |
Example
goalChoiceRadio Step
{
"type": "goalChoiceRadio",
"stepId": "goal_choice_radio",
"title": "Do you exercise regularly?",
"textColor": "#2F0191",
"feedbackType": "radio",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E7EBFF",
"choiceBackgroundColor": "#F5F7FF",
"choiceTextColor": "#2F0191",
"selectedCheckboxBackgroundColor": "##2F0191",
"checkboxBackgroundColor": "#FFF",
"backgroundImage": "https://c.thefab.co/fabulous/onboarding/fabulous_web/amber_mobile.jpg",
"desktopBackground": "https://c.thefab.co/fabulous/onboarding/fabulous_web/amber_desktop.jpg",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#FF8E21",
"ctaHoverBackgroundColor": "#E67100",
"backButtonColor": "#FFA133",
"backButtonBackgroundColor": "#FFF8F1",
"backButtonText": "Back",
"choices": [
{
"name": "Yes",
"value": "Yes"
},
{
"name": "No",
"value": "No"
}
]
},
