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!

Changing Options

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

Add a label for each option and a variable to grant an easy evaluation and further processing of your responses. This might be also important if you're planning to use our calculation feature. Find out more about that feature here.

Furthermore, you can adjust the amount of displayed options in each row by adjusting the columns in the Appearance column of the Edit section. You can select up to five options to be displayed in a row. This might be an important tool to shape your flow according to your needs. Additionally you can adjust image sizes just below by selecting fixed image mode.

Conditional Logic

With the image selection, you can use our conditional logic tool. This tool allows you to create specific, differentiated paths depending on which answers your customers choose. This way, your customers are guided to the questions that are tailored to them and do not have to answer questions that are irrelevant to them. The tool also helps you to keep your flow lean so that you don't have to place duplicate screens. Find out more about conditional logic here.

Designing the Picture Choice Block

There are multiple ways to adjust the block even more than described above. Just head to the Design tab and start working on the Presets. In some plans, you can dive even deeper into all spheres of design & look. When working on the presets, you can head to the Styles section on top and start editing every little detail of each section.

Last but not least you can adjust hyphenation of the displayed text. For new flows the default hyphenation is set to off by default, so there are no words breaking. This is only the case for newly created flows as the setting is on flow-level.

For older flows, there is a setting in the Styles section of the block, where you can change the hyphenation manually.

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.
Columns (desktop): Decide how many columns should be displayed in one row on desktop.
Columns (mobile): Decide how many columns should be displayed in one row on mobile.
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.