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 (i.e., 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 number 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)."
You can also adjust the Settings in your Form to add a logo and select Visitor behavior, which includes:
- Skip if already submitted: The Visitor won't be shown the Form if they have already submitted it in another session
- Pre-fill previous submissions: The fields will be pre-filled based on past form submissions
- Leave form blank (default): The fields will be left blank, and the Visitor will have to fill it out from scratch
Cookies must be enabled on the demo for properties to persist between sessions. Workspace admins can enable cookies by default within the Workspace Settings > Defaults > toggle on Cookie tracking.
To enable cookie tracking for just one demo, locate the demo in the Product Demos tab > Click the three dots that appear when you hover over the demo > Edit details > toggle on Cookie tracking.
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 (required). 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.
The Video Step feature lets you easily incorporate videos into your demo experiences. Teams are leveraging this to showcase customer case studies, highlight key use cases, and present branded content.
To add a video step, select Video from the Step type dropdown in the Flow Builder. Once you've added a Video step, you can click + Select video to either upload a video from your local storage or insert a link from YouTube, Vimeo, Loom, Wistia, or Vidyard.
Buttons, Beacons, and Triggers provide additional ways for users 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 |
|---|---|
Continue | Takes the end user to the next step in this Flow. If it is the last step, it will use the 'Last step continue behavior' that is set in the Flow Settings. |
Go back a step | Takes the end user to the previous step in this Flow |
Jump to a step | Allows visitors to skip forwards or backward within this Flow |
Start a Flow | Begins a new Flow. Select from any Flows within your workspace. |
Open Checklist | Prompts a Checklist to open at a specific point in the demo. |
Complete Flow | Launches 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.
Enhance your demos with dynamic narration through various options, including reading from the individual steps, custom text-to-speech, or uploaded audio.
To add voiceover to specific steps in your demo, in the Flow Builder click Add element > Voiceover. From here, use the dropdown to select the option you want to use:
- Read from step: Read directly from the text in the Modal or Tooltip
- Upload audio: Upload audio files from your local storage
If you select Read from text or Read from step, use the dropdown to select your preferred Voice.
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 you want 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 customize your demo further. Here you can:
- Turn on Next + Back buttons (this adds a "back" and "next" button to each step)
- Turn on Keyboard navigation (use your keyboard arrows to navigate through the demo)
- Turn on Presenter Mode (hide dialog boxes by default. Press "Ctrl + P" to make dialog boxes visible)
- Turn on Beacons reveal (All beacons will be hidden by default. Press "Ctrl + B" to toggle the beacon's visibility)
- Set the Last step continue behavior (either "Continue to next flow" or "Open Checklist")
Follow this recommended workflow to keep your demo up-to-date with UI changes:
1. Make a copy of each flow in the demo. To copy a Flow, select the three dots next to the Flow > Make Copy.
2. Open up the duplicated Flow and click on the Capture in the first step. Select the Capture Collection dropdown menu and click + Create new collection > Add a title and enter your App URL > Create.
3. Take updated Captures of the screens that need to be replaced. Title each Capture with the step number to help you track which step it should be added to. Watch this video to learn how to take Web Captures.
Tip: Keep your original demo open in another window so that you can easily reference it while taking new Captures.
4. Once you finish taking updated Captures, pin the new Capture Collection as the default Collection when you select new Captures.
5. Swap out the Captures and re-select the anchor elements. It may be helpful to have the old Flow open in a new tab for reference.
6. Repeat this process for all Flows in your demo. Once you have updated the demo, you can delete the old Flows by clicking the three dots next to the Flow > Delete. You can always restore a previous version of your demo if needed.
If you have a Checklist, update it with the new Flows before deleting the old Flows to avoid receiving an error message.
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.
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, 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.
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.
