Skip to content

Webflow Integration Guide

This guide covers how to embed StorySplat 3D scenes in Webflow using either the official Webflow App or manual embed code.

Installation

  1. Open your Webflow project in the Designer
  2. Go to Apps in the left panel
  3. Search for "StorySplat"
  4. Click Install

Using the App

  1. Click the StorySplat app in your Apps panel
  2. Enter your Scene ID
  3. Configure settings (height, autoplay, etc.)
  4. Click "Insert 3D Scene" to add to your page

Option 2: Manual Embed

For quick embedding without installing the app, use the Embed element:

This uses the bundled build which includes everything in one script:

<!-- StorySplat 3D Scene Viewer -->
<div id="storysplat-viewer" style="width: 100%; height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
<script>
  StorySplatViewer.createViewerFromSceneId(
    document.getElementById('storysplat-viewer'),
    'YOUR_SCENE_ID',
    { autoPlay: false, showUI: true }
  );
</script>

Step-by-Step Instructions

  1. In the Webflow Designer, add an Embed element where you want the 3D scene
  2. Paste the embed code above
  3. Replace YOUR_SCENE_ID with your actual scene ID
  4. Adjust the height as needed (e.g., 600px, 80vh, 100vh)
  5. Publish your site

Configuration Options

Option Type Default Description
autoPlay boolean false Auto-start tour playback
showUI boolean true Show navigation controls
lazyLoad boolean false Show thumbnail first, load on click
revealEffect string 'medium' Reveal animation: 'fast', 'medium', 'slow', 'none'

Examples

Basic embed: 

<div id="scene-viewer" style="width: 100%; height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
<script>
  StorySplatViewer.createViewerFromSceneId(
    document.getElementById('scene-viewer'),
    'f8dc96cf-6fc8-4d11-89bb-36c447c0d060'
  );
</script>

With autoplay: 

<div id="scene-viewer" style="width: 100%; height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
<script>
  StorySplatViewer.createViewerFromSceneId(
    document.getElementById('scene-viewer'),
    'YOUR_SCENE_ID',
    { autoPlay: true }
  );
</script>

Lazy loading: 

<div id="scene-viewer" style="width: 100%; height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
<script>
  StorySplatViewer.createViewerFromSceneId(
    document.getElementById('scene-viewer'),
    'YOUR_SCENE_ID',
    { lazyLoad: true }
  );
</script>

Full page with no UI: 

<div id="scene-viewer" style="width: 100%; height: 100vh;"></div>
<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
<script>
  StorySplatViewer.createViewerFromSceneId(
    document.getElementById('scene-viewer'),
    'YOUR_SCENE_ID',
    { showUI: false, autoPlay: true }
  );
</script>

iframe Alternative

If you prefer iframe embedding (simpler but less customizable):

<iframe
  src="https://discover.storysplat.com/api/v2-html/YOUR_SCENE_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="accelerometer; gyroscope; xr-spatial-tracking"
  allowfullscreen
></iframe>

Webflow-Specific Tips

Responsive Height

Use viewport units for responsive height:

<div id="scene-viewer" style="width: 100%; height: 60vh; min-height: 400px;"></div>

Inside a Section

When embedding in a Webflow section:

  1. Set the section to your desired height
  2. Set the embed to width: 100%; height: 100%;
  3. Remove padding from the container

Multiple Scenes

Use unique IDs for each viewer:

<!-- First scene -->
<div id="scene-1" style="width: 100%; height: 400px;"></div>

<!-- Second scene -->
<div id="scene-2" style="width: 100%; height: 400px;"></div>

<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
<script>
  StorySplatViewer.createViewerFromSceneId(
    document.getElementById('scene-1'),
    'SCENE_ID_1'
  );
  StorySplatViewer.createViewerFromSceneId(
    document.getElementById('scene-2'),
    'SCENE_ID_2'
  );
</script>

Custom Controls

Add your own play/pause buttons:

<div id="scene-viewer" style="width: 100%; height: 600px;"></div>
<button id="play-btn">Play</button>
<button id="pause-btn">Pause</button>
<button id="next-btn">Next</button>

<script src="https://cdn.jsdelivr.net/npm/storysplat-viewer@2/dist/storysplat-viewer.bundled.umd.js"></script>
<script>
  let viewer;

  async function init() {
    viewer = await StorySplatViewer.createViewerFromSceneId(
      document.getElementById('scene-viewer'),
      'YOUR_SCENE_ID',
      { showUI: false }
    );

    document.getElementById('play-btn').onclick = () => viewer.play();
    document.getElementById('pause-btn').onclick = () => viewer.pause();
    document.getElementById('next-btn').onclick = () => viewer.nextWaypoint();
  }

  init();
</script>

Getting Your Scene ID

  1. Create or edit your scene at storysplat.com
  2. Click "Upload" or "Update" to publish
  3. Find the Scene ID in the "Developer Export" section
  4. Copy the ID (looks like: f8dc96cf-6fc8-4d11-89bb-36c447c0d060)

Troubleshooting

Scene Not Loading

  • Verify the scene ID is correct
  • Check that the scene is published and public
  • Open browser console for error messages

Layout Issues

  • Ensure the container has explicit height
  • Check for CSS conflicts with Webflow styles
  • Use min-height to prevent collapse

Performance

  • Enable lazy loading for below-the-fold content
  • Limit number of 3D scenes per page
  • Test on mobile devices

Support