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.
This section covers the various adjustments you can make to ensure your demo appears well for visitors.
Navattic provides three different Responsiveness Strategies that determine how your Navattic demo appears on viewports of different sizes. Visit your Demo > Share > Responsiveness Strategy to adjust.
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. 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.
Tip: Resize your window to 1440 x 900px or smaller when taking Captures, especially if you plan to use Fit Width. This will help onscreen elements remain legible on smaller viewports.
A Fixed strategy presents Captures at their original dimensions, regardless of the end user's viewport dimensions. Visitors will scroll if there is overflow.
Navattic provides multiple options for viewing demos 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).
Access Mobile Strategies by visiting your Demo > Build > Mobile.
Below are the options for presenting a demo of your desktop app on a mobile device.
The Mobile swipe demo is used to engage your mobile visitors with a short and visual experience they can swipe through. To create a mobile swipe experience visit your demo > Build > Mobile > Mobile swipe demo > Navigate to swipe editor.
Check out this demo to learn how to build a mobile swipe experience.
This is the optimized view for presenting a demo of your Web App on a Mobile Device. The Capture will appear on top of any dialog that is present on this step, while maintaining the proportions of your original app. We recommend taking Captures on a smaller window if you plan to use Mobile Optimized View to ensure that elements remain legible on smaller devices.
If you prefer not to trigger the default mobile view (the section above) when presenting your desktop application on a mobile device, you may add ?hideMobileAlert=true&scale=1 to the end of any Navattic demo share link to override this. This will present the desktop version of your demo, regardless of the end user's device type. Please note that the addition of ?hideMobileAlert=true&scale=1 cannot be included during the creation of a custom share link and must be appended outside of Navattic.
Try viewing this example on a mobile device: https://training.navattic.com/g2d80u49?hideMobileAlert=true&scale=1
Tip: Turn your mobile device to landscape mode to match your app orientation.
This is a good option if you prefer not to present your demo to mobile viewers or do not expect heavy mobile traffic to your demo.
Below are the options for presenting a demo of your mobile app on a mobile device.
To try the example below, visit this demo of the Famly Mobile App on a mobile device. If you do not have a mobile device handy, installing a mobile simulator like this may help quickly preview demos from a desktop.
This is a good option if you prefer not to present your demo to mobile viewers or do not expect heavy mobile traffic to your demo.
Navattic demos may be shared with your end users via a direct link or a website embed.
Sharing a direct link to your demo ensures that users experience a full-screen demo of your product.
To generate your Share Link, visit your Demo > Share Links tab > copy the link that appears or select "Create link" to create alternative versions. When creating links, you may add password protection, expiration dates, and/or personalization to specific links.
Simply copy and paste your desired link to share this demo with others.
Product Demos can be added as an embedded Inline Frame (iFrame) within a webpage. To access a Product Demo's embed code, visit your Demo > Share button > Website Embed Code. From here, you may select an outer embed size and copy/paste this embed code into your website builder.
Here is an example of the embed code for this demo:
<script> void 0===window.navatticQueue&&(window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}})); </script> <script src="https://js.navattic.com/embed-events.js"></script><iframe src="https://capture.navattic.com/clng4usyy006009mcgyua64yp" style="border:none;width:100%;height:100%;" allow="fullscreen"></iframe>
You will notice that this embed code includes the Javascript snippet shown in bold above. This particular section of the embed code allows your website containing the Navattic iFrame to track events that occur within the iframe. Visit Embed Events to learn more about website event tracking and to see the exact data that is sent from the Navattic iFrame.
You can delete this section of the website embed code if you prefer not to share demo events with your website for any reason. The unbolded section is the demo iFrame itself.
These options determine the outer dimensions of your iFrame.
Outer Embed Option | Description |
Responsive | This is the default setting for new demos. Responsive sizing will adjust the iFrame size based on the width of the parent element by creating an intrinsic ratio that scales on a viewer's device. |
Full Screen | A full screen embed will cover the entire viewport to provide the largest possible view of your product tour. |
Fixed | A fixed embed will generate an iFrame snippet with a set width and height in pixels. This can be adjusted and works well when your user's device is predetermined (ex. users are interacting with iPads at a conference). |
When the lazy load overlay toggle is selected for an embedded interactive demo, an overlay will appear overtop of the demo frame. This can be helpful to improve page load times, reduce load traffic to the demo, or provide better guidance on how to engage with the interactive demo.
The default background image (the first capture in the Product Demo) as well as the call to action to launch the interactive demo can be adjusted by updating the embed code.
Read the Blog: How to add interactive demos to G2 and TrustRadius
Languages is included in the Navattic Growth Plan. To enable this in your workspace, contact [email protected].
The Languages tab is used to automatically translate the tooltip and modal content in your Navattic demos without having to create multiple copies. To translate a demo, click into a demo > Languages > + Add Languages > select a Language from the dropdown > Translate. This will generate a share link for this specific language. Once you have translated a demo, you can edit the translated demo in the flow builder by using the dropdown to toggle between languages.