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

Ce tutoriel vous guide pour ajouter votre agent ElevenLabs à votre site Framer.

## Prérequis

* Un agent ElevenLabs Agents créé en suivant [ce guide](/docs/fr/eleven-agents/quickstart)
* Un compte et un site Framer, créez-en un [ici](https://framer.com)

![Projet d’exemple Convai Framer](/docs/_fern-img/a0681bdfc73398af1391e381bc11f8d450a4eea0788991bc418f83ac6490c34f.webp)

## Guide

#### Accéder à votre éditeur Framer

Ouvrez votre site dans l’éditeur Framer et cliquez sur le bureau principal à gauche.

#### Ajouter le composant ElevenAgents

Copiez et collez l’URL suivante dans la page à laquelle vous souhaitez ajouter l’agent ElevenLabs :

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

Vous verrez alors une ressource ElevenAgents dans la barre « Layers » à gauche et les détails du composant ElevenAgents à droite.

#### Renseigner les détails de l’agent

Activez l’agent ElevenLabs en renseignant l’ID de l’agent dans la barre à droite.
Vous trouverez l’ID de l’agent dans le [Dashboard ElevenLabs](https://elevenlabs.io/app/agents).

Vous rencontrez des difficultés ? Assurez-vous que le composant ElevenAgents est placé sous le composant de bureau dans le panneau des calques.

![Projet d’exemple Convai Framer](/docs/_fern-img/17f4e7b2bbc3ebafadb1b705e6c963c6900ae162236b39feff2c6839654cf4f9.webp)![Projet d’exemple Convai Framer](/docs/_fern-img/fcb5867e142022ca7ebc3aba3904fffc7ce0f4ddca716e2c7bac38012e2e1641.webp)

## Prochaines étapes

Maintenant que vous avez ajouté votre agent ElevenLabs à votre site Framer, vous pouvez :

1. Personnaliser le widget dans le Dashboard ElevenLabs pour l’adapter à votre marque
2. Ajouter d’autres langues
3. Ajouter des fonctionnalités avancées telles que des outils et une base de connaissances.