> ## Documentation Index
> Fetch the complete documentation index at: https://docs.spline.design/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrating with Framer

<img src="https://cdn.spline.design/_assets/docs/b57219be-f0b0-4bb0-8b38-daf7e7fee7f7.png" alt="image" />

Integrating your Spline scenes into Framer allows you to have real-time interactive 3D experiences on your Framer websites.

[Learn more about Framer →](https://www.framer.com/)

## Add a 3D embed to your Framer website

1. Open your website project.
2. On the toolbar, go to **Insert** → **Utility** → **Embed** and drag an **Embed** into your project.
3. With the **Embed** selected, go to the right sidebar to the Embed panel.
4. Choose **Type URL** and paste your Spline Viewer code snippet.

<video src="https://cdn.spline.design/_assets/docs/560bea43-1ff6-42b9-afdb-ba17ac4d7c5e.mp4" controls />

## Framer Templates

Here are some Framer templates with Spline embeds, to get you started.

<img src="https://cdn.spline.design/_assets/docs/b3136804-6cc9-4193-b39e-b42d088f8371.png" alt="image" />

[Demo](http://zaaz3d.framer.website/) | [Remix](https://framer.com/projects/new?duplicate=pH9JDVndxwWBkvDKcf9o)

<img src="https://cdn.spline.design/_assets/docs/069d7306-909a-42a3-87ee-d36c215aaaf5.png" alt="image" />

[Demo](http://experience3d.framer.website/) | [Remix](https://framer.com/projects/new?duplicate=keMMXbLdnBtqhnCNEQQB)

<img src="https://cdn.spline.design/_assets/docs/b2916a15-806f-49d8-9f38-28830f491c11.png" alt="image" />

[Demo](http://studio3d.framer.website/) | [Remix](https://framer.com/projects/new?duplicate=4QaqDQ5kBCzk6zQvIbxb)

## Scene optimization

Learn to optimize your scene to make sure your scene loads quickly and runs efficiently on all sorts of devices.

[How to optimize your scene](/exporting-your-scene/how-to-optimize-your-scene)