Concepts

familiarize yourself with navattic's design to streamline the process of setting up your workspace, thus allowing for seamless navigation basic concepts workspace your navattic workspace serves as a hub for organizing various elements including product demos, analytics, visitors, and more each workspace is assigned a distinctive url following the format app navattic com/acme product demos product demos are interactive demos that can be shared as a direct link or embedded on a landing page product demos consolidate all flows, checklists, and capture collections needed for one demo in a centralized location build tab once you select a demo from product demos the first section you will see is build under the build tab, you can find captures, flows, the checklist, responsive strategy, mobile options, and the demo's theme you can also preview and publish your demo here preview preview enables you to view all recent edits made to the demo without triggering the collection of analytics the preview link is ideal for internally sharing demos before they are shared with your audience publish clicking "publish" generates your demo share link and website embed code sharing your demo will begin gathering viewer data that can be sent to other platforms via integrations docid\ qp1xezx0zhkcvp9s h0ap captures navattic supports two types of captures to help you demo any app media captures and web captures web captures are interactive copies of your application that set the foundation for your demo media captures include static screenshots, videos, or gifs capture editor the navattic capture editor is used to make no code adjustments to html based captures you may launch the editor in three ways from within a capture collection , click on any capture and select "edit" from within a capture collection , select the three dots and click "edit capture" from the flow builder , click on any capture as it appears in a step and select "edit" capture collection a capture collection is a group of captures that are used to build a demo once created, capture collections can be reused across multiple demos or flows web captures and media captures can exist in the same capture collection flows flows are what a product demo is composed of flows are interactive step by step demonstrations tailored for users to navigate at their own rhythm they typically integrate captures with dialog boxes, creating a compelling narrative that showcases your product flow builder the flow builder is where you create and update your flows to access the flow builder, visit and demo > build > flows > click the flow you would like to edit 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 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 invisible step 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 form a navattic form is the quickest way to collect visitor information such as name and email 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 embed step calendar tools embed a calendly or chilipiper event on a step to allow visitors to schedule appointments without leaving your demo try this demo to see a calendly embed in action embed step 3rd party forms the embed step also allows you to directly embed either a marketo or hubspot form into your demo the form details are created directly in either marketo or hubspot video step the video step displays text below the video, which can be uploaded from your local storage or by inserting a link from youtube, vimeo, loom, wistia, or vidyard escape view enabling escape view gives users direct access to a cta at any point in your demo if a user clicks the "x" on a modal or tooltip, it will take them straight to the escape view modal presenter mode presenter mode allows you to control the visibility of modals and tooltips when presenting an interactive demo when enabled, dialog boxes can be hidden or shown by the presenter using the keyboard shortcut ctrl + p to enable presenter mode, go to flow settings and toggle on presenter mode keyboard navigation keyboard navigation allows you to progress through your interactive demo using your arrow keys when combined with presenter mode, it gives teams enhanced flexibility for live product demonstrations, providing presenters with greater control over the entire experience to enable keyboard navigation, go to flow settings and toggle on keyboard navigation checklists if you are building a longer demo (15+ steps) or demoing 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 responsive strategies navattic provides four different responsive strategies that determine how your navattic demo appears on viewports of different sizes scale width this option will shrink or expand the width of the capture proportionally to the width of the end user’s viewport this is a good option if you are embedding a demo in a smaller iframe or expect it to be viewed on a variety of devices scale width and height this option will shrink or expand the capture proportionally to fit the end user's viewport responsive the default setting for new product demos, "responsive" will apply your application's default styles for different viewports this provides the most realistic look and feel for your demos and is recommended if you plan to share a product demo link directly with end users fixed a fixed strategy presents captures at their original dimensions, regardless of the end user's viewport dimensions visitors will scroll if there is overflow mobile tab mobile gives you three options for how your demo will appear on devices smaller than 800px wide this includes most smartphones and smaller tablets test these options on a variety of devices to find the optimal viewing experience (a mobile simulator like this may help) mobile swipe demo the mobile swipe demo is used to engage your mobile visitors with a short, visual experience they can swipe through this is our recommended mobile option mobile alert customize an alert that will appear for mobile visitors mobile scaled view the capture will appear on top of any dialog present on this step while maintaining the proportions of your original app theme at the demo level set a single theme for your demo, or select different themes for each flow see more about editing themes share once you have created flows and checklists, it's time to publish and share your demo! this generates a demo share link and website embed code sharing your demo will begin gathering viewer data that can be sent to other platforms via integrations docid\ qp1xezx0zhkcvp9s h0ap website embed product demos can be added as an embedded inline frame (iframe) within a webpage website embed options include inline embed (scale to the size of its parent element), full page embed (take up full height and width of the screen), or pop up (open a navattic pop up to reveal the demo) share links sharing a direct link to your demo ensures that users experience a full screen demo of your product you can create multiple share links for one demo when creating links, you may add password protection, expiration dates, and/or personalization to specific links integrations navattic gathers three types of data to help you assess the performance of your interactive demos engagement data, visitor data, and account data while navattic provides analyze docid\ zqf4tr8 fzqiozuffr1t , we recommend setting up an integration to see the value demos generate for your business in the tools you already use tracking scrips tracking scripts are enabled on individual navattic demos to send demo engagement data to other platforms most often, this is used to record a "page view" on existing hubspot or marketo contacts, which can then be used to create sales or marketing reports this differs from the direct integrations, as visitor identification occurs outside of navattic, separately from the visitor's interaction with your demo, and does not enter the navattic platform tracking scripts may be used for demos that are embedded in an iframe or shared as a direct link direct integrations direct integrations pass the engagement, visitor, and account data that is available within navattic to other tools this lets you view and report on navattic data in the platforms you already use, to track demo roi and guide your outreach strategy some direct integrations require you to identify docid\ yq0zwngdb3xhcxqsrdxpn before integrating while others do not find setup guides for each option below or visit direct integrations docid\ jc7eg rr96awu8zqn4vdg to learn more navattic js navattic js is a javascript widget that can be installed on your web properties to help identify visitors who do not fill out a navattic form directly in your demo integrate with event based analytics platforms such as ga4, mixpanel, and more navattic js is disabled by default in all workspaces however, navattic workspace admins can enable it using these setup steps activity each demo's activity section contains this demo's visitors and step completion rates click into a visitor to view details about their form submissions and the actions they have taken throughout your demo and examine which steps visitors are dropping off at under flow activity recent visitors recent visitors will show the 10 most recent visitors who viewed your demo flow activity flow activity will show individual flow's step breakdowns step breakdown shows where users are dropping off in the flow steps with a higher view rate indicate that visitors are clicking the "back" button in your demo to revisit this step versions every time you "publish" a demo, a new version is created under the versions tab to restore a previous version of your demo, visit product demos > versions > 3 dots > restore languages the languages section allows you to automatically translate your demo and find the share links for translated versions analytics the analytics view summarizes trends in visitor engagement within your demos use this to identify changes over time that may correspond with marketing initiatives for example, did your click through rate increase significantly due to a seasonal campaign? use filters to see the following metrics for a particular product demo or time frame metric description unique visitors the total number of visitors to step 1 of your demo engaged visitors unique visitors who advance 1+ steps in your demo or manually click on a checklist cta clicks the total number of visitor engagements with a cta in your demo (we recommend adding ctas at these conversion points ) time spent per session how long the average user spends on a browser tab containing your demo click through rate the % of engaged visitors who click a cta during your demo steps viewed the total number of demo steps viewed across your workspace leads visitors the visitors tab within navattic contains a full list of all users who have engaged with your demos identified visitors will include their name and email; anonymous visitors will be assigned a unique id that is tied to their browser profile engaged visitors marked as "engaged" are u nique visitors who advance 1+ steps in your demo or manually click on a checklist converted visitors marked as "converted" are users that have completed a step tagged "mark as converted " identified visitors marked as "identified" are users who have been identified either by filling out a form in the demo, clicking a unique share link generated just for them, query strings, or javascript identified users will typically include a name and email unidentified users will be assigned a unique id tied to their browser profile navigated visitors marked as "navgated" are users that clicked a button with the click action "navigate to url " audiences audiences are created by saving specific filters within visitors or accounts you can then search by saved audiences and use them in playbooks advanced filters filter description demos specific demo titles share links specific share link(s) total time total amount of time that a visitor has viewed your demos for total steps total steps a visitor has viewed in a demo total sessions total number of times someone has visited your demos visitor city city the visitor is in visitor country country the visitor is in visitor device what kind of device the visitor used to view a demo(s) company name identified company company name is not identified company that is not the selected value(s) sector sector that the identified company is in industry group industry group the identified company is in sub industry sub industry the identified company is in employee count range of number of employees that work at the identified company annual revenue dollar range of the identified company's annual revenue amount raised dollar range of funds raised by the identified company traffic rank an aggregated metric that compares a company's website performance to others, factoring in users, visits, and seasonality identification confidence confidence that company identification is accurate higher confidence scores mean multiple sources verify the identification company location city city the identified company is in company location country country the identified company is in accounts navattic's account based engagement feature is used to identify company accounts that engage with your demos, even if individual visitors do not engage with a visitor identification method outlined above this uses clearbit data to reveal visitors' company and firmographic information a separate clearbit license is not required each identified account will include an engagement rating (high vs low) based on the actions they took in your demo, the number of unique visitors at the account who viewed your demos, the total time spent in your demos, and more this data may be exported as a csv or sent to hubspot or salesforce via a direct integration manage themes themes allow you to customize your demo with your company brand navattic comes prepared with a light theme and a dark theme you can duplicate an existing theme to make edits, or select "create new" to start from scratch themes are available to all members of your workspace once created, apply your theme to any product demo, flow or checklist in order to view changes you can use the themes quick builder to auto generate a theme based on your company's brand colors themes allow you to change the font add a watermark add a progress bar update the dialog border color and radius change the modal width change the tooltip width and pointer size edit buttons edit beacons change the checklist checkmark color and task completion opacity change the checklist launcher placement, padding, and color add a cta banner change the backdrop border color change the modal and tooltip margins teams teams are used to manage access to assets in your workspace workspace admins can add members to different teams to help all members find relevant content quickly each team includes managers and members and may be assigned access to one or multiple workspace organization docid\ k97az0 4sratqscmjlpls managers will be able to add more members to the specific team teams will only have access to their assigned boards a user may be assigned to multiple teams workspace admins may create new teams settings demos integrations connect and manage your direct integrations here check out more information on direct integrations defaults workspace admins may update your demo defaults, flow defaults, and suggestions demo defaults include language responsive strategy app url theme checklist layout checklist logo cookie tracking search engine indexing flow defaults include step appearance backdrop beacon navigation buttons step progress escape view keyboard navigation presenter mode suggestions include various options that can be toggled on to ensure that demos within the workspace follow best practices domains setting up a custom domain will allow your navattic demos to be served from a domain of your choice, like demo acme com offline offline demos are used to download demos locally on your device to present without an internet connection launchpad launchpad is a dedicated portal to provide sales teams with streamlined access to share product demos and view analytics organize boards organize product demos in your workspace by adding product demos to boards labels labels can be used to further categorize individual demos by tagging demos you can also filter product demos by labels teams groups of members that can administer workspace items workspace general this contains your workspace name, which is visible to all members in the upper left of your navattic workspace you may rename your workspace as needed you can also update the flow default settings to specify the default step type that will be used when generating a flow additionally, you can decide whether new demos will automatically include backdrops, navigation buttons, and/or escape view these features can always be modified during the demo building process members manage who has access to your workspace under members each member is assigned a user role permissions admin builder viewer billing create and edit product demos x x view and share existing demos x x x invite new teammates and assign roles x update account payment methods x x hidden accounts use hidden accounts to exclude certain domains (including internal users) from visitors, accounts, and analytics to declutter your workspace reporting to set this up, visit settings > hidden accounts > add domains to exclude billing update your billing contact and payment details under billing security the navattic growth and enterprise plans include sso, directory sync, and audit logs options for enhanced security in your workspace contact success\@navattic com to learn more administration manage general settings that affect the workspace my account personal adjust your first and last name as they appear within your navattic workspace email reports receive a weekly email report summarizing engagement with demos in your workspace