Integrating with Webflow

💡

You can "lock" your scene from interaction like Rotate, Pan and Zoom before exporting by selecting "No" for all these options.

Illustrate your websites with interactive 3D scenes without the need to write code.

  1. Before exporting make sure to compose your scene how you want it to look when it loads. Use frame mode and the frame guides to help you compose your scene.
  2. Press Export on the toolbar, select "Public URL" from the Type dropdown and click Export.
  3. Copy the "Embed" link that starts with an iframe. It looks like this 👇
  4. <iframe src='https://my.spline.design/characterbunny-d30b2f8b151dc0f1a12829ea09489efc/' frameborder='0' width='100%' height='100%'></iframe>

  5. On Webflow, click on the “+” icon on the top left to add an Embed Component. Simply drag and drop the Embed Component inside your container. The container would most likely be a div.
  6. Paste the iframe code inside Webflow's HTML Embed Code Editor that showed up and Save.
  7. Change your containers width and height to display your scene at your desired size.
  8. Publish your website to see your scene live and play around with it.

👉 Next Steps