Skip to main content

Multi Select

Multi-select steps allow users to select and unselect individual items. If the can_skip property is false on a multi-select step, this would mean that the user could choose not to select any items before moving on to the next step.

Multi-select steps won't automatically navigate. Users must manually navigate to the next step in the form flow after making their selections. When the user selects an item from a "multi-select" step type, the selected item will display a border or alternate styling to annotate that the item has been selected.

Multi-Select Card Sandbox​

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

Multi-Select List Sandbox​

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

tip

When set to true the property is_reset_item clears all previously selected values from a multi-select step. This is particularly useful for an "All of the Above" item.

settings.json
{
     "name_of_step": {
          "type": "multi-select",
          "layout": "cards",
          "is_reset_item": true,
          "style": "classic",
          "title": "",
          "dialogue_title": "",
          "dialogue_title": "",
          "items": []
     }
}
Skip Steps

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

Full Example

settings.json
{
     "settings_version": "1.0.3",
     "embed_height": {
        "desktop": "550px",
        "tablet": "520px",
        "mobile": "520px"
      },
     "account_id": 12821,
     "enable_link_check": true,
     "stripe_public_key": "",
     "steps": {
          "step_name_one": {
               // Single Select Step
               "title": "",
               "dialogue_title": "",
               "dialogue_title": "",
               "type": "single-select",
               "layout": "cards",
               "style": "classic",
               "items": [
                    {
                         "title": "",
                         "description": "",
                         "value": "Product"
                    },
                    {
                         "title": "",
                         "description": "",
                         "value": "Product Two"
                    }
               ]
          },
          "step_name_two": {
               // Multi Select Step
               "title": "",
               "dialogue_title": "",
               "dialogue_title": "",
               "type": "multi-select",
               "layout": "cards",
               "style": "classic",
               "items": [
                    {
                         "title": "",
                         "description": "",
                         "value": "Product Three"
                    },
                    {
                         "title": "",
                         "description": "",
                         "value": "Product Four"
                    }
               ]
          }
     }
}

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: "multi-select"
style
string (AppState.ISelectItemsLayout)
Enum: "classic" "modern"
cards_to_show
number

The number of cards to show in the carousel

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

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.

{
  • "multi_card_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: "multi-select"
style
string (AppState.ISelectItemsLayout)
Enum: "classic" "modern"
cards_to_show
number

The number of cards to show in the carousel

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

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.

{
  • "multi_card_classic_step": {
    }
}