Comment ajouter le widget d'IA conversationnelle d'ElevenLabs à votre site Webflow

Vous souhaitez améliorer l’expérience client ? L’IA conversationnelle peut vous y aider. En ajoutant l’IA conversationnelle d’ElevenLabs à votre site Webflow, vos visiteurs peuvent avoir des conversations naturelles comme s’ils échangeaient réellement avec un membre de votre équipe. 

Dans ce guide, nous vous expliquons comment ajouter le widget d’IA conversationnelle d’ElevenLabs à votre site Webflow et l’intégrer à l’aide de HTML personnalisé et de JavaScript.

Avant de commencer

Avant de commencer, assurez-vous de disposer des éléments suivants :

1. Compte Webflow : vous devez disposer d’un Workspace Core, Growth, Agency ou Freelancer actif, ou d’un Site Plan, pour accéder à l’Embed Element.
2. Compte ElevenLabs : configurez votre agent vocal d’IA conversationnelle dans ElevenLabs, puis copiez le code d’intégration fourni, qui comprend des extraits < script > et < div >.
3. Connaissance du Designer de Webflow : il est utile de savoir comment ajouter et modifier des Embed Elements dans Webflow.

Guide étape par étape

Étape 1 : préparez votre widget ElevenLabs

1. Connectez-vous à votre compte ElevenLabs.
2. Accédez à la section IA conversationnelle.
3. Copiez le code d’intégration, qui comprend :
4. • Un extrait < script > permettant de charger les fonctionnalités du widget.
   • Un extrait < div > qui définit l’emplacement du widget sur la page.

Étape 2 : ajoutez le widget à une page Webflow

Pour afficher le widget sur une page spécifique, utilisez l’Embed Element.

1. Ouvrez votre projet Webflow dans le Designer.
2. Accédez à la page sur laquelle vous souhaitez afficher le widget.
3. Depuis l’Elements Panel, faites glisser l’Embed Element vers l’emplacement souhaité sur la page.
4. Dans l’éditeur de code de l’Embed Element, collez l’extrait < div > du code d’intégration ElevenLabs.
5. Cliquez sur Save and Close pour appliquer les modifications.

Remarque : dans le Designer, l’Embed Element sert d’espace réservé pour votre widget. Le widget ne s’affiche qu’une fois le site publié.

Étape 3 : ajoutez le script globalement

Pour assurer le bon fonctionnement du widget, vous devez inclure l’extrait < script > globalement sur votre site.

1. Accédez à votre Dashboard Webflow et ouvrez les Project Settings.
2. Accédez à l’onglet Custom Code.
3. Collez l’extrait < script > dans la section Footer Code. Le script sera ainsi chargé sur toutes les pages qui utilisent le widget.
4. Cliquez sur Save Changes.

Étape 4 : publiez et testez

1. Publiez votre site sur le domaine de préproduction Webflow ou sur votre domaine personnalisé.
2. Ouvrez votre site dans un navigateur afin de vérifier que le widget s’affiche et fonctionne comme prévu.

Important : le code personnalisé ne s’affiche pas dans le Designer de Webflow. Vous devez publier votre site pour voir le widget en ligne.

Problèmes fréquents et dépannage

Vous rencontrez des difficultés lors de la configuration de l’intégration ? Pas d’inquiétude, les conseils ci-dessous devraient vous aider.

1. Le widget ne s’affiche pas

• Cause : extraits < script > ou < div > manquants ou mal placés.
• Solution : assurez-vous que l’extrait < script > se trouve dans la section Footer Code et que l’extrait < div > est correctement placé dans un Embed Element.

2. Widget mal aligné

• Cause : positionnement ou mise en forme incorrecte de l’Embed Element.
• Solution : utilisez le Style Panel de Webflow pour ajuster les dimensions et l’alignement de l’Embed Element.

3. Erreurs

• Cause : conflits avec d’autres scripts ou restrictions du navigateur.
• Solution : utilisez la console développeur du navigateur pour identifier et corriger les erreurs JavaScript.

Conseils avancés

Voici ce qu’il faut savoir si vous souhaitez personnaliser le widget, le tester sur différents appareils ou le réutiliser sur plusieurs pages.

• Personnalisation du widget : utilisez le Style Panel de Webflow ou du CSS personnalisé pour ajuster l’apparence du widget, notamment sa taille, son alignement ou ses couleurs.
• Test sur différents appareils : utilisez les outils de conception responsive de Webflow pour vous assurer que le widget fonctionne parfaitement sur ordinateur, tablette et mobile.
• Réutilisation du widget : enregistrez l’Embed Element en tant que Component si vous prévoyez d’utiliser le widget sur plusieurs pages. Vous bénéficierez ainsi d’une mise en forme cohérente et d’une gestion plus simple.

En conclusion

L’intégration du widget d’IA conversationnelle d’ElevenLabs dans Webflow est simple grâce aux fonctionnalités Embed Element et Custom Code de la plateforme. Que vous souhaitiez accroître l’engagement sur une seule page ou sur l’ensemble de votre site, suivez les étapes ci-dessus pour commencer.

Pour obtenir de l’aide supplémentaire, n’hésitez pas à contacter le support d’ElevenLabs ou à consulter les forums de la communauté Webflow. 

Si ce n’est pas déjà fait, inscrivez-vous dès aujourd’hui à la plateforme d’agents IA d’ElevenLabs pour lancer le processus. 

FAQ