# Custom Image Radio Button List Web Flow Template

![webflow0.png](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-67e02583545974c85f592771b392d292678add45%2Fcustom-image-radio-button-list-web-flow-template-v1715-0.png?alt=media)

### Overview

This [Web Flow template](../building-apps/kitcloud/web-flow-templates) has four Web Pages with pre-configured components presenting different prompts, each with three buttons with customizable images and labels for the user to pick one.

From [Activity Builder](../studio/builder-bar/web-builder), it can be further tailored to provide a customized experience. App builders can use all three prompts and connect them through the [Events](../studio/events) in each Web Page or delete the ones they don’t need.

### Web Flow template components

This Web Flow contains four Web Pages with the following components:

#### Example Chooser

* Two [Label](../web-controls/label-web-control) controls displaying the title and the subtitle.
* A [Dropdown List](../web-controls/dropdown-list-web-control) control presenting the options to the user (Inclusivity or Mood prompts)
* A Show Example [Button](../web-controls/button-web-control) with the following Actions:
  * A [Condition](../actions/the-condition-action) based on the user selection from the Dropdown List.
  * A [Navigate to Web Page](../actions/navigate-to-web-flow-action) Action leading the user to the next Web Page.

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-895ff3be1480b5c3834b3c325a93fbc2e077c092%2Fcustom-image-radio-button-list-web-flow-template-v1715-1.png?alt=media)

#### Static - Inclusivity Prompt

* A Label control displaying the title.
* A [Container](../web-controls/container-web-control) for the [Button Cells](../web-controls/button-cell-web-control).
* Three button cell controls with a static [Image](../web-controls/image-web-control) and Label each.
* A Continue Button control.

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-31079aa3bb1a6fe0495f31ea618de183f960af67%2Fcustom-image-radio-button-list-web-flow-template-v1715-2.png?alt=media)

#### Dynamic Three Buttons Prompt Web Page

* A Label control displaying the instructions for the app builder.
* A container for the Button Cells.
* Three button cell controls with an Image control ready to be dynamically populated based on the values of the [Web Flow Variables](../working-with-data/variable-scopes) (see values when clicked on the event that triggers the web flow from [Journey Builder](../studio/builder-bar/journey-builder))
* A Continue Button control that runs the Button Selected Event.

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-b707e9d04f2b4189fadfa7a3a9d62a1e56bc7b91%2Fcustom-image-radio-button-list-web-flow-template-v1715-3.png?alt=media)

#### Static - Happy Sad Neutral Prompt

* A Label control displaying the title.
* A container for the Button Cells.
* Three button cell controls with a static Image and Label each.
* A Continue Button control.

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-051f5e2c1252149e87b7690dccf9f4b32f6ccc25%2Fcustom-image-radio-button-list-web-flow-template-v1715-4.png?alt=media)

#### Inputs

This Web Flow has the following Variables saving the information and choices of the user:

Of type [Text](../variable-data-types/the-text-variable-data-type)

* promptTextRight
* promptTextLeft
* promptTextCenter
* selection
* question
* promptImageLeft
* promptImageRight
* promptImageCenter

#### Events

The Button Selected Event contains the following Variable of type Text:&#x20;

* selection

This Event is created as a Web Flow Event and, in Journey Builder, an action or a node can be added to it to continue the application’s path.

![](https://1191388742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhOn9CLWoV9VfJeM5EDAa%2Fuploads%2Fgit-blob-d60413dce5f041a0f376b62b93ee542148febdcc%2Fcustom-image-radio-button-list-web-flow-template-v1715-5.png?alt=media)

### Use Cases

* Allow the app builder to present the user with different scenarios with options from which to choose.
