Custom Image Radio Button List Web Flow Template

webflow0.png

Overview

This Web Flow template 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, it can be further tailored to provide a customized experience. App builders can use all three prompts and connect them through the 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 controls displaying the title and the subtitle.
  • A Dropdown List control presenting the options to the user (Inclusivity or Mood prompts)
  • A Show Example Button with the following Actions:

wp1.png

Static - Inclusivity 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.

wp2.png

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 (see values when clicked on the event that triggers the web flow from Journey Builder)
  • A Continue Button control that runs the Button Selected Event.

wp3.png

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.

wp4.png

Inputs

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

Of type Text

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

Events

The Button Selected Event contains the following Variable of type Text: 

  • 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.

wfevent.png

Use Cases

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