Build your Demo
Although there are many different ways to go about creating a demo, the following approach works best for building demos efficiently and with purpose.
Ask your Workspace Admin to invite you to Navattic. Admins can invite users via email by visiting Navattic > Settings > Members > + Invite member. 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 narrative?
- 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 narrative
- End your demo with a call to action (e.g., "Start a free trial", "Contact sales")
Top performing demos start with a hook, address customers directly, and contain 10-15 steps with 100-200 characters per step. Visit Copywriting for more expert tips.
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, video or screenshot uploads are also supported (read more here).
- After you install the Navattic chrome extension, navigate to your web application. For best results, resize your browser window to about 1440 x 900px
- Click the Navattic Chrome Extension and Login to Navattic if you haven't already.
- Select + Create demo, add a name, and click + Start Capturing. Name your Capture Collection, select Web as the App Type and enter the URL to your site and click Submit.
- The blue capture bar will appear on your web application. You can now start taking captures. When you are done taking captures click Finish.
Tip: Use click to capture (On-click) 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.
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 Generate flow. This will automatically arrange Captures in order in a Flow as shown below. Modals and Tooltips are the most common step types within Navattic Demos.
Tell a concise, inviting, and personalized narrative vs general features:
- Concise: ~ 15 steps and each dialog box is around 25 - 30 words
- Inviting: Uses words like “easy”, “simple”, “love”
- Personal: Uses words like “you”, “welcome”, “custom”
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 Responsive Strategies before sharing your demo. This determines how your demo appears for viewers on different devices. We recommend trying out "Fit Width" or "Responsive".
- 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 Demo links or to re-embed on a website!
- When it's time to update your demo, simply visit Product Demos > Build > Flows > 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.
Once you have created your demo, you can set up Integrations, learn how your Demo is performing under Activity, and restore a previous version of your demo.