Skip to main content
You can embed any published demo directly on your website, help center, or landing page. Visitors interact with the embedded demo without leaving your site.

​
Supported content types

Tour

Interactive step-by-step product walkthroughs with hotspots and navigation controls.

Guide

Documentation-style guides with annotated steps and screenshots.

Video

Standalone recorded videos with your branding applied.

​
Find the embed code

1

Open the share panel

Open any published demo in the editor, then click Share in the top-right toolbar.
2

Select the Embed tab

In the share panel, click the Embed tab to reveal the embed code.
3

Copy the code

Click Copy to copy the iframe snippet to your clipboard.
The demo must be Published before an embed code is available. Unpublished demos do not generate an embed URL.

​
Embed code format

The embed code is a standard HTML <iframe>. Paste it into any HTML page or website builder that supports custom HTML.
embed-tour.html
<iframe
  src="https://share.layerpath.com/e/<demo-id>/tour"
  title="Product tour"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>
Replace <demo-id> with the actual ID from the embed code in your Layerpath share panel.

​
Sizing and responsive behavior

By default the embed code sets width="100%", which makes the demo fill its container horizontally. Adjust the height attribute to control the vertical space. For fully responsive embeds, wrap the iframe in a container with a fixed aspect ratio:
responsive-embed.html
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://share.layerpath.com/e/<demo-id>/tour"
    title="Product tour"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
The padding-bottom: 56.25% value produces a 16:9 aspect ratio. Adjust this percentage to match your demo’s original recording dimensions.
Tours are recorded at a fixed resolution (typically 16:9). Setting your embed container to the same ratio prevents letterboxing or clipping.