How to embed Storylane interactive demos in Webflow

A product demo works because the video tells the viewer what happens; an interactive demo lets them click the button themselves. The two leave very different impressions.

With Storylane, you can record that walkthrough, and it gives you an embed. Webflow gives you the page it sits on. The interesting decisions are all in the middle: which embed format, where the script goes, and whether search engines can see any of it.

This guide covers both embed families and the three patterns they produce, the Webflow custom code rules that decide where each can live, and a recent Storylane setting that changes whether your demo is 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.

Check these requirements before you proceed:

• 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, so nothing here needs a workaround. What it does need is picking the right format, and that choice is harder to change later than it looks.

Which Storylane embed format belongs on the page?

Storylane offers two embed families: inline, which places the demo in the page flow, and popup, which opens it over the page from a button. Inline then splits again depending on whether the demo starts on its own.

The embed documentation describes an inline embed without an overlay as auto-starting the moment the page loads, and an inline embed with an overlay as showing a preview with a call to action that loads the demo when clicked. Overlay embeds also carry a blur slider for the background behind the preview.

Match the format to what the page is for:

Auto-start is the option people reach for and regret. A demo that begins playing under a visitor who came to read pricing competes with the page rather than supporting it, and on a slow connection it is the heaviest thing on screen. Reserve it for pages where the tour is the destination.

4 steps to add a Storylane demo to a Webflow page

The build is a loader script in the site footer, an embed snippet on the page, and a setting most people never find that decides whether search engines can read the demo.

Work through these steps in this order.

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 rather than adapting one from elsewhere.

The snippet carries values specific to your demo: its URL, the padding that sets the aspect ratio it renders at, and, for the popup pattern, a width and height. Those numbers look arbitrary, but they aren't. Substituting your own is a common way an embed ends up letterboxed or cropped on the page.

Keep the snippet somewhere you can paste from twice, because the loader and the embed usually go in two different places in Webflow. Finish this step with a demo URL and the generated code block.

Note that Storylane's snippet includes its own copy of the loader script, so if you install the loader site-wide in step 3, delete that script tag from the snippet before pasting it into a page.

2. Turn on the LLM-Friendly toggle before you copy

This one is easy to miss and hard to retrofit. To a search engine, an embedded demo is an opaque script: whatever happens inside it is invisible, so none of the product language in your tour counts as on-page content.

Storylane added an LLM-Friendly toggle in the embed panel that changes this. Their documentation describes it as making the demo content readable by LLMs and search engines so that the product tour can be indexed and discovered organically. Storylane's instruction is explicit: toggle it on before copying the code.

For a page whose main content is the demo, this is the difference between a page with substance and a page that looks empty to a crawler. Turn it on, then copy. If the demo is already embedded, generate the snippet again with the toggle on and replace what is on the page.

3. Add the loader script in Webflow

The embed depends on Storylane's loader being present, and Storylane is specific about where it goes: their lead attribution guidance says the script must be installed on every page of the site, in the <head> section, or demo activity cannot be linked back to form submissions.

That makes the Head code section in Site settings the right home for it, since anything there applies site-wide.

Paste Storylane's own snippet into Site settings, then the Custom code tab, then Head code:

