Picture choice

Picture choice lets visitors answer by selecting from a grid of image cards. Use this block when the image is the primary cue — product variations, brand logos, room types, plan tiers shown as cards, or anything where a picture explains the choice better than a label.

Applies to: Builder Widget Results Contact fields

Best for

Visual product or plan selection, brand logo selection, mood boards, room or service galleries, and any choice where the image explains more than the label.

Stores

Selected option IDs, labels, and values in workflow answers. Optionally also updates a contact field.

Routes

Single-choice options can each connect to a different path. Multiple-choice selections continue together.

Use Buttons when the label is the primary cue

If the option is best described by its label and an icon or color is enough, use the Buttons block instead. Picture choice is for image-first selection where the picture carries most of the meaning.

At a glance

Capability	Supported
Single-choice answers	Yes
Multiple-choice answers	Yes
Per-option routing	Single-choice only
Contact field updates	Yes, when bound to a compatible field
How to add images	Paste an image URL into each option
Per-option label and stored value	Yes
Grid (horizontal) and list (vertical) layouts	Yes

Example

A wedding-planner workflow asks:

Which venue style do you prefer?

The visitor sees a grid of three image cards: a beach, a garden, and a ballroom. They tap the garden card and the workflow follows the path connected to that option, sending the lead straight to the garden-venues specialist.

When to use Picture choice

Use Picture choice when the image is the primary information the visitor needs to make a decision.

Good use cases:

• Visual product selection (a product variant, a color swatch, a packaging option).
• Plan or tier selection where each option has a representative image.
• Brand or partner selection (the visitor recognizes a logo).
• Room types, service categories, or examples that are easier to recognize as images than to read as text.

Use a different block when:

• The label alone is enough: use Buttons (an icon or color is often plenty).
• The visitor needs to upload their own image: use File upload.
• The choice depends on free-form text: use Text input.
• The choice is a number or rating: use Number input or Rating input.

Add a Picture choice block

1. Open a workflow and go to the builder.
2. In the block sidebar, open Questions.
3. Add Picture Choice to a step.
4. Write the question text visitors should see before the cards.
5. Add, rename, remove, or reorder the options.
6. For each option, paste the image URL and write a label.
7. Choose where to save the answer.
8. Choose single-choice or multiple-choice behavior.
9. Choose grid or list layout.
10. Connect the next path.

Configure the question

The question text appears immediately before the visitor sees the cards. Keep it specific and answerable.

Good:

Which venue style do you prefer?

Avoid:

What kind of vibe?

Picture choice works best when the visitor knows exactly what to evaluate when scanning the cards.

Configure options

Each option has an image, a label, and an optional stored value.

You can:

• Rename an option’s label.
• Replace an option’s image by editing its URL.
• Drag options to reorder them.
• Add another option.
• Remove an option when at least one option remains.

Image

Each option must have an image URL. The widget loads the image from the URL you provide and displays it inside the option card. Use a stable, publicly reachable URL — DialogMaker does not host the image for you.

Good image URLs:

• Are publicly reachable without login.
• Use a stable host (a CDN, your own image storage, or a marketing-asset service).
• Are sized for card display (around 500-1000 px on the longest side is usually enough).

Recommended image practices:

• Use the same aspect ratio for every option in the same block — visitors find consistent grids easier to scan.
• Compress images for the web. Heavy image files slow down the widget on mobile.

Stored value (optional)

Each option has a Value field, distinct from its label. By default, the value saved when a visitor selects an option is the same as the option’s label. Set a custom value when you want the saved value to stay stable even if you rename the label later.

Visitors never see the value — they only see the label and the image. The value appears in the workflow answer’s values field and in any contact field bound to the answer, which is what reporting, automations, and integrations read.

Common reasons to set a custom value:

• You want to rename a label without breaking historical reports or downstream automations.
• The answer flows to an integration or contact field that expects a specific format, such as a slug, code, or short identifier.
• Two differently-phrased options should produce the same stored value.

Set values once, then leave them alone

If you use answers for reporting or automation, set a value when you create the option and avoid changing it. Labels and images can change freely without affecting downstream systems as long as the value stays the same.

Save the answer

Picture choice answers are always saved in workflow answers. You can also bind the answer to a compatible contact field.

The editor shows Workflow answers only when the answer should stay in the workflow result and not update the contact. Choose a compatible contact field when the selection should update the visitor’s contact profile.

For example:

Question	Suggested contact field
Which venue style do you prefer?	Venue style (custom select)
Which product variant did you choose?	Variant (custom select)
Which categories interest you?	Interests (custom multi-select)

Selection mode

Single choice

Use single choice when the visitor should pick exactly one image card.

Single-choice answers submit as soon as the visitor taps a card — there is no Continue button. Each option can connect to its own path: when the visitor selects an option, the workflow follows that option’s connected path. If the option does not have its own path, the workflow continues along the step’s default path.

Multiple choice

Use multiple choice when the visitor can select more than one image card.

Multiple-choice answers do not submit until the visitor presses Continue, so visitors can adjust their selection before sending. All selections continue together along the step’s default path. To branch after a multiple-choice answer, add a Condition block later and check the saved values.

Layout

Picture choice can render as a horizontal grid or a vertical list.

Layout	Use when
Grid (horizontal)	The default for visual selection. Cards sit side by side and visitors scan the grid as a whole.
List (vertical)	Cards stack one above the other. Use when each card needs more vertical space, when there are only two options, or when mobile readability is the priority.

For most visual product selectors, the grid layout is the right choice.

Common patterns

Visual product picker

Show product variants or plan tiers as image cards and route each option to its own follow-up path in single-choice mode.

Style or mood selection

Use single choice with three to six cards (venue styles, design moods, palette directions). Pair with Lead qualification to segment by preference.

Multi-interest capture

Use multiple choice for product categories, services, or interests. Add a Condition block later if the workflow needs to branch by selected values.

Brand or partner selection

Show recognizable logos as image cards when the visitor needs to confirm a brand or pick a known partner.

Answer output

When a visitor submits a Picture choice answer, DialogMaker stores the selected options as a structured value identical in shape to the Buttons block.

{
  "ids": ["venue-garden"],
  "labels": ["Garden"],
  "values": ["garden"]
}

Field	Meaning
ids	Internal option IDs used by the workflow.
labels	The visible labels of the selected options.
values	Option values. When no explicit value is set, DialogMaker uses the label.

For multiple choice, each array can contain more than one entry.

Routing behavior

Mode	Routing behavior
Single choice	The selected option can route directly to a connected target.
Multiple choice	The workflow continues along the step’s default path after the visitor presses Continue.

Before publishing, each single-choice option must connect to a target. If an option is missing a target, publish review reports a missing branch target.

Validation and limits

DialogMaker rejects invalid Picture choice answers when:

• The answer is not a Picture choice answer.
• A single-choice block receives zero or multiple selections.
• A selected option does not exist on the block.
• The same option is submitted more than once.
• The visitor submits without selecting an option.

Troubleshooting

Problem	What to check
An image card shows a broken image	Check the image URL. It must be publicly reachable, served over HTTPS, and not blocked by hotlink protection on the host.
The workflow does not publish	In single-choice mode, make sure every option is connected to a target.
The workflow does not branch after multiple selection	Multiple-choice answers continue together. Add a Condition block after the Picture choice block.
The answer is missing from contact information	Make sure Save answer is bound to a compatible contact field. Workflow answers are still stored even without a contact field binding.
Visitors cannot continue	Make sure at least one option is selected. Multiple-choice visitors must press Continue.

Related articles

• Question blocks overview
• Answer storage
• Buttons
• Condition