Skip to main content

Single Select

If a step is a single select, once the user selects their answer, the app will automatically navigate to the next step. The footer navigation button is automatically disabled on single-select step types.

Single Select Card Sandbox​

settings.json
{
     "name_of_step": {
          "type": "single-select",
          "layout": "cards",
          "style": "classic",
          "title": "",
          "dialogue_title": "",
          "items": []
     }
}

Single Select List Sandbox​

settings.json
{
     "name_of_step": {
          "type": "single-select",
          "layout": "list",
          "style": "classic",
          "title": "",
          "dialogue_title": "",
          "items": []
     }
}
info

Single-select steps will automatically navigate to the next step once the user has made their selection.

Skip Steps

Setting can_skip to true allows the user to skip the step, which can help reduce drop-off.

Schema Overview​

required
Array of objects (SelectItem)
layout
required
string (AppState.ILayout)
Enum: "cards" "list"

There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel.
Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

type
required
string
Value: "single-select"
style
string (AppState.ISelectItemsLayout)
Enum: "classic" "modern"
cards_to_show
number

The number of cards to show in the carousel. (only applies to the 'cards' layout)

cards_to_scroll
number

The number of cards to move on each carousel arrow click

max_width
number

This overrides the embed wide width maximums (only applies to the 'cards' layout)

dialogue_title
string

The dialogue title is the instructions or question text content for a given step.

dialogue_instructions
string

The dialogue title is the instructions or question text content for a given step.

title
string

The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.

can_skip
boolean

When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.

class
string

Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.

{
  • "single_list_classic_step": {
    }
}

Full Schema​

Loading ....

Example​

required
Array of objects (SelectItem)
layout
required
string (AppState.ILayout)
Enum: "cards" "list"

There are two available layouts for single select steps; cards and list. The cards layout consists of selectable retangular cards that are displayed in a single row grid format. Navigating between card options is handled by a horizontal carousel.
Cards contain text and/or images. The list layout is a list of selectable items with a vertical scroll. List items may also contain text and/or images. The list layout is better suited for smaller images such as icons while the cards layout is better suited to larger images.

type
required
string
Value: "single-select"
style
string (AppState.ISelectItemsLayout)
Enum: "classic" "modern"
cards_to_show
number

The number of cards to show in the carousel. (only applies to the 'cards' layout)

cards_to_scroll
number

The number of cards to move on each carousel arrow click

max_width
number

This overrides the embed wide width maximums (only applies to the 'cards' layout)

dialogue_title
string

The dialogue title is the instructions or question text content for a given step.

dialogue_instructions
string

The dialogue title is the instructions or question text content for a given step.

title
string

The title of the step which is the first text content on the top of the step view. The title should describe the current step in a short and concise way.

can_skip
boolean

When set to false the step is required to be answered before moving on to the next step. When set to true the user can skip answering the step.

class
string

Adds a custom CSS class name to the step to allow for easy CSS selection and modifications at the step level.

{
  • "single_list_classic_step": {
    }
}