# Website Embed

Storylane supports a couple of embed formats:

* [Inline Embed](#inline-embed)
* [Popup Embed](#popup-embed)
* [Supported Platforms](#supported-platforms)
* [Embed Support](#embed-support)
* [Mobile-friendly Demos](#mobile-friendly-demos)

{% hint style="info" %}

#### To embed your demo into a Hubspot website or landing page, please refer to [this article](https://docs.storylane.io/integrations/integrations/hubspot/hubspot-website-embeds).

{% endhint %}

***

### 👉 **Inline Embed**

#### **Without Overlay**

The demo auto-starts as soon as the page loads.\
Example: [Clari](https://www.clari.com/product-tour/) | [Gong](https://www.gong.io/tour-confirmation/)

{% hint style="info" %}
Copy the embed code ([see example](https://jsfiddle.net/storylane/h6gdwf4s/)) and you can add it to any website. 
{% endhint %}

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FXkR6qB09SJAv0oiZUwdU%2FScreenshot%202026-02-16%20at%201.46.58%E2%80%AFPM.png?alt=media&#x26;token=6cc035ea-f44a-44c5-a188-3c98b3e3f1ec" alt="" width="563"><figcaption><p>Inline embed code without CTA example</p></figcaption></figure></div>

**With Overlay**

Show a demo preview with a clickable CTA button that loads the demo when clicked. 👆\
Example: [Storylane](https://www.storylane.io/) | [Reviewr](https://www.reviewr.com/)

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FqSeoR37ofhjQs8Ld4e4L%2FScreenshot%202026-02-16%20at%201.47.58%E2%80%AFPM.png?alt=media&#x26;token=5eee8d86-27b9-483b-9643-10f4f0f2a7f0" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Demo preview is shown with the CTA button ([see example](https://jsfiddle.net/storylane/akprf9z3/)). Clicking CTA loads the demo.&#x20;
{% endhint %}

{% hint style="warning" %}
Overlay embeds have a blur slider for a cleaner, distraction-free background
{% endhint %}

***

### 👉 **Popup Embed**

Add a CTA button on your page, and when clicked, voilà! A full-screen demo pops up for a fun, interactive experience! 🖱️✨ Example: [SentinelOne](https://www.sentinelone.com/lp/tour/)'

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FYhcUJog5YbvXnbdN9rPk%2FScreenshot%202026-02-16%20at%201.49.24%E2%80%AFPM.png?alt=media&#x26;token=e30a3e87-b891-4c12-99e6-5b98025e8124" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
Add the CTA button on your website ([see example](https://jsfiddle.net/storylane/w64kq9uh/)) and on click, it will open a popup window with the demo.
{% endhint %}

### 👉 Supported Platforms

Storylane demos play nice with a variety of platforms right out of the box! 🎬 Check out the list below and dive into the interactive fun on each one! ✨

<table data-header-hidden><thead><tr><th width="155" align="center"></th><th width="153" align="center"></th><th width="134" align="center"></th><th width="179" align="center"></th><th align="center"></th></tr></thead><tbody><tr><td align="center"><a href="https://app.storylane.io/share/pecbxgquhxu8"><strong>Webflow</strong></a></td><td align="center"><a href="https://app.storylane.io/share/hg1wpf21zfyv"><strong>Wordpress</strong></a></td><td align="center"><a href="https://app.storylane.io/share/j6pmqg2ltl63"><strong>Notion</strong></a></td><td align="center"><a href="https://app.storylane.io/share/xwdankssm6fy"><strong>Jira Confluence</strong></a></td><td align="center"><a href="https://app.storylane.io/share/19cbz1nbcttq"><strong>Gitbook</strong></a></td></tr><tr><td align="center"><a href="https://app.storylane.io/share/yiogycrgeig9"><strong>Readme</strong></a></td><td align="center"><a href="https://app.storylane.io/share/ojxtcerxcxez"><strong>Miro</strong></a></td><td align="center"><a href="https://app.storylane.io/share/p3xd8yxc63ga"><strong>Guru</strong></a></td><td align="center"><a href="https://app.storylane.io/share/4mxq1djdjovs"><strong>Trainual</strong></a></td><td align="center"><a href="../trust-and-security/faqs/how-to-add-embed-a-storylane-demo-in-a-zendesk-article"><strong>Zendesk</strong></a></td></tr></tbody></table>

### 👉 Embed Support

Want to add your Storylane demo anywhere? **oEmbed** has got your back! 🙌 Just grab the demo URL and pop it into platforms like **iFramely** or **Embedly**, and voilà – demo embedded! 🎉

Feeling like a code wizard? 🧙‍♂️ You can also use the **oEmbed API** for a little manual magic:\
[API example here](https://api.storylane.io/oembed/meta?url=https://app.storylane.io/share/ha3eti5gqq2c) – just swap out the URL with your own demo link! 🔮

Ready to embed everywhere? Let's make some demo magic! ✨

### 👉 Mobile-friendly demos

If your product doesn’t have a mobile app and isn’t mobile responsive:

Using Screenshots:

* Open the[ demo](https://app.storylane.io/share/ub2niorbmx9q) on a mobile-sized screen. It should display correctly.
* You can also switch to landscape mode for a better view.
* Enable “Mobile View.” This will prompt users to rotate their device.

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2F0Evyf2m36zKDlOa0LujS%2FScreenshot%202026-02-16%20at%201.50.40%E2%80%AFPM.png?alt=media&#x26;token=122b8012-aed2-4774-8d44-531b94260ff8" alt="" width="563"><figcaption></figcaption></figure></div>

Using HTML:

* Go to Settings > Auto-scale Demo.
* Toggle the setting ON. This will adjust the demo for mobile viewing automatically.

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FOYukERTsAVou0gRyWbtw%2FScreenshot%202026-02-16%20at%201.53.09%E2%80%AFPM.png?alt=media&#x26;token=7a26e619-1e4d-4519-b74c-93fef216524b" alt="" width="563"><figcaption></figcaption></figure></div>

With these tips, you can easily capture mobile-friendly demos for your product.&#x20;

{% hint style="info" %}
If you need help or have any questions, feel free to contact us at <support@storylane.io>.
{% endhint %}