How to Build a Flow

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.
• 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
   • Redirect to webpage
   • Scroll within page
   • Scroll within page then play another video
   • Close the Player

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 )

Scroll within page: setting the 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 an “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)

Deleting Steps

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

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