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.
2
Click Get Embed Code
Click 
Get Embed Code
to copy the code snippet. Drop this code snippet into your website or
product.
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.
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 pageNavatticEmbed.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 demopreload
: 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.
- The second argument is an object containing configuration properties for the embed. The following (optional) properties are supported:
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.