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

ElevenLabs’ Conversational AI est un puissant outil de support client pour créer des expériences interactives basées sur l'IA qui augmentent l'engagement. Si vous avez un site WordPress, vous pouvez facilement intégrer du HTML et JavaScript personnalisés, y compris des fonctionnalités dynamiques comme le Conversational AI d'ElevenLabs.

Dans ce guide, nous vous montrerons comment ajouter le widget Conversational AI à votre site WordPress en utilisant des blocs HTML personnalisés pour des pages spécifiques et l'injection de code pour une fonctionnalité globale.

Avant de commencer

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

1. Plan WordPress: Pour les utilisateurs de WordPress.com, un plan 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 Conversational AI dans ElevenLabs et copiez le code d'intégration, qui inclut des extraits < script > et < div >.
3. Connaissances de base sur WordPress: La familiarité avec l'ajout de blocs, l'édition de pages ou l'utilisation de plugins est utile.

Guide étape par étape

Étape 1 : Préparez votre widget ElevenLabs

1. Connectez-vous à votre compte ElevenLabs.
2. Allez dans la section Conversational AI.
3. Configurez votre agent IA et 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.

Étape 2 : Ajoutez le widget à une page spécifique en utilisant des blocs HTML personnalisés

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

1. Connectez-vous à votre tableau de bord WordPress.
2. Allez dans Pages et créez une nouvelle page ou modifiez une page existante.
3. Cliquez sur l'icône + pour ajouter un nouveau bloc.
4. Recherchez et sélectionnez HTML personnalisé parmi les options de blocs.
5. Collez l'extrait < div > de votre code d'intégration ElevenLabs dans le bloc.
6. Cliquez sur Aperçu pour confirmer que le widget s'affiche correctement.
7. Publiez ou mettez à jour la page pour rendre les modifications actives.

Étape 3 : Ajoutez le script globalement en utilisant un plugin ou les paramètres du thème

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

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

1. Installez et activez un plugin comme Header Footer Code Manager.
2. Allez dans les paramètres du plugin et créez un nouvel extrait de code.
3. Collez l'extrait < script > dans la section Pied de page.
4. Définissez 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. Allez dans Apparence > Éditeur de thème dans votre tableau de bord WordPress.
2. Ouvrez le fichier footer.php de votre thème actif.
3. Collez l'extrait < script > juste avant la balise de fermeture < /body >.
4. Enregistrez le fichier.

Étape 4 : Publiez et testez

1. Visitez la page où vous avez ajouté le widget pour confirmer qu'il apparaît et fonctionne correctement.
2. Testez le widget sur plusieurs appareils et navigateurs pour vous assurer qu'il fonctionne parfaitement.

Problèmes courants et dépannage

Vous avez du mal à faire fonctionner le widget ? Ces conseils pourraient vous aider.

Problème 1 : Widget non affiché

• 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 : Widget mal aligné

• Cause: Alignement du bloc ou style manquant.
• Solution: Utilisez les outils d'alignement de blocs de WordPress ou ajoutez du CSS personnalisé pour positionner correctement le widget.

Problème 3 : Conflits de plugins

• Cause: Autres plugins interférant avec l'exécution de JavaScript.
• Solution: Désactivez les plugins un par un pour identifier le conflit.

Conseils avancés

Découvrez ces conseils pour vous aider à faire fonctionner le widget comme vous le souhaitez. 

• Personnalisation du widget : Utilisez la section Personnaliser > CSS supplémentaire de WordPress pour styliser le widget, en veillant à ce qu'il corresponde au design de votre site.
• Tests sur différents appareils : Testez le widget sur ordinateur, tablette et mobile pour garantir une expérience utilisateur cohérente.
• Widgets spécifiques à une page : Si vous souhaitez que le widget apparaisse uniquement sur certaines pages, évitez d'ajouter l'extrait < script > globalement. Incluez-le plutôt dans un plugin ou un bloc qui cible ces pages.

Dernières réflexions

Ajouter le widget Conversational AI d'ElevenLabs à votre site WordPress est un moyen efficace d'engager les visiteurs avec des interactions basées sur l'IA. Que vous l'intégriez sur une seule page ou sur l'ensemble de votre site, WordPress fournit les outils nécessaires pour une intégration fluide.

Suivez les étapes décrites ici, testez votre implémentation de manière approfondie et apportez les ajustements nécessaires. Si vous rencontrez des problèmes, n'hésitez pas à contacter le support d'ElevenLabs pour obtenir de l'aide.

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