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

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

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

Avant de commencer

Avant de commencer, assurez-vous d'avoir les éléments suivants :

1. Compte Webflow: Vous avez besoin d'un Workspace Core, Growth, Agency, ou Freelancer actif, ou d'un Site Plan, pour accéder à l'élément Embed.
2. Compte ElevenLabs: Configurez votre agent IA conversationnelle dans ElevenLabs et copiez le code d'intégration fourni (qui inclut des extraits < script > et < div >).
3. Familiarité avec le Designer de Webflow: Une compréhension de base de l'ajout et de la modification des éléments Embed dans Webflow est utile.

Guide étape par étape

Étape 1 : Préparez votre widget ElevenLabs

1. Connectez-vous à votre compte ElevenLabs.
2. Allez dans la section IA conversationnelle.
3. Copiez le code d'intégration, qui inclut :
4. • Un extrait < script > pour charger la fonctionnalité du widget.
   • Un extrait < div > pour définir où le widget apparaîtra sur la page.

Étape 2 : Ajoutez le widget à une page Webflow

Pour afficher le widget sur une page spécifique, utilisez l'élément Embed.

1. Ouvrez votre projet Webflow dans le Designer.
2. Naviguez vers la page où vous souhaitez que le widget apparaisse.
3. Depuis le panneau des éléments, faites glisser l'élément Embed à l'emplacement souhaité sur la page.
4. Dans l'éditeur de code de l'élément Embed, collez l'extrait < div > du code d'intégration d'ElevenLabs.
5. Cliquez sur Enregistrer & Fermer pour appliquer les modifications.

Remarque : L'élément Embed agit comme un espace réservé pour votre widget dans le Designer. Le widget réel ne se rendra que lorsque le site sera publié.

Étape 3 : Ajoutez le script globalement

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

1. Allez dans votre tableau de bord Webflow et ouvrez les paramètres du projet.
2. Naviguez vers l'onglet Code personnalisé.
3. Collez l'extrait < script > dans la section Code du pied de page. Cela garantit que le script est chargé sur toutes les pages où le widget est utilisé.
4. Cliquez sur Enregistrer les modifications.

Étape 4 : Publiez et testez

1. Publiez votre site sur le domaine de staging de Webflow ou votre domaine personnalisé.
2. Ouvrez votre site dans un navigateur pour vérifier que le widget apparaît et fonctionne comme prévu.

Important : Le code personnalisé ne se rend pas dans le Designer de Webflow. Vous devez publier votre site pour voir le widget en direct.

Problèmes courants et dépannage

Vous avez des difficultés à configurer l'intégration ? Ne vous inquiétez pas, ces conseils devraient vous aider.

1. Widget non affiché

• Cause: Extraits < script > ou < div > manquants ou mal placés.
• Solution: Assurez-vous que l'extrait < script > est dans la section Code du pied de page, et que l'extrait < div > est correctement placé dans un élément Embed.

2. Mauvais alignement du widget

• Cause: Placement ou style incorrect de l'élément Embed.
• Solution: Utilisez le panneau de style de Webflow pour ajuster les dimensions et l'alignement de l'élément Embed.

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

Si vous souhaitez personnaliser le widget, tester sur différents appareils, ou réutiliser le widget sur plusieurs pages, voici ce que vous devez savoir.

• Personnalisation du widget: Utilisez le panneau de style de Webflow ou du CSS personnalisé pour ajuster l'apparence du widget, comme la taille, l'alignement ou les couleurs.
• Test sur différents appareils : Utilisez les outils de design réactif de Webflow pour vous assurer que le widget fonctionne parfaitement sur les appareils de bureau, tablette et mobile.
• Réutilisation du widget: Enregistrez l'élément Embed en tant que composant si vous prévoyez d'utiliser le widget sur plusieurs pages. Cela permet un style cohérent et une gestion plus facile.

Dernières réflexions

Intégrer le widget IA conversationnelle d'ElevenLabs dans Webflow est simple, grâce aux fonctionnalités d'élément Embed et de code personnalisé de la plateforme. Que vous cherchiez à améliorer l'engagement sur une seule page ou sur l'ensemble de votre site, suivez les étapes ci-dessus pour commencer.

Pour plus d'assistance, n'hésitez pas à contacter le support d'ElevenLabs ou à explorer les forums communautaires de Webflow pour obtenir des conseils supplémentaires.

Si ce n'est pas déjà fait, inscrivez-vous à ElevenLabs dès aujourd'hui pour démarrer le processus.

FAQs