# ElevenAgents in Framer

This tutorial will guide you through adding your ElevenLabs agent to your Framer website.

## Prerequisites

- An ElevenLabs Agents agent created following [this guide](/guides/elevenagents-quickstart)
- A Framer account & website, create one [here](https://framer.com/)

<img src="../img/site-assets/fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/elevenlabs.docs.buildwithfern.com/a0681bdfc73398af1391e381bc11f8d450a4eea0788991bc418f83ac6490c34f/assets/images/conversational-ai/framer-1rvasaq.png" alt="Convai Framer Example Project">

## Guide

::::steps
:::step{title="Visit your Framer editor"}
Open your website in the Framer editor and click on the primary desktop on the left.
:::

:::step{title="Add the ElevenAgents component"}
Copy and paste the following url into the page you would like to add the ElevenLabs agent to:

```
https://framer.com/m/ConversationalAI-iHql.js@y7VwRka75sp0UFqGliIf
```

You’ll now see a ElevenAgents asset on the ‘Layers’ bar on the left and the ElevenAgents component’s details on the right.
:::

:::step{title="Fill in the agent details"}
Enable the ElevenLabs agent by filling in the agent ID in the bar on the right. You can find the agent ID in the [ElevenLabs dashboard](https://elevenlabs.io/app/agents).
:::
::::

Having trouble? Make sure the ElevenAgents component is placed below the desktop component in the layers panel.

<img src="../img/site-assets/fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/elevenlabs.docs.buildwithfern.com/17f4e7b2bbc3ebafadb1b705e6c963c6900ae162236b39feff2c6839654cf4f9/assets/images/conversational-ai/layers-170x9np.png" alt="Convai Framer Example Project">

<img src="../img/site-assets/fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/elevenlabs.docs.buildwithfern.com/fcb5867e142022ca7ebc3aba3904fffc7ce0f4ddca716e2c7bac38012e2e1641/assets/images/conversational-ai/agent-id-1lvsm9h.png" alt="Convai Framer Example Project">

## Next steps

Now that you have added your ElevenLabs agent to your Framer website, you can:

1. Customize the widget in the ElevenLabs dashboard to match your brand
2. Add additional languages
3. Add advanced functionality like tools & knowledge base.

## Related pages

- [Administration](./administration-index.md)
- [API reference](./api-reference-index.md)
- [Changelog](./changelog-index.md)
- [ElevenAgents](./elevenagents-index.md)
- [ElevenAPI](./elevenapi-index.md)
- [ElevenCreative](./elevencreative-index.md)
- [ElevenLabs Documentation Docs](../index.md)
- [General Troubleshooting FAQ](./troubleshooting-index.md)
- [General Website FAQ](./website-index.md)
- [Help Center](./help-center-2-index.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.