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

Vous souhaitez faire passer votre site Ghost au niveau supérieur ? Le Conversational AI d'ElevenLabs transforme l'engagement client. En ajoutant le Conversational AI d'ElevenLabs à votre plateforme Ghost, vous pouvez offrir un support client interactif et réaliste qui rapproche votre audience de votre marque.

Avant de commencer

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

1. Un site Ghost: Vous avez besoin d'un plan payant ou d'une instance Ghost auto-hébergée. Le JavaScript personnalisé n'est pas pris en charge sur le plan gratuit de Ghost.
2. Accès au panneau d'administration Ghost: Vous aurez besoin d'accéder aux paramètres d'injection de code ou à l'éditeur.
3. Un compte ElevenLabs: Configurez un agent Conversational AI et copiez son code d'intégration JavaScript.

Guide étape par étape

Option 1 : Ajouter le widget globalement avec l'injection de code

Si vous souhaitez que le widget apparaisse sur toutes les pages de votre site, utilisez la fonction d'injection de code de Ghost.

Étape 1 : Préparez votre widget

1. Connectez-vous à votre compte ElevenLabs.
2. Allez dans la section Conversational AI et configurez votre agent.
3. Copiez le code d'intégration JavaScript fourni.

Étape 2 : Accédez aux paramètres d'injection de code

1. Connectez-vous à votre panneau d'administration Ghost.
2. Allez dans Paramètres > Injection de code.

Étape 3 : Intégrez le code JavaScript

1. Collez le code JavaScript copié dans le champ Pied de page du site.
2. Enregistrez vos modifications.

Étape 4 : Testez l'intégration

1. Ouvrez votre site Ghost pour vous assurer que le widget apparaît et fonctionne comme prévu.
2. S'il ne s'affiche pas, vérifiez le placement du code et votre configuration ElevenLabs.

Option 2 : Ajouter le widget à des pages ou articles spécifiques avec le signe plus

Si vous préférez que le widget apparaisse uniquement sur certaines pages ou articles, vous pouvez l'intégrer directement dans le contenu en utilisant le signe plus dans l'éditeur de Ghost.

Étape 1 : Préparez votre widget

1. Copiez le code d'intégration JavaScript depuis votre compte ElevenLabs.

Étape 2 : Modifiez un article ou une page dans Ghost

1. Ouvrez l'éditeur Ghost pour la page ou l'article où vous souhaitez ajouter le widget.
2. Cliquez sur le signe plus (+) pour ouvrir le menu des blocs.

Étape 3 : Insérez un bloc HTML

1. Sélectionnez HTML parmi les options de blocs.
2. Collez le code JavaScript dans le bloc HTML.

Étape 4 : Publiez et testez

1. Enregistrez et publiez la page ou l'article.
2. Ouvrez la page pour confirmer que le widget s'affiche et fonctionne comme prévu.

Problèmes courants et dépannage

L'intégration ne fonctionne pas comme prévu ? Suivez les étapes ci-dessous pour résoudre les problèmes rencontrés.

Problème 1 : Widget ne se charge pas

• Cause: Le code JavaScript est mal ajouté ou incomplet.
• Solution: Vérifiez le placement du code et confirmez que votre agent ElevenLabs est correctement configuré.

Problème 2 : Conflits de script

• Cause: D'autres scripts personnalisés dans les paramètres d'injection de code peuvent entrer en conflit avec le widget.
• Solution: Désactivez temporairement les autres scripts pour tester les conflits. Réintégrez-les un par un pour identifier le problème.

Conseils avancés

Vous cherchez d'autres moyens de personnaliser le widget ? Consultez les conseils ci-dessous pour obtenir de l'aide.

• Personnalisation du placement du widget: Utilisez CSS pour ajuster l'apparence ou la position du widget lorsqu'il est ajouté via l'injection de code ou le bloc HTML. Si vous souhaitez que le widget apparaisse à un endroit constant (par exemple, pied de page ou barre latérale), modifiez les fichiers de thème Ghost. Ajoutez le code d'intégration JavaScript au fichier default.hbs, puis téléchargez à nouveau votre thème.
• Adaptabilité mobile : Testez le widget sur des appareils mobiles pour vous assurer qu'il s'adapte et fonctionne correctement. Utilisez l'aperçu réactif de Ghost ou testez directement sur des appareils physiques.
• Tests multi-navigateurs: Vérifiez que le widget fonctionne sur les navigateurs populaires, y compris Chrome, Firefox, Safari et Edge, pour garantir la cohérence pour tous les utilisateurs.
• Débogage des problèmes JavaScript: Utilisez les outils de développement de votre navigateur (par exemple, Chrome DevTools) pour inspecter les erreurs dans la console. Corrigez les problèmes tels que les dépendances manquantes ou les conflits de script.

Dernières réflexions

Intégrer le widget Conversational AI d'ElevenLabs dans Ghost est simple et flexible, vous permettant d'améliorer l'interactivité de votre site avec un minimum d'effort. Si vous rencontrez des problèmes, revoyez les étapes, testez minutieusement ou contactez le support d'ElevenLabs si nécessaire.

Inscrivez-vous pour le Conversational AI dès aujourd'hui pour commencer.