# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.storylane.io/sharing-demos/website-embed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.