<!-- Site settings > Custom code > Head code -->
<script>
  (function () {
    'use strict'
    function e(t) {
      var r = t.head
      if (!r) return
      var i = t.querySelector(
          'script[src="https://js.storylane.io/js/v2/storylane.js"]'
        ),
        n = t.querySelector(
          'script[src="https://js.storylane.io/js/v1/storylane.js"]'
        )
      if (i || n) 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>

Webflow's custom code guidance generally prefers script tags just before the closing body tag, so the page renders before the JavaScript is processed. Storylane's instruction overrides that here, and the tradeoff is deliberate: head placement is what makes attribution work.

Note their snippet checks for an existing v1 or v2 tag before appending, so it will not double-load if a demo embed brings its own copy.

Each code section accepts up to 50,000 characters, which a loader will never approach, and the sections take only HTML, CSS and JavaScript.

Save the changes. Nothing will appear yet, because a loader with no embed to load does nothing visible, which is the correct outcome at this point.

4. Place the embed and publish

Where the embed itself goes depends on the format. An inline demo belongs in an Embed element in the Designer so it sits in the layout and inherits the surrounding spacing.

The inline embed is a padded wrapper around an iframe, which is what Storylane's own embed API returns:

<!-- An Embed element on the page. Storylane's generated snippet also
     contains a loader <script> tag: delete it if you installed the
     loader site-wide, or you will load the library twice. -->
<div
  class="sl-embed"
  style="position:relative;padding-bottom:calc(56.32% + 26px);width:100%;height:0;transform:scale(1)"
>
  <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>

There are no width or height numbers to get wrong here. The aspect ratio lives entirely in the wrapper's padding-bottom, and the iframe simply fills it.

A popup instead needs a button with a known ID and a script that listens for the click. This pattern uses Storylane.Play(), which their site runs in production but which doesn't appear in their public documentation, so treat it as something to re-check rather than a stable contract.

Give the button an ID in the Designer, then add the listener:

<!-- Page settings > Before </body> tag, or an Embed element -->
<script>
  var button = document.getElementById('play-button')

  if (button) {
    button.addEventListener('click', (event) => {
      event.preventDefault()

      // Values come from the Share panel. The dimensions set the aspect
      // ratio the demo renders at, so do not substitute your own.
      Storylane.Play({
        type: 'popup',
        demo_type: 'image',
        width: 2854,
        height: 1560,
        scale: '0.95',
        demo_url: 'https://app.storylane.io/demo/your-demo-id',
        padding_bottom: 'calc(54.66% + 27px)',
      })
    })
  }
</script>

The button ID in the script has to match the ID you set on the element in the Designer. Without the guard shown above, a missing element makes addEventListener throw an uncaught TypeError as the page loads, which is loud in the console and invisible to anyone testing by clicking.

Then publish. Webflow is explicit that custom code effects appear in preview and comment modes but don't go live until the site is published, so a demo that works in the Designer but not on the live URL usually means nobody has published since the code was added.

What causes a Storylane embed to fail in Webflow?

Four failures account for most of them: a plan that doesn't permit custom code, an unpublished site, a popup button that never matched its script, and a demo that renders in the wrong shape.

The custom code fields are missing or greyed out

Cause: The site is not on a plan that grants custom code. Webflow grants it to sites with an active Site plan, or to Core, Growth, Agency, and Freelancer Workspaces; without one of those, the custom code sections aren't available.

Fix: Check the site plan before assuming the setting has moved. Confirm this early, because the workaround people reach for is pasting the loader into an Embed element on a single page, which works but silently duplicates the script on every page that carries a demo. One loader in the Footer section is the maintainable version, and it needs the plan.

The demo works in preview and not on the live site

Cause: The site has not been published since the code was added. Webflow states plainly that custom code takes effect in preview but does not go live until publish, so preview is a misleading place to sign off on this work.

Fix: Publish, then test on the live domain rather than in the Designer. Make this a habit for anything involving custom code, because the same gap explains most integrations that work for the person who built them and nobody else.

If it still fails after publishing, open the browser console on the live page and check the loader script is present.

The popup button does nothing when clicked

Cause: The script cannot find the element it is listening to. The ID in the script and the ID on the Designer element do not match, or the script runs before the element exists in the DOM.

Fix: Set the ID on the element in the Designer settings panel, and use exactly that string in the script rather than a class or a name. If the script sits in the head rather than before the closing body tag, move it, since an element that hasn't been rendered yet cannot have a listener attached.

Open the browser console first rather than guessing: an unguarded script names the failing line in an uncaught TypeError as soon as the page loads.

The demo renders letterboxed, cropped or the wrong size

Cause: The padding value was changed or for a popup, the width, height or scale. Those numbers define the aspect ratio the demo was recorded at, so editing them to fit a layout distorts the frame rather than resizing it.

Fix: Restore the values from the Share panel and size the container around the demo instead, since the embed scales to the space it is given rather than to the numbers you type. If the problem is mobile rather than desktop, the fix is on the Storylane side and depends on how the demo was captured.

An HTML demo has a Settings then Auto-scale Demo toggle that adjusts it automatically, while a screenshot demo uses Mobile View, which prompts visitors to rotate their device. Check both orientations on a real handset before signing off, since a demo recorded on a wide desktop viewport is the element most likely to break at narrow widths.

What you can build next with Storylane and Webflow

Once one demo is embedded properly, the pattern repeats cheaply: a tour per feature page, a shorter one inside a pricing comparison, or an onboarding walkthrough behind a login that new customers see on their first visit.

The same click-to-open pattern powers most third-party widgets, so it transfers directly. Our Calendly pop-up guide covers the same booking flow, which pairs naturally with a demo when the next step is a conversation. For the connection details, see the Webflow and Storylane integration.