Build
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 docid\ qp1xezx0zhkcvp9s h0ap this section covers the various adjustments you can make to ensure your demo appears well for visitors sharing options navattic demos may be shared with your end users via a direct link or a website embed share links once you publish your demo, a share link will be generated you can access this link under the title of your demo or by visiting your demo > share > share links sharing a direct link to your demo ensures that users experience a full screen demo of your product to generate a new share link, visit your demo > share > share links add a name and keep or customize the link 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 you can create up to 2 share links per demo receive email notifications toggle on email notifications when creating a link to receive an email when a visitor visits the share link if you haven't already set up the email integration, click connect when you see the following pop up visit playbooks to learn how to setup routing rules to email specific sales reps when companies matching their icp view your demos set a link as the primary share url if you create more than one share link per demo, you can choose which link to set as the primary share link by going to the demo > share links > click the three dots next to the share link > set as primary this will update the link underneath the demo's title share your demo on linkedin or twitter follow these steps to share your demo on social media 1\ create a new share link for demos shared on social media, allowing you to track analyze docid\ zqf4tr8 fzqiozuffr1t specifically for visitors who view the demo through your social channel to do this, visit share > share links > + create link > add a name tip toggle on lead email notifications when creating a share link to receive an email every time a visitor views your demo 2\ include a video or gif of your demo in your post learn how to additional features docid\ pcmvkqx7j175encgvnxfn website embed tip use an iframe tester tool like this to see how your embedded demo will look product demos can be added as an embedded as an inline frame (iframe) within a webpage, a full page, or a pop up to access a product demo's embed code, visit your demo > share > website embed > select an option > get embed code the navattic js section includes a javascript snippet that can be added to the \<head> of your website to allow the navattic iframe to track events that occur within the iframe visit navattic js docid\ wai87iuk zgdkoy4kn1ef to learn more about website event tracking and the exact data that is sent from the navattic iframe 1\ inline embed from here, you may select an inline option (this determines the outer dimensions of your embedded demo) and copy/paste this embed code into your website builder below are two examples of demos using the inline embed option on a landing page crossbeam "responsive" inline option + "scale width" responsive strategy twilio "responsive" inline option + "responsive" responsive strategy 1 1 inline options these options determine the outer dimensions of your embedded demo inline options description responsive this is the default setting for the inline embed code 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 fixed dimension 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) fixed aspect ratio a fixed aspect ratio embed will generate an iframe snippet with a set width to height aspect ratio this option is more flexible than the fixed dimension code but is not completely responsive this can be a good option if you do not have a website team 2\ full page embed a full page embed will cover the entire viewport to provide the largest possible view of your product tour this will be a similar end user experience as sharing your demo link directly however, notice in the examples below that the url does not contain navattic com embedding your demo allows you to use embed events to send demo data to the landing page hosted on your domain guru "scale width" responsive strategy hello retail "responsive" responsive strategy 3\ pop up embed you can embed your demo as a lightbox pop up directly from navattic to embed a pop up, visit your demo > embed > pop up > get embed code dailypay "responsive" responsive strategy klue "responsive" responsive strategy alphasense "scale width" responsive strategy customizations follow the instructions below to enable lazy load, disable demo pre loading, or manage the embed lifecycle using javascript lazy load overlay when the lazy load overlay toggle is selected for an embedded interactive demo, an overlay will appear over the top 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 as shown in this video disable pre loading demo the pop up demo embed preloads the demo on the page so that it loads instantly when the visitor opens it this behavior can be undesirable in some situations like, for example, when there are many demos on a page to disable this behavior, add the data navattic preload="false" data attribute to the button that is opening the demo control lifecycle of the embed with javascript the default embed code for the lazy load and pop up embed types use html in order to make the embed process as simple as possible if more control over the initialization and loading of the embed is required, the embeds js script includes the javascript class, navatticembed which includes a few methods that can be helpful for controlling the lifecycle of the embed elements navatticembed loadembeds() initializes all lazy load embeds on the page navatticembed initpopup(\<embed url>, \<config>) adds the pop up embed to the page but hides it until the below method is called the second argument is an object containing configuration properties for the embed the following (optional) properties are supported title the title that will appear in the header of the demo preload if this is set to false, the demo won’t be pre loaded when it’s initialized it will only start to render the demo when it’s opened defaults to true onclose a callback that is triggered when the visitor closes the pop up navatticembed openpopup(\<embed url>) opens the demo so that the modal appears overlayed on the page this would usually be attached to a click handler on the button that would be opening the pop up demo outbound email create an email template that will include a screenshot as well as a link to the demo to create an outbound email visit share > outbound email > type the message as well as the linked text then, click copy template and paste it directly into an email review site embed read the blog how to add interactive demos to g2 and trustradius to add a demo to g2, visit my g2 https //my g2 com/ /interactive demo , and navigate to product information > interactive demo from here, select add demo and add your demo's share docid\ zjhm sg4olngczdugefma in the demo preview image section, upload an image or gif of your demo and click save learn more about additional features social share settings adjust how your link appears in social previews under share > social share settings