FAQs

please send us a message via in app chat or team\@navattic com if your question is not resolved here! to access in app chat, click your name in the upper left of your navattic workspace > "send us a message" web captures how do i capture a dropdown or popup menu? if you are having trouble capturing an onscreen element, try using the keyboard command ctrl+c (or command+c for mac) to take the capture how do i edit a capture after adding it to a flow? from the flow builder, locate the capture you would like to edit > click the arrows icon to expand the capture > click "edit" save & exit when complete keep in mind that your edits will be applied to every step that references this capture (to avoid applying edits to every step with this capture, first duplicate the capture you are editing) how do i edit the background of a capture when a popup message or modal is present? in the capture editor, use the up and down arrows to select the background element > open magic editors > overlay > ignore overlay you may have to remove the overlay on a few different layers before being able to access the element you are hoping to edit how do i edit text in my captures? first, please never capture sensitive data while the capture editor can be used to quickly replace simple strings of text or to alter the appearance of distracting elements, we ask our customers to avoid capturing sensitive data altogether to edit non sensitive text, open the capture editor > select your text field > and type something new in the text / html box most text fields are easily accessible in the editor; this tutorial shows you a workaround if you are having trouble selecting a given "text" field i am unable to load the chrome extension if you're having trouble loading the navattic chrome extension, it's possible that the extension does not have the correct permissions if you want to use the application on any domain the chrome extension needs to have the permission "on all sites" if you just want it to work on specific applications, it should have the permissions for "navattic com" and any other domains you want to update permissions click on the navattic icon in the chrome extension bar if it's not visible click the puzzle icon and select it from the dropdown menu (click the pin to add it to the extension bar) open the tab "this can read and change site data" select the appropriate sites refresh app navattic com and any pages that you have open where you want to run the extension media captures can i add device borders to a screenshot? navattic includes mobile, tablet, and desktop borders for apple and non apple devices adding a device border helps end users best visualize your desktop or mobile application learn more about adding a device border to a media capture how can i get my screenshot to better fit the device borders? using device mode in google chrome paired with a tool like this , you are able to take screenshots that better fit with the device borders can i edit a media capture using the capture editor? no navattic does not currently support image editing we recommend using a tool like figma or adobe to make modifications prior to uploading what is the recommended resolution for screenshots in navattic? we recommend using images that are greater than 1200px in width as smaller images will appear blurry in navattic how do i avoid the need to scroll when using a device border? to avoid the need to scroll, find the ratio of the device border and ensure your image has the same ratio before uploading it to navattic the ratio for the desktop border within navattic is 3 2 an easy way to get the correct ratio is to set up a google slides deck with this same ratio as the device border you want to use then, fill the slides with your images before downloading each individual slide flows 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 checklists how do i make a checklist appear for the viewer? while viewers can manually expand a checklist docid\ yhokcs1vny qqryuq osj at any point, you can also add an action to any beacon, trigger or button in your flow to prompt a checklist to open automatically at a certain point, including after the last step "open checklist" can be paired with any condition including "timer" how do i adjust the appearance of my checklist? visit themes docid\ mecxtgkodvdei8dj7ucg7 to adjust the appearance of your checklist common adjustments may be move the checklist launcher from left to right remove a strikethrough from your completed tasks adjust the shape and size of your checklist launcher how do i view the checklist created? to view your checklist, visit a product demo > build > checklist you can also preview the checklist when previeiwing the flow how do i reset my progress in a checklist? when testing a product demo that contains a checklist, you may notice that the checklist tasks are already completed or include a strikethrough this is due to your browser caching each step of the demo that is previously completed to restart your checklist each time, visit your checklist settings > reset checklist on flow start share how do i customize product demo links for sharing? you may customize the path of your product demo url under share > share docid\ zjhm sg4olngczdugefma (https //workspace navattic com/ customizableportion ) visit your product demo > share > share links > + create link > enter a name for your link > type into the customizable portion of the share link at the bottom > create how do i remove responsiveness from my product demos? while your application's native responsiveness settings will work well in most cases, scale width will be helpful for smaller iframe embeds or viewports instead of rearranging onscreen elements per your app's default responsiveness behavior, scale width will shrink the entire capture proportionally to fill your viewport this ensures that end users will see the same elements onscreen as you did while taking the capture you can turn this on within product demos > responsive > scale width how do i create a gif of my product demos? select the three dots next to the share button and click export preview > select gif > choose the number of steps to include in the gif and the time per step > export how do i optimize a demo of a mobile app for viewing on mobile devices? the goal of this section is to fine tune a demo of a mobile app on a mobile device (ex demo the slack mobile app on an iphone) please visit this section of mobile viewing for information on presenting a demo of a web app on a mobile device , which is a different scenario to try the example below, visit this demo of the famly mobile app on a mobile device if you do not have a mobile device handy, installing a mobile simulator like this may help quickly preview demos from a desktop step 1 create a new media capture collection and upload screenshots of your mobile app interface ( upload images tutorial ) do not add device borders to your screenshots they should appear full screen when previewed if you are creating a demo of a mobile website rather than a mobile app , here is a tutorial for taking scrollable screenshots of a mobile website gofullpage is a helpful browser extension for this step 2 create a flow using these captures as you usually do ( create a flow ) when building, use these tips to further fine tune your flow for a mobile audience use tooltips rather than modals to create an engaging experience add a heavy backdrop to steps that include a tooltip this helps highlight important elements, even on a smaller mobile screen add beacons when necessary to show users where to click include navigation buttons to help users easily progress thorugh the demo step 3 publish your flow and add this to a product demo copy your product demo share link append ?hidemobilealert=true\&scale=1 to the end of this for example, the link https //training navattic com/r04504re will become https //training navattic com/r04504re?hidemobilealert=true\&scale=1 this is the mobile for mobile link to your demo (technically this suffix will replace navattic's default mobile strategies with this mobile for mobile experience) step 4 from your website builder, link to the adjusted copy of your demo when a device under 800 px wide is detected most builders provide the option to create a responsive layout for your page that will present slightly different elements when viewed on mobile vs desktop how do i embed my demo in my zendesk help center? check out this demo to learn how to embed a demo in your zendesk help center how do i change the text in the banner of a pop up embed demo? if you're using the html share docid\ zjhm sg4olngczdugefma , you can easily update the data navattic title attribute within the button element by default, this attribute is set to the demo's title, but you can change it to any title you prefer alternatively, you can edit the name of your demo, publish the changes, and then re embed the demo using the updated embed code can the embedded demo automatically show the visitor’s preferred language based on location or browser settings? yes, as long as you are using the additional features docid\ pcmvkqx7j175encgvnxfn feature, you can manually configure the embedded demo to reflect the correct language by passing a query string to the iframe embed or demo share link following these steps for example, many websites allow visitors to select their preferred language, then append a query parameter like ?lang=en to the url of subsequent pages to maintain that language preference to ensure the demo reflects the correct language, you should pass the same query parameter to the demo embed or share link—and ensure it matches the language codes supported by navattic how do i link to a specific flow within a multi flow demo? to link to a specific flow, use the following format capture navattic com/projectid/?g=flowid\&s=stepnumber http //capture navattic com/projectid/?g=flowid\&s=stepnumber you can find the projectid and flow id in the url of the flow builder in the example below, the projectid is highlighted in red and the flow id is highlighted in green the share link for this specific flow would look like this capture navattic com/ clxy49afk000009jn3ss2d3rt /?g= clxz2h9b8000109lcf9sa07dk \&s=0 if you wanted to link to step 2 of this flow, then you would switch s=0 to be s=1 if you wanted to link to step 3, then you would change it to s=2 and so on tracking how do i pass utms from a landing page url into an embedded demo? you may notice that your embedded navattic demo does not automatically receive utms from the landing page it is embedded on take these steps to pass utms from the landing page url into an embedded demo use this resource by wickedreports to pass utms into the demo iframe locate your iframe source ("iframe src") in your demo embed code it will look like this add your utm source to the end of this iframe src, as highlighted below you will now see visitor utms appear in your csv export and your visitors tab > expand a visitor > "tracking" section what are the following filtered cookies used for secure xxxxxxx and host next auth csrf token'? the following filtered cookies secure xxxxxxx host next auth csrf token' are used for navattic app auth and are not used for visitor tracking these cookies would never be sent from a visitor page does navattic collect cookies for demo visitors? if customers decide to enable visitor cookies (this is an optional setting within the platform), visitor cookies will be tracked if a navattic form is used, these cookies will allow previously identified visitors to automatically skip subsequent navattic form fills, providing a streamlined experience for both the visitor and the vendor (customer) how can i add tracking parameters to cta buttons? you can add flexible tracking parameters to urls that visitors click throughout your navattic demo if you have tracking parameters like utms, campaign ids, etc , present in your demo share link (or present in your iframe src url in cases of embedded demos; see a resource on passing utms from landing page urls into iframes), you can now add these to the cta links that visitors click during your demo this provides a fuller picture of a user’s journey from your demo referrer page to your demo, to your cta page, and beyond to set this up, locate a navigate to url click action within your demo then check the box for “add tracking params” add tracking params in a similar format as you have on other pages for example, “?utm source={{utm source}}\&utm medium={{utm medium}}” would insert the present value for utm source into this field visitor analytics how do i track converted visitors in navattic? first, add a "mark as converted" click action to the primary cta button in your demo next, visit your navattic workspace > visitors > filters > events converted if you only want to see converted visitors for a specific demo, you can also add a product demo filter how do i see the total number of visitors for a demo? from your visitors tab, filter by your product demo name to see only the visitors who have engaged with this demo how do i separate product demo analytics for different embeds or links? there are several ways to separate engagement data if you are using the same demo in multiple places if you are sharing your demo via share docid\ zjhm sg4olngczdugefma , our recommendation is to create different share links for your product demo and to view the /path in your csv export if you are share , our recommendation is to create multiple copies of your demo, so that each demo has a unique embed code to copy a demo, visit the product demos page > locate the demo > click the three dots > make copy do demos with or without forms see more user engagement? form gated demos may see a higher % of conversion events, as viewers who complete a form are oftentimes higher intent however, we have found ungated demos had about on average 12% higher completion and 5% higher engagement rates why are there a ton of step 1 views? if your demo is embedded as an iframe on a high traffic landing page and does not include a third party form, each website visitor is "loading" the first step of your demo in this case, step 1 views represent each time your webpage has been loaded and may include users who do not click into your demo; for ungated embedded demos, step 2 views would provide a better representation for how many users have interacted with each demo why are there more views for later steps? within the product demo page, each step view represents a time that page has been loaded if a user refreshes a particular step of your demo, this will count this as two views if present, this discrepancy is usually small how do i add utms to an embedded demo? to track utms for visitors to an embedded demo, add your utms to the end of the src link in your navattic website embed code (the highlighted section below) note that navattic does not pull utms from the top frame of the page for embedded demos how can i configure my navattic form to accept only business/work emails? to ensure visitors enter their work email in a navattic form, navigate to the form > select email > form field to open the settings > toggle on require work email themes how can i autogenerate a theme using my company colors? to autogenerate a theme, go to themes > quick builder from here, you can choose a primary color and a secondary color > click "generate theme" if you want one of the colors to be the default background color, toggle on "background" these colors will automatically apply to all of the elements in themes including buttons, beacons, tooltips, etc how can i change the font? to edit the font used in your demo, go to themes > font you can edit the font color, size, line height, link color, and link hover color you can also select a custom font how do i edit the button color and size? to customize the button, go to themes > select "buttons" in the menu on the right from here you can edit the button border, text color, background color, font weight, and padding how do i edit the beacon color and size? to edit the color and size of the beacon, go to themes > select "beacons" in the menu on the right how can i change the modal width? to edit the modal width, go to themes > select "modal" in the menu on the right use the arrows to change the modal width this will change the width off all modals in demos with this theme how can i customize the width of my tooltips? to edit the tooltip width, go to themes > tooltip use the arrows to change the tooltip widths for small, medium, and large check out customize tooltip width for more details how do i edit the checklist background color, border, and font? to edit your checklist background color and border, go to themes > use the drop down to select checklist > 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 how do i edit the checklist checkmark color and task completion decoration? to edit the checklist checkmark color visit themes > select checklist in the righthand menu how do i edit the checklist launcher? to edit the checklist launcher visit themes > select checklist launcher in the righthand menu you can edit the placement, the horizontal and vertical padding, the border radius, the background color, the text color, and the font weight how do i edit the progress bar? to edit the progress bar (for your modals, tooltips and checklist), visit themes > select progress bar in the righthand menu select "show checklist progress bar" to turn on the progress bar for checklists or "show dialog progress bar" to turn on the progress bar for modals and tooltips to preview what the progress bar will look like for modals, tooltips, or the checklist you can use the dropdown menu in the top lefthand corner how can i add a cta banner to my demo? visit themes > banner to create a custom cta banner for your demos customize the banner's colors, text, and linked resources publish & exit to add your banner to existing projects how can i add a custom watermark to tooltips and modals? visit themes > watermark to upload an image to be used in modals and tooltips, and set your watermark's position, cta link, and opacity how can i change the tooltip border color when paired with a backdrop? visit themes > tooltip > anchor backdrop highlight color to change the backdrop border color check out how to add a backdrop to your tooltip workspace faqs how can i preview my demo? you can preview an entire demo by visiting the build tab of your demo and clicking "play" next to the share button you can then choose to view live (which will collect visitor data) or preview draft (which will not collect any data) how can i add a beacon or trigger? you can still add a beacon or trigger to steps in your flow to do this, scroll down and select add element a dropdown will apear and you can select either beacon, input trigger , timer trigger , or element trigger where can i find tracking scripts? tracking scripts can still be found at the individual demo level select the three dots next to the black share button > tracking scripts where can i find languages (share links to translated demos)? you can translate your demo or view share links for different language versions of your demo by select the three dots next to the black share button > languages click + add language to translate your demo where can i find the flow activity and step breakdown? to see a step breakdown of your flows, visit a demo > analyze > step breakdown you can analyze by a specific version or by a share link use the dropdown flow to select which flow you want to see the step breakdown for how can i send a test run in playbooks? to send a test run in playbooks to ensure your integrations are working as expected, click the playbooks tab > select a playbook > under configuration, select the three dots ( ) next to save > test run how do i copy a demo? to copy or duplicate an entire product demo, click + create demo and select the make copy option this will duplicate all associated capture collections, flows, and the checklist how do i copy a capture collection? with product demos, you can make copies of capture collections from existing product demos to do this, visit captures > + create collection > make copy select the target product demo and desired capture collection to copy this asset into your new product demo how do i archive a product demo? to archive your product demo, visit your demo > click the three dots next to the share button > settings > danger zone > toggle on archive you can also archive a demo on the product demos page by clicking the three dots next to the demo's title > archive how do i find archived product demos? to search for archived product demos, visit product demos > filters > status archived you can then unarchive the product demo by selecting the demo click the three dots next to the share button > settings > danger zone > toggle off archive how can i update my workspace name, slug, and logo? you can update your workspace name, slug and logo under settings > general the logo is pulled directly from your website favicon based off the website domain added under general once your website favicon updates, the logo should automatically update as well