Building Flows and 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

A Flow is an interactive video experience, and is published to one specific webpage on your website.

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. In Edit mode, click any Add Button button on the Flow Builder canvas to create and link to a new Step. You can add up to three action buttons to each 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

   • Selecting a video from the Library 
   • Step title (will show at the top of the video)
   • The name and job title of the video subject
   • Step display preferences

You can drag action buttons to re-order them. 

Guide to Button and Step Actions

Scroll page: setting the page location 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 - identified by a ID in the HTML code - also known as an "anchor".

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

How to find and set the scroll-to location

1. Locate or add an anchor to any element in your HTML code. For example, <div id="example-section">. You may wish to ask for 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 find it expressed in the browser’s URL bar when click any other page link that already scrolls you to the desired location, i.e. https://example.com/#example-section.

2. Enter the anchor into the text field, Scroll page to... (the HTML ID). The anchor will need to be expressed like this, prefixed with a # symbol : #example-section . An anchor ID must be  unique on the page to let the player identify exactly the where to stop scrolling.

3. Optional: If the anchor doesn't scroll to exactly the right place, or perhaps part of the page is obscured by a floating page heading  - adjusting the scroll offset in the page CSS styles can assist. The distance will be the height of the heading in pixels. This can be calculated by and easily applied by a web developer.

#example-section {
  scroll-margin-top: 80px;
}

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