Embed your demo

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:

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.

Click Get Embed Code

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

Choosing an embed type

Navattic offers three embed types. Select the one that best fits where and how you want to present your demo.

Inline embed
Full page embed
Pop-up embed

The inline embed renders the demo directly on the page, scaling to fit its parent container. Visitors see the demo immediately without needing to click anything.When to use:

Blog posts and content marketing pages
Product or feature pages where you want to showcase a workflow
Landing pages where the demo is the primary content
Tutorial or documentation pages

<iframe
  src="https://app.navattic.com/your-demo-id"
  style="border: none; width: 100%; aspect-ratio: 16 / 10;"
  allow="fullscreen"
></iframe>

The full page embed takes up the entire browser window with fixed positioning. It provides an immersive, app-like experience with no surrounding content.When to use:

Dedicated demo pages (e.g., yoursite.com/demo)
Full-screen experiences where you want maximum visitor focus
Standalone demo pages linked from email campaigns or ads

<iframe
  src="https://app.navattic.com/your-demo-id"
  style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 999999;"
  allow="fullscreen"
></iframe>

The pop-up embed opens the demo in a modal overlay when a visitor clicks a button. The demo stays hidden until triggered, keeping the page lightweight.When to use:

Call-to-action buttons on marketing pages
Navigation menus or site headers
Pages where the demo should complement, not replace, the existing content
When you want to minimize initial page load time

HTML version:

<button data-navattic-open="https://app.navattic.com/your-demo-id" data-navattic-title="Product Demo">
  View Demo
</button>
<script src="https://cdn.navattic.com/embed-widget.js"></script>

JavaScript version:

<button id="demo-button">View Demo</button>
<script src="https://cdn.navattic.com/embed-widget.js"></script>
<script>
  NavatticEmbed.initPopup("https://app.navattic.com/your-demo-id", {
    title: "Product Demo"
  });
  document.getElementById("demo-button").addEventListener("click", function() {
    NavatticEmbed.openPopup("https://app.navattic.com/your-demo-id");
  });
</script>

Recommendation: Use inline embeds for content-heavy pages where the demo is part of the narrative. Use full page embeds for dedicated demo pages where you want an immersive experience. Use pop-up embeds for CTA buttons where you want to keep the page lightweight and let visitors choose when to engage.

Inline sizing options

When using an inline embed, you can choose how the demo scales within its container. Select a sizing strategy in the embed modal after choosing the inline embed type.

Fixed aspect ratio
Responsive
Fixed dimensions

The demo fills 100% of the container width, and the height scales automatically to maintain a consistent aspect ratio. The default ratio is 16:10.When to use: Most marketing pages and landing pages. This option provides responsive width while maintaining consistent proportions across all screen sizes.

<iframe
  src="https://app.navattic.com/your-demo-id"
  style="border: none; width: 100%; aspect-ratio: 16 / 10;"
  allow="fullscreen"
></iframe>

The demo fills 100% of both the width and height of its parent container. This is the default sizing option.When to use: When you’re embedding inside a container that already has defined dimensions, such as a fixed-height column or a card component.

The parent container must have an explicit height set, otherwise the iframe may collapse to zero height.

<iframe
  src="https://app.navattic.com/your-demo-id"
  style="border: none; width: 100%; height: 100%;"
  allow="fullscreen"
></iframe>

The demo uses exact pixel dimensions. The default is 1100px x 600px. The size stays constant regardless of screen size or container.When to use: When you need precise control over the demo size and your layout can accommodate fixed dimensions. Use sparingly, as this doesn’t adapt to smaller screens.

<iframe
  src="https://app.navattic.com/your-demo-id"
  style="border: none; width: 1100px; height: 600px;"
  allow="fullscreen"
></iframe>

Recommendation: Use Fixed aspect ratio (16:10) for most marketing pages — it looks great on desktop and scales down gracefully on mobile. Use Responsive when embedding inside a container with a defined height. Use Fixed dimensions only when you need exact pixel control.

For more details on how your demo content adapts to different screen sizes, see Responsive strategies.

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.

Examples

See how leading companies embed Navattic demos on their websites:

Wiz

Pop-up embed on an academy page

Atlan

Inline embed on homepage

Lattice

Inline embed on dedicated tour page

Build

For Sellers

Share

Analyze

Tracking

Copilot

Integrations

Workspace

Help

Embedding a demo

Choosing an embed type

Inline sizing options

Customizations

Examples

Wiz

Atlan

Lattice

Build

For Sellers

Share

Analyze

Tracking

Copilot

Integrations

Workspace

Help

​Embedding a demo

​Choosing an embed type

​Inline sizing options

​Customizations

​Examples

Wiz

Atlan

Lattice

Embedding a demo

Choosing an embed type

Inline sizing options

Customizations

Examples