How to build a Flow: using the Flow Builder

Accessing the Flow Builder

The Flow Builder is a powerful tool within ReelFlow that enables users to design, customize, and manage interactive video experiences directly.

This guide explains how to build, edit, and configure Flows using the Flow Builder.

1. Navigate to your ↗️ Flows in the ReelFlow Dashboard, from the side navigation.
2. Click on any Flow to enter the Flow Builder.
3. Press Edit to begin making changes to the Flow.

What are Flows, Steps and Action Buttons

Every Flow consists of one or more Steps; these are glued together to create a "chose your own adventure" experience - using Action Buttons.

An Action Button in a Flow will take your visitor to another a Step, or some other action. Other Step Actions can include as scrolling down to another location on the webpage, playing the next video in a Flow, or opening a chat tool for your visitor.

Each Step can have up to three Action Buttons. We track button click activity for each Flow , and you will be able to track it in your Performance metrics.

Which Step Action is the correct one for your needs?

• Show & play a video Immediately plays a specific video, continuing the visitor’s journey through the Flow.
• Redirect to webpage Immediately redirect the visitor to another page on your website (you can add a different Flow to that page) or an external URL. You can set it to open in a new tab if you wish.
• Scroll within page Move the page to another location through scrolling. Optionally you can configure this step to also close the Player. You will need a HTML anchor on the page to scroll to. Learn about this in the section below - Scroll within page: setting the location to scroll to.
• Scroll within page then play another video Move to another location on the same page through scrolling, but this time also play another video. You will need a HTML anchor on the page to scroll to. Learn about this in the section below - Scroll within page: setting the location to scroll to.
• Start a chat closes ReelFlow, and opens up a chat tool such as Intercom, Hubspot Chatflows or another chat tool of your choosing. You must already have the tool setup on the page. You can also use our Player API to connect it to any other chat tool you choose. - Learn about setting up your chat service. 
• Close the Player

Adding Steps to a Flow, editing Steps & using Step Settings

1. Click Add Button on the Flow Builder canvas to create a new button and corresponding Step.

2. Click on the Step. From the flyover menu, select an Action for the Step:

   • Show & play a video reel
   • Redirect to webpage
   • Scroll page
   • Scroll within page then play another video
   • Close player
   • Start a chat

3. Configure the other Step settings from the flyover, such as

   • The Step title
   • The name of the video subject
   • Step display preferences
   • Where appropriate, select a video reel from the Library

Guide to Button and Step Actions

Scroll page: setting the location on the page to scroll to

In the Flow Builder, if you select a Step action to be Scroll within page or Scroll within page then play another video, you will also need to set the location “anchor” — otherwise known as a HTML ID.

The anchor is a location on the page where the scrolling will stop, and the page will come to rest.

An anchor will need to be expressed as in HTML ID format, which will look something like this: #example-anchor - in the raw HTML code, this example would appear like this <div id="example-anchor"> .

You may need the help of a web developer to locate an anchor, or if you are familiar with HTML you should be able to find it using your browser’s code inspector.

Alternatively, you may see it expressed in the browser’s URL bar when click a link that already scrolls you to the correct location, i.e. https://example.com/#example-anchor.

Enter the anchor into the text field, Scroll page to... (the HTML ID)

Start a chat: connect to and launch a chat tool or chatbot conversation

See our article on launching a chat from a Player action button.

Deleting Steps

1. Select the Step to delete, then choose Delete step from the Step drop down.
2. Confirm removal. We will warn you about any affected sub-Steps or buttons.

Undo/Redo changes

• You can use Undo (Cmd + Z / Ctrl + Z) or Redo (Cmd + Shift + Z / Ctrl + Shift + Z) while editing your Flow to move through the history of changes made