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"
        }
    ]
},

Example​

Example