Skip to content
English - United States
  • There are no suggestions because the search field is empty.

How to Build a Flow

This article explains how to build a flow and the different options you have for adding and editing buttons. 

Building Flows & editing Steps

A button in a Flow will land on a Step. Each Step has an Step Action, such as scrolling to a location on the page, or playing a new video in a Flow.

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 
  • Close the Player

Adding and Editing Steps

  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. Click the Step to modify its content:

    • Where appropriate, select a video reel from the Library or configure a page to redirect to
    • Edit text, buttons or subject details for the Step

    Note: When configuring a Step to redirect to a URL, you can set a relative path (e.g. /company/about ) or absolute (https://example.com/external/page.htm)

    Note: You can configure a button in a Step to open the customer’s email client (e.g. mailto:info@example.org), start a phone call (e.g. tel:+441234561234), or start a WhatsApp call or message.

    Note: When configuring a Step to scroll within a webpage, you will need to set the HTML ID of the element you wish to scroll up or down to (e.g. #section_title )

Configuring 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

This is helpful when you already have an existing chat tool you wish to direct website visitors to, from a ReelFlow Player.

This action is an integration that allows you to link action buttons in your Flow with third-party chatbot tools. When this option is selected, clicking the action button will launch the selected chat experience (and hide the ReelFlow Eye-catcher).

We currently support Hubspot chat, Chatbase and Intercom.

If we don't already support a chatbot you wish to use, you can create and configure your own custom integration using our Player API to achieve the same effect. Reach out if you need assistance.

Things to note:

  • The chatbot you select from the list must already be working on the page you intend to use the Flow on for this action for this to work.
  • The Flow must be published and working on the page as usual.
  • The action button will automatically connect and integrate with the selected chatbot if everything is setup correctly.
  • When using Overlay Flows, you have the options to set the ReelFlow Player to hide when the chat starts, and show again once the chat finishes (options can be found in Step settings).
  • You will need to configure the third-party chatbot to be hidden on the page to take advantage of this feature (as it will reveal it to the visitor it at the correct moment, on button click).

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