> 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 en Framer

Este tutorial te guiará para añadir tu agente de ElevenLabs a tu sitio web de Framer.

## Requisitos previos

* Un agente de ElevenLabs Agents creado siguiendo [esta guía](/docs/es/eleven-agents/quickstart)
* Una cuenta y un sitio web de Framer; crea uno [aquí](https://framer.com)

![Proyecto de ejemplo de Convai para Framer](/docs/_fern-img/a0681bdfc73398af1391e381bc11f8d450a4eea0788991bc418f83ac6490c34f.webp)

## Guía

#### Visita tu editor de Framer

Abre tu sitio web en el editor de Framer y haz clic en el escritorio principal a la izquierda.

#### Añade el componente ElevenAgents

Copia y pega la siguiente URL en la página a la que quieras añadir el agente de ElevenLabs:

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

Ahora verás un recurso de ElevenAgents en la barra «Layers» de la izquierda y los detalles del componente ElevenAgents a la derecha.

#### Rellena los datos del agente

Activa el agente de ElevenLabs introduciendo el ID del agente en la barra de la derecha.
Puedes encontrar el ID del agente en el [panel de ElevenLabs](https://elevenlabs.io/app/agents).

¿Tienes problemas? Asegúrate de que el componente ElevenAgents esté situado debajo del componente de escritorio en el panel de capas.

![Proyecto de ejemplo de Convai para Framer](/docs/_fern-img/17f4e7b2bbc3ebafadb1b705e6c963c6900ae162236b39feff2c6839654cf4f9.webp)![Proyecto de ejemplo de Convai para Framer](/docs/_fern-img/fcb5867e142022ca7ebc3aba3904fffc7ce0f4ddca716e2c7bac38012e2e1641.webp)

## Siguientes pasos

Ahora que has añadido tu agente de ElevenLabs a tu sitio web de Framer, puedes:

1. Personalizar el widget en el panel de ElevenLabs para que encaje con tu marca
2. Añadir idiomas adicionales
3. Añadir funciones avanzadas como herramientas y base de conocimiento.