# How to Embed a Storylane Demo in Webflow

You can embed Storylane interactive demos in Webflow. This guide covers the three embed formats, where the loader script goes, and the toggle that makes a demo indexable.

## What do you need to embed a Storylane demo in Webflow?
You need a published Storylane demo, a Webflow site with a plan that allows custom code, and a decision about which of the three embed formats suits the page.

### Requirements:
- A Storylane demo that is published and shareable, with access to its Share panel.
- A Webflow site on an active Site plan or a Core, Growth, Agency or Freelancer Workspace, which is what grants custom code access.
- The page or template where the demo will live, and a clear idea of whether it is the reason people arrive or a supporting element.
- Publishing rights on the site, because custom code behaves differently before and after a publish.

Storylane lists Webflow among the platforms its demos work with out of the box.

### Which Storylane embed format belongs on the page?
Storylane offers two embed families: inline, and popup.

#### Embed Format Table
| Embed format              | What the visitor sees                                                                  | When it fits                                                  |
|---------------------------|--------------------------------------------------------------------------------------|-------------------------------------------------------------|
| Inline without overlay     | The demo starts playing as soon as the page loads                                    | A dedicated demo page where the tour is the reason someone arrived |
| Inline with overlay       | A preview image with a clickable call to action that loads the demo                  | A marketing page where the demo supports the copy rather than replacing it |
| Popup                     | A button that opens the demo full screen over the page                               | A pricing or feature page where you want the demo without giving up layout space |

### 4 Steps to Add a Storylane Demo to a Webflow Page
1. **Copy the embed code from the Share panel**  
   Open your demo in Storylane, go to Share, then Embed, and choose the format you settled on above. Copy the snippet it generates.

2. **Turn on the LLM-Friendly toggle before you copy**  
   Enable the LLM-Friendly toggle in the embed panel. This changes the demo content to be readable by LLMs and search engines.

3. **Add the loader script in Webflow**  
   The embed depends on Storylane's loader being present. Paste Storylane's own snippet into Site settings under the Custom code tab in the `<head>` section.

```html
    <script>
      (function () {
        'use strict'
        function e(t) {
          var r = t.head;
          if (!r) return;
          var s = t.createElement('script');
          s.type = 'text/javascript';
          s.async = !0;
          s.src = 'https://js.storylane.io/js/v2/storylane.js';
          r.appendChild(s);
        }
        e(window.document);
      })();
    </script>
    ```

4. **Place the embed and publish**  
   Where the embed itself goes depends on the format. Use an Embed element in the Designer for inline demos.

```html
    <div class="sl-embed" style="position:relative;padding-bottom:calc(56.32% + 26px);width:100%;height:0;">
      <iframe class="sl-demo" src="https://app.storylane.io/demo/your-demo-id" allow="fullscreen" style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"></iframe>
    </div>
    ```

## What causes a Storylane embed to fail in Webflow?
- **The custom code fields are missing or greyed out**: Ensure your site plan allows custom code.  
- **The demo works in preview and not on the live site**: Ensure you have published the site since adding the code.  
- **The popup button does nothing when clicked**: Ensure the script and button match.  
- **The demo renders letterboxed, cropped or the wrong size**: Restore the values from the Share panel.

## What you can build next with Storylane and Webflow
Once one demo is embedded properly, you can create additional features with the same click-to-open pattern.

## Frequently Asked Questions
- **Do I need a paid Webflow plan to embed a Storylane demo?**  
  Yes, you need custom code access, which comes with a paid plan.
- **Will search engines see the demo content?**  
  Only if you enable the LLM-Friendly toggle before copying the embed code.
- **Should the demo start automatically?**  
  Only on dedicated demo pages. Otherwise, use inline with overlay or popup formats.
- **Why does it work in preview but not live?**  
  Publish your site to make custom code take effect.
- **Can I resize the demo to fit my layout?**  
  Size the surrounding container instead of changing the embed values.