GuidesSans code

ElevenAgents dans Webflow

Découvrez comment déployer un agent ElevenLabs sur Webflow

Ce tutoriel vous guidera pour ajouter votre agent ElevenAgents à votre site Webflow.

Prérequis

  • Un agent ElevenAgents créé en suivant ce guide
  • Un compte Webflow avec un Workspace Core, Growth, Agency ou Freelancer, ou un Site Plan
  • Une connaissance de base du Designer de Webflow

Guide

1

Récupérez votre code d’intégration

Rendez-vous dans le Dashboard ElevenLabs et trouvez le widget d’intégration de votre agent.

<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
2

Ajoutez le widget à votre page

  1. Ouvrez votre projet Webflow dans le Designer
  2. Faites glisser un Embed Element à l’emplacement souhaité
  3. Collez l’extrait <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> dans l’éditeur de code de l’Embed Element
  4. Sélectionnez Save & Close
3

Ajoutez le script globalement

  1. Accédez à Project Settings > Custom Code
  2. Collez l’extrait <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script> dans la section Footer Code
  3. Enregistrez les modifications
  4. Publiez votre site pour voir les modifications

Remarque : le widget sera visible uniquement après la publication de votre site, et non dans le Designer.

Résolution des problèmes

Si le widget n’apparaît pas, vérifiez que :

  • L’extrait <script> se trouve dans la section Footer Code
  • L’extrait <elevenlabs-convai> est correctement placé dans un Embed Element
  • Vous avez publié votre site après avoir apporté des modifications

Prochaines étapes

Vous avez ajouté votre agent ElevenLabs à Webflow. Vous pouvez désormais :

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