Integrating with Webflow

πŸ’‘

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

Embedding your scene into Webflow is super simple.

  1. Before exporting make sure you position your scene how you want it to look when it loads.
  2. Go to the "Publish & Share" panel on the right sidebar, 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