With the Picture Choice block, you are able to provide predefined answers to your questions. This block is similar to Multiple Choice but provides you with the option to make it more intuitive by adding images and icons to an answer.

Adding the Picture Choice Block

In the blocks tab, navigate to Input and drag the picture choice block into your heyflow
Adjust the settings such as navigation as needed
Change the icon of the option or upload your own image
Add a system label to make sure you are processing the data in a meaningful way.
Just publish your heyflow and you’re good to go!

Label, Add Options, and Reorder

In the content column, you can give further information or directions in the label area, add more options by clicking the plus new option button, and reorder your existing options by grabbing the six dots to the far right of each choice.

Edit Options

General

Selection: Select Single to allow the user to select exactly one option. Select Multiple if you want to allow the user to select multiple options. Note: Make sure to disable Navigate on option click if you want to allow multiple selections.
Sensitive: When activated, values will not be saved in our database (see here).
Required: If activated, your users must make a selection before they can continue clicking in the flow.

Navigation

Navigation: Select the action that takes place when you click on one of the options. To do this, Navigate on option click should be activated. Otherwise, navigation is only triggered when the Navigation button is clicked. Navigate to the next screen of your flow or go to a specific screen of your flow. Or define specific rules for the navigation that react to the user's input. Alternatively, you can select no action.
Navigate on option click: Navigation is triggered immediately with a click and without clicking on a button. However, based on experience, we recommend placing a button (more information on our best practices here).

Spacing

Width: Here you can adjust the maximum spread of the block and choose between S, M, L and maximum width.
Top, Bottom, Left, Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

Visibility: Here you can choose whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background color: You can select a colour to be used as the background for the block.
Align label: Choose whether your previously selected label is left-aligned, centred or right-aligned, above the multiple selection.
Align options: Applicable if the options are not equally distributed on all rows (e.g., 3 options in the first row and 2 options in the second row). This then applies to the options in the last row.
Show 2nd line: Adds another line below the label to all options.
Preselection: If you want some options to be preselected when the user reaches this screen.

Labels & Variables

System label: Choose a system label for the entire block. Also define a system label for each individual option of the block.
Variable: See Variable.

Min & Max

Enforce: Select one and/or two conditions for the number of options required. You can specify both the minimum and maximum number of options.

Tracking

Tracking activated: If activated, you can give each option an event name that will be sent to your other integrated tracking tools, such as Google Analytics. You can find more information about tracking here.