Familiarize yourself with Navattic's design to streamline the process of setting up your workspace thus allowing for seamless navigation.

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 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.

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 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.

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.

Captures are interactive copies of your application that set the foundation for your demo. Navattic supports two types of Captures to help you demo any app: Media captures and Web captures.

The Navattic Capture Editor is used to make no-code adjustments to HTML-based captures. You may launch the Editor in three ways:

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.

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.

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.

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 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 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 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.

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.

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 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 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.

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.

Navattic provides four different Responsive Strategies that determine how your Navattic demo appears on viewports of different sizes.

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.

This option will shrink or expand the Capture proportionally to fit the end user's viewport.

A Fixed strategy presents Captures at their original dimensions, regardless of the end user's viewport dimensions. Visitors will scroll if there is overflow.

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.

Mobile gives you three options for how your demo will appear on devices smaller than 800px wide - this includes most smart phones and smaller tablets. Test these options on a variety of devices to find the optimal viewing experience (a Mobile Simulator like this may help).

The Mobile swipe demo is used to engage your mobile visitors with a short and visual experience they can swipe through. This is our recommended Mobile option.

Customize an alert that will appear for Mobile visitors.

The Capture will appear on top of any dialog that is present on this step, while maintaining the proportions of your original app.

Set a single theme for your demo or select different themes for each flow. See more about editing Themes.

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.

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).

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.

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 in-app analytics, we recommend setting up an integration to see the value demos generate for your business in the tools you already use.

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 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 Visitors and/or Accounts before integrating while others do not. Find setup guides for each option below or visit Direct Integrations to learn more.

Embed Events are used to send Navattic events to event-based analytics platforms that are used to analyze how users interact with your website. This is a flexible integration option that lets you receive Navattic events just like you receive other website events.

How it works: Navattic demos emit "events" whenever users perform actions - viewing a step, starting a flow, clicking a link, etc. When your demo is embedded on a landing page, this integration lets you send those events to any platform that can accept them like Amplitude, PostHog, and Mixpanel.

Note: Your demo needs to be embedded in a landing page in order to use Embed Events. Visit Embed Events for detailed setup steps.

The Activity section for each demo contains this specific 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 as well as examine which steps visitors are dropping off at under Flow activity.

Recent visitors will show the 10 most recent visitors that viewed your demo.

Flow Activity will show individual flow's step breakdowns. Step breakdown shows where users are dropping off in the Flow. Steps with a higher views rate indicate that visitors are clicking the "Back" button in your demo to revisit this step.

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.

The Languages section allows you to automatically translate your demo and find the share links for translated versions.

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 singificantly due to a seasonal campaign?

Use Filters to see the following metrics for a particular Product Demo or Timeframe.

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 an unique ID that is tied to their browser profile.

Visitors marked as "Engaged" are unique visitors who advance 1+ steps in your demo.

Visitors marked as "Converted" are users that have completed a step tagged "Mark as converted".

Visitors marked as "Identified" are users that have been identified either by filling out a form in the demo, by clicking a unique share link generated just for them, through query strings or through Javascript. Identified users will typically include a name and email. Unidentified users will be assigned an unique ID that is tied to their browser profile.

Visitors marked as "Navgated" are users that clicked a button with the click action "Navigate to URL".

Audiences are created by saving specific filters within Visitors or Accounts. You can then search by saved Audiences as well as use them in Playbooks.

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 the company and firmographic information of visitrs. A separate Clearbit license is not required in order to use this.

Each identified Account will include an engagment 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.

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:

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.

Connect and Manage your Direct Integrations here. Check out more information on Direct Integrations.

Workspace admins may enable automatic suggestions to ensure demos within the workspace follow best practices.

Setting up a Custom Domain will allow your Navattic demos to be served from a domain of your choice, like demo.acme.com.

Offline demos are used to download demos locally on your device, to present without an internet connection.

Launchpad is a dedicated portal to provide sales teams with streamlined access to share product demos and view analytics.

Organize product demos in your workspace by adding Product Demos to Boards.

Labels can be used to further categorize individual demos by tagging demos. You can also filer Product Demos by labels.

Groups of members that can administer workspace items.

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'll have the option to 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.

Manage who has access to your workspace under Members. Each member is assigned a user role:

Update your billing contact and payment details under Billing.

The Navattic Growth and Enterprise plans include SSO, Directory Sync, and Audit Logs options for enhanced security in your workspace. Contact [email protected] to learn more.

Manage general settings that affect the workspace.

Adjust your first and last name as they appear within your Navattic workspace.

Receive a weekly email report summarizing engagement with demos in your workspace.