Comment ajouter le widget Conversational AI d'ElevenLabs à votre site WordPress

L’IA conversationnelle d’ElevenLabs est un puissant outil d’assistance client qui permet de créer des expériences interactives propulsées par l’IA et d’améliorer l’engagement. Si vous avez un site WordPress, vous pouvez facilement y intégrer du HTML et du JavaScript personnalisés, ainsi que des fonctionnalités dynamiques comme l’IA conversationnelle d’ElevenLabs.

Dans ce guide, nous vous expliquons comment ajouter le widget d’IA conversationnelle à votre site WordPress à l’aide de blocs HTML personnalisés pour des pages spécifiques et de l’injection de code pour une utilisation à l’échelle du site.

Avant de commencer

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

1. Forfait WordPress : pour les utilisateurs de WordPress.com, un forfait Business ou Commerce est nécessaire pour ajouter du JavaScript personnalisé. Les utilisateurs de WordPress auto-hébergé peuvent ajouter du code sans ces restrictions.
2. Compte ElevenLabs : configurez votre agent vocal IA dans ElevenLabs et copiez le code d’intégration, qui comprend des extraits < script > et < div >.
3. Connaissances de base de WordPress : il est utile de savoir ajouter des blocs, modifier des pages ou utiliser des plugins.

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. Configurez votre agent IA et copiez le code d’intégration, qui comprend :
4. • Un extrait < script > pour charger les fonctionnalités du widget.
   • Un extrait < div > pour définir l’emplacement du widget.

Étape 2 : ajoutez le widget à une page spécifique à l’aide de blocs HTML personnalisés

Pour afficher le widget sur une page spécifique, utilisez le bloc HTML personnalisé de WordPress.

1. Connectez-vous à votre Dashboard WordPress.
2. Accédez à Pages, puis créez une page ou modifiez-en une existante.
3. Cliquez sur l’icône + pour ajouter un bloc.
4. Recherchez et sélectionnez HTML personnalisé dans les options de bloc.
5. Collez l’extrait < div > de votre code d’intégration ElevenLabs dans le bloc.
6. Cliquez sur Prévisualiser pour vérifier que le widget s’affiche correctement.
7. Publiez ou mettez à jour la page pour appliquer les modifications.

Étape 3 : ajoutez le script globalement à l’aide d’un plugin ou des paramètres du thème

Pour que le widget fonctionne correctement, vous devez inclure l’extrait < script > globalement.

Option A : utiliser un plugin (recommandé pour les non-développeurs)

1. Installez et activez un plugin tel que Header Footer Code Manager.
2. Accédez aux paramètres du plugin et créez un nouvel extrait de code.
3. Collez l’extrait < script > dans la section Footer.
4. Configurez l’extrait pour qu’il s’exécute sur toutes les pages.
5. Enregistrez vos modifications.

Option B : ajouter le script directement à votre thème

1. Dans votre Dashboard WordPress, accédez à Apparence > Éditeur de thème.
2. Ouvrez le fichier footer.php de votre thème actif.
3. Collez l’extrait < script > juste avant la balise fermante < /body >.
4. Enregistrez le fichier.

Étape 4 : publiez et testez

1. Ouvrez la page où vous avez ajouté le widget pour vérifier qu’il s’affiche et fonctionne correctement.
2. Testez le widget sur plusieurs appareils et navigateurs pour vous assurer qu’il fonctionne sans problème.

Problèmes courants et dépannage

Vous n’arrivez pas à faire fonctionner le widget ? Ces conseils peuvent vous aider. 

Problème 1 : le widget ne s’affiche pas

• Cause : extraits < script > ou < div > manquants ou mal placés.
• Solution : vérifiez que le < script > est ajouté globalement et que le < div > est placé sur la page.

Problème 2 : le widget est mal aligné

• Cause : alignement du bloc ou styles manquants.
• Solution : utilisez les outils d’alignement des blocs WordPress ou ajoutez du CSS personnalisé pour positionner correctement le widget.

Problème 3 : conflits entre plugins

• Cause : d’autres plugins interfèrent avec l’exécution de JavaScript.
• Solution : désactivez les plugins un par un pour identifier le conflit.

Conseils avancés

Consultez ces conseils pour faire fonctionner le widget comme vous le souhaitez. 

• Personnaliser le widget : utilisez la section Personnaliser > CSS additionnel de WordPress pour styliser le widget et l’harmoniser avec le design de votre site.
• Tester sur plusieurs appareils : testez le widget sur ordinateur, tablette et mobile afin de garantir une expérience utilisateur cohérente.
• Widgets propres à certaines pages : si vous souhaitez que le widget apparaisse uniquement sur certaines pages, évitez d’ajouter l’extrait < script > globalement. Intégrez-le plutôt dans un plugin ou un bloc ciblant ces pages.

Pour conclure

Ajouter le widget d’IA conversationnelle d’ElevenLabs à votre site WordPress est un moyen efficace d’interagir avec vos visiteurs grâce à des échanges propulsés par l’IA. Que vous l’intégriez à une seule page ou à l’ensemble de votre site, WordPress fournit les outils nécessaires pour une intégration fluide.

Suivez les étapes présentées ici, testez soigneusement votre intégration et apportez les ajustements nécessaires. En cas de problème, n’hésitez pas à contacter l’assistance d’ElevenLabs.

Ou, si ce n’est pas déjà fait, inscrivez-vous à la plateforme Agents d’ElevenLabs dès aujourd’hui pour démarrer.