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 quick start join your workspace 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 plan your product demo 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? tip use our storyboard generator to quickly map out your demo — it's a great way to turn product thinking into a clear, demo ready narrative 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") enable escape view to give viewers an option to convert anytime 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 take vibrant, visual, and value adding captures 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 log in to navattic if you haven't already select new demo , add a name, and click start capturing the chrome extension 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 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 primarily using tooltips, beacons, or triggers view a tutorial on how to take web captures create a concise, inviting and personal flow 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” organize with a checklist (optional) 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 share your demo and see results 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 docid\ qp1xezx0zhkcvp9s h0ap 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 "scale width" or "responsive" visit the customer showcase for landing page inspiration 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 additional settings 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