Flows
Install the Navattic Chrome Extension to build a Flow.
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:
- Is your goal to create a high-level overview or to showcase a detailed portion of your product?
- 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)
Select + Create Flow to get started.
There are 4 ways to Create a new flow:
- + Blank will be to create a Flow with no Captures included yet
- New captures will let you take Captures to be used in the Flow
- From collection will create Flow steps using Captures from an existing Collection
- Copy will duplicate an entire Flow from this any Product Demo in your workspace
Tip: If you choose to create a Flow from a capture collection, select Tooltip as the Step appearance.
Within the Flow Builder, you can reorder steps, duplicate steps, and insert new steps as needed.
The Flow Builder contains five different step types to help create an engaging demo.
The five step types are Modal, Tooltip, Invisible, Form, and Embed. To change step types, click the description on your desired step and select an option from the right-hand menu that appears.
Best used for welcome or closing messages, a Modal is a dialog box that appears on top of your Capture. Modals include a button to help viewers move to the next step. Modals can be positioned in the center or corners of the screen and encourage the end user to explore on their own.
To change the positioning of your Modal, select Modal > Custom position. You can then select where you would like the modal to appear on the screen.
Set a fixed height on any Modal or Tooltip within your demo to accommodate a longer section of text, without covering important aspects of your product. This may be set for each step of your demo.
To set a custom height for your Modal, select Modal and toggle on Custom dimensions. Use the arrows to adjust the number to set a custom height.
Best used to promote interactivity with your product, a Tooltip is small dialog box that anchors to a specific onscreen element. Clicking the selected element will automatically advance users to the next step.
Tooltips can be positioned Above/Below/Right/Left of the selected element and combined with a backdrop (e.g., a light shadow on unselected elements) to best highlight your selected element.
After adding the capture to your step, click Select element > Use your mouse to select an element > Use arrows to span element > Save anchor
Adding a backdrop with your Tooltip can help highlight important elements, even on a smaller mobile screen. To add a backdrop select Tooltip > Backdrop > Light, Medium or Heavy
To change the positioning of your Tooltip, select Anchor > Advanced > Custom position. You can then select where you would like the Tooltip to appear on the screen.
To customize the tooltip width, go to Themes > Select Theme > Tooltip > Use the arrows to set the Width for Small, Medium and Large Tooltips. You can also edit the tooltip pointer size here.
Once you have set your custom tooltip widths, go to your Product Demo > Select Tooltip > Turn on Custom tooltip width > Select Small, Medium, or Large
To set a custom height for your Tooltip, click Tooltip > Custom dimensions > Select Set specific height.
Invisible steps are used when you don’t want any dialog boxes present on a particular step. These are combined with Triggers or Beacons to support the live presentation / sales enablement use case, but rarely used for marketing demos.
Demos with invisible steps are not recommended for sharing directly with viewers as they are a mostly unguided experience.
A Navattic Form is the quickest way to collect Visitor information such as name, email, and company during your demo. Forms can be placed on any step in your demo and also include checkboxes (ex., Terms and Conditions) and custom text fields.
To include a Navattic Form in your demo, visit the Flow Builder > add a Step > select the "Form" step type > customize the fields that appear in your form. This form will now be used to collect Visitor information in this demo.
Tip: Top-performing Navattic demos include 1-2 form fields, max. Account-Based Engagement can also be used to add firmographic information using the email field alone, helping you reduce the numner of fields in your form.
The default variables are "I have read and accept the terms and conditions", "Company", "Email", and "Name". Select Edit variables to edit, delete, or add variables. You will not be able to delete "Company", "Email", or "Name" as they are required identification variables.
Make sure to check "Field is required" if you want to require the user to fill out the specific field in order to proceed in the demo.
If you would like to add a hyperlink to the terms and conditions checkbox, you can do so by selecting Edit variables > select Edit next to the terms and conditions variable > Under Display Name, swap out the default link between the parentheses (https://example.com/terms).
The default display name is "I have read and accept the [terms and conditions](https://example.com/terms)."
Embed a Calendly or Chilipiper event on a step to allow visitors to schedule appointments without leaving your demo. When choosing your step type, select Embed > Calendly or Chilipiper > Enter the URL. Try this demo to see a Calendly embed in action.
To add a Hubspot form select Embed as the step type > Hubspot Form. Enter the HubSpot Form ID, Portal ID and Region. Here is more info on embedding a Hubspot Form.
If your form submissions are marked as spam in Hubspot, you may have to add the domains capture.navattic.com and <workspace_slug>.navattic.com to your reports settings in Hubspot.
To add a Marketo form select Embed as the step type > Marketo Form. Enter the Marketo Munchkin ID and Form ID which can be found in the Marketo URL as seen below. In this example the Munchkin ID is 137-MKP-579 and the Form ID is 1018.
Buttons, Beacons, and Triggers provide additional ways for user to interact with your product. By default, engaging with a Button, Beacon, or Trigger 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:
Click Action | Description |
|---|---|
Go to next step | Takes the end user to the next step in this Flow |
Go back a step | Takes the end user to the previous step in this Flow |
Start a Flow | Begin a new Flow. Select from any Flows within your workspace. |
Complete Flow | Launch a Checklist if a Checklist is present in the Project |
Navigate to URL | Takes the end user to an external link (e.g., a Book Demo page). Tip: We recommend adding UTMs to any URLs you link out to throughout your demo. For example, turn https://www.navattic.com/get-demo into https://www.navattic.com/get-demo?utm_source=navatticdemo in order to track form fills that originate from Navattic. |
Mark as Converted | For reporting purposes (i.e., not visible to the end user), this indicates that an end user has engaged with a specific CTA within your demo. This tag is automatically added to CTA buttons within Escape View. |
Buttons can be added to Modals and Tooltips and are recommended for the last step in a Flow.
To add a Button, click the dialog box on a Modal or Tooltip step. In the header that appears, click "+" and select Button. Click the newly added Button to customize button text and set click actions. The appearance (shape, size, and color) of buttons can be adjusted in Themes.
Tip: Turn on Navigation Buttons to quickly add a Back and Next button to every Step in a Flow. From the Flow Builder > click "Settings" > "Turn on Navigation Buttons". You may also steps to Hide Navigation Buttons on a Step if needed.
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.
A trigger is an element that waits for a user input before progressing. To add a Trigger, locate your desired step and click Add element. Select your Trigger Condition and Click Action(s).
Navattic offers three types of Trigger Conditions:
- Text input - this will require users to enter a string of text to progress. This is only applicable to Web Captures with HTML text input fields (ex. a search bar).
- Timer trigger - this will automatically trigger the click action after a specified amount of time.
- Element trigger - this will wait until an element has been clicked to progress. This can be used on any Capture or step type.
Tip: By default, Tooltips include a "progress on click" click action. This advances to the next step when the element is clicked. When using a Text Input Trigger and Tooltip on the same step, deactivate the Tooltip's "Progress on click" action by clicking the black "Anchor" bar > deselect "Progress on click". Link to tutorial.
Personalization is used to share customized demos at scale. Personalization variables can be added to the text in Tooltips and Modals.
To add personalization to a particular step, click the dialog box on a Modal or Tooltip. In the header that appears, click "+" and select "Personalization".
Next, select the variable that you would like to add to the step. Finally, set an optional fallback value (this will be used if the variable token is not found for any reason).
From the Flow Builder, click Settings to further customize your demo. Here you can:
- Turn on Navigation buttons (this adds a "back" and "next" button to each step)
- Turn on Beacons reveal hotkey (All beacons will be hidden by default. Press "Ctrl + B" to toggle the beacon's visibility)
How do I use Navigation Buttons and CTA Buttons together?
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.
How do I fix a Tooltip that appears to run offscreen?
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.
How do I replace Captures within a Flow?
From the Flow Builder, click on the Capture bar on a specific step to replace an existing 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.
How will the Escape View appear in a Flow?
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.
