Build
The Build section of your product demo uses Flows (step-by-step journeys) and Checklists (a list of tasks) to tell a short story of your application.
Here, it is important to determine the story you want to tell and the call to action you want your demo visitors to take. Who is your audience and what do you want them to take away from this experience?
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 "Add 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
Within the Flow Builder, you can reorder steps, duplicate steps, and insert new steps as needed.
The Flow Builder contains four different step types to help create an engaging demo. By default, new Flows will include Tooltips for each step (Tooltips are small dialog boxes that appear next to a selected element in your Capture).
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 modal 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 > Fixed Height. 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.
If your Tooltip contains too much text: See section 2.1.2 to change the height of your Tooltip or Modal
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 > Custom tooltip 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
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 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.
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.
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.
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.
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 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 Trigger". Set your Trigger Condition and Click Action(s).
Navattic offers two types of Trigger Conditions:
- "Element is clicked" - this will wait until an element has been clicked to progress. This can be used on any Capture or step type.
- "Text input has value" - 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).
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:
- Select a different Theme for your Flow
- Turn on Navigation buttons (this adds a "back" and "next" button to each step)
If you are building a longer demo (15+ steps) or demo-ing multiple solutions, we recommend splitting this into multiple Flows. In this case, a Checklist will be used to let viewers choose which Flow to engage with. Here are a few examples of demos that include Checklists.
From the Build tab of any Product Demo, select "Add Checklist" to get started. Most Checklists will incorporate 4-6 Tasks that start different Flows. When using a Checklist, we recommend keeping individual Flows to 5-9 steps each.
This tutorial demonstrates how to tie multiple Flows together with a Checklist.
A blank checklist will appear with the option to add various Tasks. Tasks are the individual components of a Checklist, which appear when the Checklist is expanded. Similar to how Buttons behave in a Flow, Tasks in a Checklist can support a variety of Click Actions:
Click Action | Description |
Navigate to URL | Takes the end user to an external link (e.g., a Knowledge Base or Sign-up page) |
Start a Flow | Begin a new Flow. Select from any published Flows within your workspace. |
Mark as Converted | For reporting purposes (i.e., not visible to the end user), this indicates that an end user has clicked a CTA. |
Within your Checklist, click "Edit Checklist" to open a drop-down menu. Select "Edit Checklist Launcher" to edit the appearance of your checklist when collapsed.
From the Checklist editor, click "Settings" to view additional options.
Here, you can select a Theme and determine if you would like to automatically launch the checklist upon Flow Start or Flow Completion.
Once a checklist has been created and associated with a project, you can choose how you would want a user to engage with the checklist.
If you want a user to see the checklist immediately (i.e., before the project's starting flow, as in this example from Citrix), you will use the Launch checklist on flow start option found in the Checklist Settings.
Add Open Checklist to any Beacon, Trigger, or Button in your flow to prompt a Checklist to open at a specific point in your Demo, including after the last step. "Open Checklist" can be paired with any condition including "Timer".
If you want a viewer to see a starting flow then click on a button to immediately launch the next flow in the demo (Citrix's checklist also follows this structure), you will want to use the button action "Start a flow". Once this button has been clicked, the linked flow will immediately launch.
At any point (outside of a form step), the viewer can click on the checklist launcher to select a new flow.
To edit your Checklist or Checklist Launcher background color and border, go to Themes > use the drop down to select Checklist (or Checklist Launcher) > Select Dialog.
You can also edit the Font in your Checklist directly above Dialog. Make sure to Publish & Exit after making changes to your Checklist.
Next: Learn about Customize