Once you’ve created your gold-standard demo, it’s time to Embed the demo on your marketing website or product. Embedding your demo on your marketing website is a powerful way to generate top of funnel leads, drive demand, or educate new prospects.

​
Embedding a demo

Follow these steps to embed your demo on a webpage:
1

Click share and select embed option

On a Product Demo, select Share. For Share via select Website embed. Select between the sharing options to embed your demo on your website or product.Embed demo options
2

Click Get Embed Code

Click Get Embed Code to copy the code snippet. Drop this code snippet into your website or product.Embed demo code

​
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.
Congratulations — you’ve embedded your demo on your website. Any changes you make to your demo will be automatically reflected on your website after you publish your changes.