3STORY3STORY Logo
Back to Help

Flow Steps

Flow Steps define the structure and content of a flow. They work similarly to a slideshow or presentation, going slide to slide, but with the benefit of being multipath. This means that you can take the user down different routes based on their inputs and interactions. Each Flow Step is like a slide in a slideshow and can be configured with different titles, text, images, action buttons, and more.

Related to Flow Steps

Scene

Select the Scene that defines the layout and style of the Flow Step.

Note: Flow Steps can only select Scenes with the same Theme as the Flow, so check that the Flow and Scene are using the same Theme.

Speech

Add a Speech bubble of text to the Flow Step.

If the Scene has a 3D Character and Voice defined, this text will be spoken by the character when the step is viewed.

Image

Add an image to the Flow Step, this differs from the Background Image on a Scene as this image is in line with the content of the Flow Step, not as the background.

If you wish to use a different background image on a step (or a few steps), you should create another Scene (you can copy existing scenes), and add a different background image to the new Scene. Then you can select the new Scene on the Flow Step.

Embed Video

Add an embedded video to the Flow Step. The URL provided should be the correct Embed URL that is used by the host website.

You should be able to find this URL by using the share/embed options on the host website.

Example Embed URLs for common video hosting websites:

  • YouTube: https://www.youtube.com/embed/aqz-KE-bpKQ
  • Vimeo: https://player.vimeo.com/video/1084537?h=b1b3ab5aa2

Embed URL

Add an embedded website to the Flow Step. This allows you to embed websites, hosted files (e.g. PDF documents), and more.

Body

Add a block of body text to the Flow Step. Useful if you wish to display a large amount of paragraphed text to the Flow Step, such as instructions or detailed text.

Input Fields

Add multiple Input Fields to the Flow Step. This is an easy way to capture user information such as Name, Age, and Location/Area. This information is not stored, copied, or shared, it only exists on the user's device.

You can reference the information captured in these fields using Speech Tags this allows you to capture information such as "Name" in an Input Field and populate Speech text with it.

Action Buttons

Add multiple Action Buttons to the Flow Step. Use this for a simple Next/Continue action, or give the user multiple options, from which you could navigate to different flows or steps using Click Actions.

Action buttons have an optional "Field Name". This works similarly to the Input Field's Field Name, except the value is not provided by the user, but the button has a value associated with it. For example, you could provide button options:

  • Button Label: "Blue", Field Name: "Color", Field Value: "blue"
  • Button Label: "Red", Field Name: "Color", Field Value: "blue"

When the user clicks one of these buttons, the Field Name and Value is captured and can be used with Speech Tags. So later we can recall the value of Field Name "Color".

Click Actions

Click actions are triggered when the user clicks on an Action button. This is one way to navigate between flows, steps, and URLs.

  • Go to Flow Takes the user to the selected flow
  • Go to Step Takes the user to another step within this flow
  • Go to URL Opens the provided URL in a new browser tab

Click Action - On Condition

Click actions can be provided conditions, which must be true for the action to go ahead.

Read more about Action Conditions

Step Events

Set up events and actions on the entire step, rather than on specific Action Buttons. This may suit your application better.

Wait

Triggers an action after waiting for a defined amount of time after the Flow Step is viewed.
Milliseconds (ms) = Seconds x 1000
1000 ms = 1 Second
500 ms = 1/2 Second
5000 ms = 5 Seconds

Click anywhere Trigger an action when the user clicks anywhere in the scene, this could work as an alternative to having "Continue" buttons to trigger an action.

The actions triggered by the Event are the same as those provided in Action Button Click Actions

Step Transitions

Add transitions to your Flow Step features

Select feature

Select what part of the Flow Step to apply a transition

Entrance

Choose which transition to apply to the feature on the entrance to the Flow Step.

Exit

Choose which transition to apply to the feature on the exit of the Flow Step.

Duration

Choose how fast the animation should be.