Quick Start Guide
Ask your Workspace Admin to invite you to Navattic. Admins can invite users via email by visiting Navattic > Workspace Admin > Members. Accept the email invitation to join your workspace and install the Navattic Chrome Extension to begin.
Before you start building in Navattic, it's important to determine the goals for your demo. Start by answering these questions:
- Which 2-4 sections of your product will you use to tell a concise and powerful story?
- What is the call to action you want visitors to take? (e.g., "Start a free trial", "Contact sales")
- Who is your audience and how long are they likely to spend on a demo?
Here are a few best practices:
- Begin your demo with a value-driven introduction (ex., ”Build a no-code interactive demo in four steps”)
- Aim to include 8-15 steps per Flow for maximum viewer engagement; consider using a Checklist to tell a longer story
- End your demo with a call to action (e.g., "Start a free trial", "Contact sales")
Visit your Navattic workspace and click Create demo to begin.
Workspace with existing Projects will see them displayed as a grid like this. In this case, click + Create new to begin.
Give your demo a name and select either:
- + Blank if you are creating a brand new demo (most common)
- Make Copy if you would like to start by copying an existing demo in your workspace
Captures are interactive copies of your application that set the foundation for your demo. While most Navattic demos utilize HTML-based captures of web applications, image or screenshot uploads are also supported (read more here).
Click Start capturing and follow the in-app prompt to install the Navattic chrome extension if you have not already.
For HTML-based Captures, enter your App URL and click Create. This will open a new tab containing your application as well as the Navattic extension - this appears as a horizontal bar at the bottom of your screen.
Tip: For best results, resize your browser window to about 1440 x 900px (approximately a 13" laptop window size) when taking Captures. This ensures that the interactive elements on your page will scale up and down accordingly.
From here, simply navigate to the desired pages within your app and click "Capture" as shown below. Once a green checkmark appears, navigate to the next page and repeat the process. Click “Finish” to return to your demo.
Captures within your collection appear like this.
Tip: Navattic recently introduced the option to Click to Capture. This is an option to automatically Capture the content on each screen, in order to save time while building your Flow. Click to Capture is best used for demos that primarily use Tooltips, Beacons, or Triggers.
View a 2-minute tutorial here and contact [email protected] for early access.
The next step is to create a Flow. Flows combine Captures with dialog boxes to tell a story about your product.
From your Capture collection, click Create flow. This will automatically arrange Captures in order in a Flow as shown below.
Within the Flow builder, use these different step types to create an engaging demo:
- Modals are best for intros and closing messages. Modals include a "next" button to help viewers move to the next step.
- Tooltips are used to highlight specific areas of your Capture ("anchor elements") and are the most frequently used step type. Tooltips add interactivity to your demo. Clicking the anchor element will automatically progress a viewer to the next step, although Tooltips can include buttons as well.
- 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.
- Forms are used to collect information from your viewer (ex., email, name, company, and more) or to introduce a Terms & Conditions checkbox. Forms can be placed anywhere in your demo; form entries may be sent to third-party tools via integrations.
- Embed steps are used to embed a Calendly or Chilipiper event on a step which allows visitors to schedule appointments without leaving your demo.
Explore your Flow Settings to see more features. Your Flow progress will be automatically saved. Click your Product Demo title in the upper left to return to the demos page.
Remember, the goal of your demo is to encourage visitors to take the next step, whether that is booking a sales demo, starting a free trial, upgrading an in-app feature, or something else entirely. On average, Navattic demos convert 15-20% of engaged visitors.
Consider including the following conversion opportunities in your demo.
- Conclude your demo with 1-2 CTAs - Add a button to the last step your demo to direct visitors to the next step (ex. "Start a free trial", "Book a demo", etc.)
- Include a mid-demo conversion step - In addition to the last step of your demo, we found that the most CTA clicks occurred on step 7 of a Flow. Consider a dedicated conversion step right after a major reveal or “wow moment” in your demo, as shown in this top-of-funnel demo by Guru.
- Include Escape View in Tooltips and Modals - While many demo visitors will complete your demo, a high-intent or returning visitor may be ready to convert before reaching a dedicated conversion step. Add Escape View to give visitors access the CTA option at any point.
Tip: When linking to other pages, consider adding UTM_source=navattic to identify traffic that stems from your demo (more info on UTMs).
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.
This tutorial demonstrates how to add more Flows, and how to tie Flows together with a Checklist.
The final step is to Publish your Product Demo! This 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.
Sharing and maintenance tips:
- Preview different Responsiveness Strategies before sharing your demo. This determines how your demo appears for viewers on different devices.
- To change the Starting Flow for your demo, click the 3-dots next to your preferred Flow and select "Set as Starting". Publish to see your change go live. No need to send out new Project links or to re-embed on a website!
- When it's time to update your demo, simply visit Product Demos > Build > click the ✏️ icon to edit a Flow or Checklist, and Publish this once more.
- To restore a previous version of your demo, visit Product Demos > Versions > 3-dots > Restore.
🎉 Great job sharing your demo! The next section includes details for the Integrations, Activity, and Versions tabs.
This demo will walk you through how to access Integrations, find Product Demo Activity, and restore a previous version of your demo.