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

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.

    <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.