Flow builder
Flows are step-by-step demos that a user progresses through at their own pace. Top-performing Flows are concise (8-15 steps) and include one or more conversion opportunities. Consider:
  1. Is your goal to create a high-level overview or to showcase a detailed portion of your product?
  2. How do you want users to interact with your product during the demo? (ex. Click a button, type a string of text, explore a dashboard)
  3. This storyboard template may help plan the steps for your Flow.

​
Step Appearance

The Flow Builder contains different step types to help create an engaging demo. To change step types, click the description on your desired step and select an option from the right-hand menu that appears.

​
Interactive Elements

Interactive elements provide additional ways for users to interact with your product. By default, engaging with these elements will send the user to the next step (this is a “click action”). You can adjust the click action to be one or more of the following:
A Beacon is a small pulsing dot next to an element within your Capture. A step may contain multiple Beacons.To add a Beacon, navigate to the bottom of your desired step and click Add element > Beacon. Select the onscreen element you would like to highlight. Clicking the purple “Beacon” bar to open the Beacon settings menu will let you assign a default position, custom size (set at the Theme) as well as one or more click actions for the Beacon.Anchor highlights (a pulsing element border visual) can also be enabled from the Beacon settings menu. Anchor highlights can be used with or without Beacons. Anchor highlight opacity can be set at the Theme.

​
Editing Rich Text

The Rich Text editor allows you to format the content inside of the Dialog. You can add headings, lists, links, and more.
Add additional buttons to your Dialog to present additional options such as a CTA or an option to continue the demo.If you’d like to enable Next and Back buttons to every step, you can enable this within settings.

​
Flow Settings

From the Flow Builder, click Settings to customize your demo further. Here you can:
Add a Next and Back button to each step to allow the user to navigate through the demo.

​
FAQs

You can add images, videos, and audio clips in Modals and Tooltips. From the Flow Builder, navigate to your desired step > click the dialog box > click ”+” in the dialog header that appears > select and upload your media.Images and audio recordings will be uploaded directly from your device. Videos will require a link to a public video on Youtube, Vimeo, Loom, Wistia or Vidyard. We recommend keeping media attachments short to encourage users to explore your product on their own.
We recommend adding dual CTAs to the last step of your Flow. You may click ”+” to add a Button to the Modal or Tooltip, or hide Navigation Buttons on the last step if needed. This will make it clear to your end user that they have completed the demo and encourage them to convert!
To hide Navigation Buttons, click your step heading (ex. “Modal” or “Tooltip”) > toggle on Hide navigation in the right-hand menu. Now that the navigation buttons aren’t visible on this step, click the + button in the step and select Button. If you want to add more than one button, repeat this step.
While each step can only include one Tooltip or Modal, Beacons can be used to highlight multiple elements at once ( example ). To do this, find your Step in the Flow Builder and simply add Beacons . We recommend including a Tooltip on this Step to communicate the intended workflow with users.
Tooltips may run off screen if the selected anchor element is too large and does not leave enough room to display the Tooltip fully. You can change the tooltip position, edit the tooltip height and/or edit the tooltip width to try and get the Tooltip to fit.If these edits do not solve the problem, please select a smaller anchor element for this step.
From the Flow Builder, locate the step where you want to switch the Capture and click on Replace Capture. This will open a dropdown menu where you can select a Capture from the current Collection, Add to the Collection, or select Captures from a different Collection in your workspace. If the new Capture has similar elements to the old Capture, the anchor element will automatically be updated.
Escape View will match the Escape step that can be found at the end of your flow builder. To turn on Escape view, click settings > toggle on Escape view.
Forms are used to gather user information such as name, email, company, and more. If the goal of your demo is to directly generate leads, a Form may be helpful for gathering information. Typically, about 20% of demo Visitors will fill out a Form on the first step.If using a Form, we recommend introducing this early in your demo and keeping it brief (1-2 fields if possible). Remember, your demo likely also includes other CTAs and conversion points that help high-intent viewers make their interest known.
The Navattic Chrome Extension is required in order to select elements within the Flow builder. Be sure to install this extension first. If it is already installed, please remove and re-add it to update it.
Text input has value condition can be used to have viewers engage with the capture by adding a text string to a text input field. If a text input condition is used in conjunction with a tooltip on the same step, you will also want to toggle off the Progress on click option on the step (found by clicking on the Anchor > Advnaced) so that the demo does not move to the next step when the element is clicked.
While most Navattic demos benefit from dialog boxes that tell a story about your product, Beacons can be used to highlight standalone elements in your Captures. From your Flow > add a Beacon. By default, a Beacon is a blinking dot next to an element.
With the Bulk Editor, you can apply edits across multiple steps at once. Bulk edits include:
  • Updating all beacons to triggers
  • Turning multiple modals into tooltips
  • Changing all beacons to have a highlight appearance instead of pulse
  • Deleting multiple beacons or triggers at the same time
  • Copying or Moving Steps to other Flows within your demo or to other Demos
  • Deleting multiple steps at the same time
  • and more!
With the Bulk Editor, you can copy or move steps into another Flow within the same demo or to another Demo in your Workspace.To do this, check off the steps you want to move or copy and then select the Copy to… or Move to… icon at the bottom of your screen. From here, you’ll be prompted to select whether you want to copy the steps into a Flow within this demo or in another demo. Once you select the Flow you want to move it to, click Copy # step.View a 2-minute tutorial here .
With Product Demos, you can copy over Flows from existing Product Demos. To do this, visit Flows > + Create Flow > Copy. Select the target Product Demo and desired Flow to copy into your new Product Demo.You can also copy or move multiple Flows at once by selecting the Flows you want to Copy and then selecting the Copy to… or Move to… icon at the bottom of the screen. From here, you’ll be prompted to select which Demo you want to add the Flows to.View a 2-minute tutorial here .

​
Can I add navigation buttons to my demo without using a Modal or Tooltip?

Yes, you can add navigation buttons without using a modal or tooltip by creating a Theme with a transparent dialog box and border.To create a Theme, visit Themes > + Create theme. From here, select Dialog > Dialog Background Color > use the opacity slider under the color picker to make the dialog box transparent. Repeat this step with the Dialog border color.Learn more about Themes.
Yes, you can add navigation buttons without using a modal or tooltip by creating a Theme with a transparent dialog box and border.To create a Theme, visit Themes > + Create theme. From here, select Dialog > Dialog Background Color > use the opacity slider under the color picker to make the dialog box transparent. Repeat this step with the Dialog border color.Learn more about Themes.
Yes, to add superscript formatting to a Modal or Tooltip follow the instructions below:
  1. Use https://lingojam.com/SuperscriptGenerator to generate the superscript.
  2. Copy/paste it into the Tooltip or Modal directly. No additional formatting is needed.