> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# ElevenAgents no Framer

Este tutorial vai orientar você na adição do seu agente da ElevenLabs ao seu site do Framer.

## Pré-requisitos

* Um agente do ElevenLabs Agents criado seguindo [este guia](/docs/pt/eleven-agents/quickstart)
* Uma conta e um site no Framer; crie-os [aqui](https://framer.com)

![Projeto de exemplo do Convai Framer](/docs/_fern-img/a0681bdfc73398af1391e381bc11f8d450a4eea0788991bc418f83ac6490c34f.webp)

## Guia

#### Acesse seu editor do Framer

Abra seu site no editor do Framer e clique no desktop principal à esquerda.

#### Adicione o componente ElevenAgents

Copie e cole o URL a seguir na página à qual você quer adicionar o agente da ElevenLabs:

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

Agora você verá um recurso do ElevenAgents na barra "Layers" à esquerda e os detalhes do componente ElevenAgents à direita.

#### Preencha os detalhes do agente

Ative o agente da ElevenLabs preenchendo o ID do agente na barra à direita.
Você pode encontrar o ID do agente no [painel da ElevenLabs](https://elevenlabs.io/app/agents).

Está com problemas? Verifique se o componente ElevenAgents está posicionado abaixo do componente desktop no painel de camadas.

![Projeto de exemplo do Convai Framer](/docs/_fern-img/17f4e7b2bbc3ebafadb1b705e6c963c6900ae162236b39feff2c6839654cf4f9.webp)![Projeto de exemplo do Convai Framer](/docs/_fern-img/fcb5867e142022ca7ebc3aba3904fffc7ce0f4ddca716e2c7bac38012e2e1641.webp)

## Próximas etapas

Agora que você adicionou seu agente da ElevenLabs ao seu site do Framer, você pode:

1. Personalizar o widget no painel da ElevenLabs para combinar com sua marca
2. Adicionar outros idiomas
3. Adicionar recursos avançados, como ferramentas e base de conhecimento.