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

Vous souhaitez améliorer votre service client et l’engagement en ajoutant l’IA conversationnelle d’ElevenLabs à votre site Wix ? Vous êtes au bon endroit. Ce guide vous accompagne à chaque étape du processus et vous aide à éviter les erreurs courantes.

Avant de commencer

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

1. Compte Wix Premium : l’intégration de JavaScript personnalisé est disponible uniquement avec les forfaits Premium.
2. Compte ElevenLabs : vous avez besoin d’un compte ElevenLabs pour créer des agents vocaux d’IA conversationnelle. S’inscrire ici.
3. Accès à l’éditeur Wix avec le mode développeur activé : vous aurez besoin du mode développeur pour ajouter du code personnalisé à votre site.

Guide étape par étape

Étape 1 : préparer votre widget ElevenLabs

1. Connectez-vous à votre compte ElevenLabs.
2. Accédez à la section IA conversationnelle.
3. Configurez votre agent conversationnel et copiez le code d’intégration JavaScript fourni.

Étape 2 : activer le mode développeur dans Wix

1. Ouvrez votre site Wix dans l’éditeur.
2. Cliquez sur Mode développeur dans le menu supérieur pour activer des fonctionnalités avancées, comme l’ajout de code personnalisé.

Remarque : si le mode développeur n’est pas visible, vérifiez que vous utilisez l’éditeur Wix complet, et non Wix ADI (Artificial Design Intelligence).

Étape 3 : ajouter le code d’intégration JavaScript

1. Dans l’éditeur Wix, accédez à Paramètres > Code personnalisé.
2. Cliquez sur + Ajouter du code personnalisé.
3. Collez le code JavaScript d’ElevenLabs dans le champ prévu à cet effet.
4. Sous Appliquer le code à, sélectionnez Toutes les pages, ou choisissez une page spécifique pour le widget.
5. Enregistrez et publiez vos modifications.

Problèmes courants et dépannage

Vous rencontrez un problème lors de l’ajout d’un widget d’IA conversationnelle à votre site Wix ? Suivez ces étapes simples pour le résoudre.

Problème 1 : le widget se déconnecte ou ne se charge pas

• Cause : configuration incorrecte de l’Allowlist ou utilisation d’un forfait Wix gratuit.
• Solution : assurez-vous que l’URL de votre site est supprimée de l’Allowlist ou correctement configurée dans le Dashboard ElevenLabs.

Problème 2 : JavaScript ne fonctionne pas

• Cause : le code JavaScript n’a pas été ajouté correctement.
• Solution : vérifiez que le JavaScript est bien collé dans le champ approprié sous Code personnalisé.

Problème 3 : forfait Wix gratuit

• Cause : l’intégration de JavaScript personnalisé n’est pas prise en charge avec les forfaits Wix gratuits.
• Solution : passez à un forfait Wix Premium.

Conseils avancés

Pour offrir la meilleure expérience possible aux visiteurs de votre site, suivez ces bonnes pratiques avancées. 

Ajuster l’Allowlist

Si votre widget ne fonctionne toujours pas après l’intégration du code, procédez comme suit :

1. Connectez-vous à votre compte ElevenLabs.
2. Accédez aux paramètres de l’Allowlist de votre agent d’IA conversationnelle.
3. Assurez-vous que le domaine de votre site est correctement ajouté. Si le problème persiste, essayez de supprimer votre domaine de l’Allowlist, puis testez à nouveau.

Tester sur un domaine en ligne

Le widget peut ne pas fonctionner correctement en mode aperçu de Wix. Publiez votre site et testez-le sur le domaine en ligne pour vérifier son bon fonctionnement.

Tester la compatibilité entre navigateurs

Une fois votre widget en ligne, testez-le dans plusieurs navigateurs, comme Chrome, Firefox, Edge et Safari. Certaines fonctionnalités peuvent se comporter différemment selon les navigateurs, en raison de variations dans le traitement de JavaScript.

1. Ouvrez votre site dans chaque navigateur.
2. Interagissez avec le widget et vérifiez sa réactivité.
3. Recherchez les problèmes tels qu’une mise en forme défectueuse ou des erreurs de fonctionnement. En cas de problème, vérifiez votre code JavaScript ou contactez l’assistance ElevenLabs.

Compatibilité mobile

Vérifiez que le widget fonctionne parfaitement sur les appareils mobiles, car de nombreux utilisateurs accèdent aux sites web depuis un smartphone ou une tablette.

1. Utilisez l’éditeur mobile de Wix pour prévisualiser la mise en page mobile de votre site.
2. Testez le widget sur des appareils physiques pour confirmer son bon fonctionnement et sa simplicité d’utilisation.
3. Vérifiez qu’aucun élément ne se chevauche et qu’il n’y a pas de problème de mise en forme. Si des ajustements sont nécessaires, utilisez les outils de conception mobile de Wix pour optimiser son emplacement et sa taille.

Conseils de débogage JavaScript

Si votre widget ne fonctionne pas comme prévu, les outils de développement de votre navigateur peuvent vous aider à identifier le problème.

1. Ouvrez votre site dans un navigateur, de préférence Chrome.
2. Faites un clic droit n’importe où sur la page et sélectionnez Inspecter pour ouvrir les outils de développement.
3. Accédez à l’onglet Console et recherchez les messages d’erreur liés au widget.
4. Si vous voyez des erreurs, vérifiez le code d’intégration JavaScript et assurez-vous que toutes les URL nécessaires sont ajoutées à l’Allowlist. Cette méthode peut également révéler des dépendances manquantes ou d’autres problèmes empêchant le bon fonctionnement du widget.

Conclusion

L’intégration du widget d’IA conversationnelle d’ElevenLabs à Wix nécessite une configuration minutieuse, mais en suivant les bonnes étapes, vous pouvez le mettre en service rapidement. Assurez-vous de disposer d’un forfait Wix Premium, suivez les étapes ci-dessus et résolvez les problèmes courants si nécessaire. Si vous rencontrez d’autres difficultés, contactez l’assistance ElevenLabs assistance pour obtenir de l’aide.

Ou, si ce n’est pas déjà fait, inscrivez-vous à la plateforme d’agents d’IA dès aujourd’hui.