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) this storyboard template may help plan the steps for your flow 1\ create a flow 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 to duplicate a step, select the three dots on a step > duplicate step you can choose to either use the existing capture or create a copy of the capture while copying the step 2\ choose step types 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 2 1 modal 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 2 1 1 change the modal position 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 2 1 2 edit the height of a modal 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 2 2 tooltip 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 2 2 1 anchor your tooltip after adding the capture to your step, click select element > use your mouse to select an element > use arrows to span element > save anchor 2 2 2 custom tooltip position to change the positioning of your tooltip, visit the anchor > click advanced > toggle on custom position you can then select where you would like the tooltip to appear on the screen 2 2 3 add a backdrop with your tooltip adding a backdrop with your tooltip can help highlight important elements, even on a smaller mobile screen to add a backdrop open the step settings > tooltip > toggle on backdrop > select light, medium or heavy 2 2 4 customize tooltip width 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 > open the step settings > toggle on custom dimensions > select small , medium , or large 2 2 5 customize tooltip height to set a custom height for your tooltip, open the step settings > toggle on custom dimensions > select set specific height 2 2 6 show tooltip on hover to make the tooltip hidden by default and show it only when the visitor hovers over the anchor element, open step settings > toggle on show on hover 2 3 invisible steps 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 2 4 forms 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 2 4 1 edit form fields to edit or remove fields from your form, select the field in your form and use the menu to adjust the label, placeholder, description, remove the field, and more if you are using the multi select property type, you can adjust the options here as well make sure to toggle on "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 want to add a hyperlink to your form, you must use a checkbox property to do this, create a new property by selecting checkbox under label , add in your terms and conditions or privacy policy and use the following format to add a hyperlink \[terms and conditions]\( https //example com/terms https //example com/terms ) for example, if you want the visitor to accept your terms and conditions, the label should be "i have read and accept the \[terms and conditions]\( https //example com/terms https //example com/terms ) " 2 4 2 form settings 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 2 4 3 form conversions you can view form conversions within your navattic workspace in the forms tab > locate the conversion column you can also view the step breakdown data in your specific demo by visitng the analyze step breakdown page this can help visualize any greater than usual drop off that is caused by the form in your demo learn more about analyze docid\ zqf4tr8 fzqiozuffr1t 2 5 embed embed a calendly , default , chili piper , revenuehero , or hubspot meeting event on a step to allow visitors to schedule appointments without leaving your demo when choosing your step type, select embed > select the event type > enter the url try this demo to see a calendly embed in action 2 5 1 embed a hubspot form 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 2 5 2 embed a marketo 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 2 6 video step 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 to see an example of a flow with a video step, select the using interactive demo at conferences and/or using interactive demos for customer training use cases in this demo and click submit 3\ add buttons, beacons, and triggers 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 3 1 configure buttons 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 3 2 configure beacons 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 3 3 configure triggers 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 4\ add voiceover 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 text add in custom text to read from ( tip use this with an invisible step ) read from step read directly from the text in the modal or tooltip upload audio upload audio files from your local storage supported formats include mp3, m4a, wav, and midi files if you select read from text or read from step , use the dropdown to select your preferred voice 5\ add personalization 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) 6\ adjust flow settings 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 escape view (this introduces a cta step when a user exits your demo) 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") 7\ update your demo 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\ click replace capture and re select the anchor elements if needed if the elements in the new capture are the same as the old capture, the anchor elements should automatically be saved 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 flows faqs how do i add additional media files to a flow? 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 how should i end my flow? 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! 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 can i highlight multiple elements in a single 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 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, 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 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 when should i include a form in my demo? 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 i am unable to select elements within the flow builder the navattic chrome extension https //chrome google com/webstore/detail/navattic/lbecioncobbndebbfdopnpinnibemoon 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 how do i enable a text input trigger? text input has value condition https //docs navattic com/flows#jjqon 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 can i highlight elements without using tooltips? 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 can i make edits across multiple steps at once? 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! view a 2 minute tutorial here can i copy or move steps into another flow? 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 how do i copy or move a flow to another demo? 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 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 can i include superscript formatting in a modal or tooltip?" yes, to add superscript formatting to a modal or tooltip follow the instructions below use https //lingojam com/superscriptgenerator to generate the superscript copy/paste it into the tooltip or modal directly no additional formatting is needed