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

Vous cherchez à augmenter l'engagement et offrir un support client de niveau supérieur sur votre site Squarespace ? Le Conversational AI d'ElevenLabs peut vous aider.

Ce guide vous expliquera comment ajouter le widget à votre site Squarespace, que ce soit sur une page spécifique ou sur l'ensemble de votre site. Il expliquera également les problèmes courants que vous pourriez rencontrer et vous fournira des conseils pour les résoudre.

Conversational AI

Créez des agents vocaux pour votre entreprise avec notre IA conversationnelle

Avant de commencer

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

1. Compte Squarespace: Accès à un plan Business ou Commerce, car ces plans vous permettent d'utiliser les blocs de code et l'injection de code.
2. Compte ElevenLabs: Configurez votre agent Conversational AI dans ElevenLabs et copiez le code d'intégration (contenant les extraits < script > et < div >).
3. Familiarité avec Squarespace: Connaissance de base pour ajouter des blocs ou naviguer dans les paramètres d'injection de code.

Guide étape par étape

Étape 1 : Préparez votre widget ElevenLabs

1. Connectez-vous à votre compte ElevenLabs.
2. Allez dans la section Conversational AI et configurez votre agent IA.
3. Copiez le code d'intégration fourni, qui se compose de :
4. • Un extrait < script > pour charger la fonctionnalité du widget.
   • Un extrait < div > pour spécifier où le widget apparaîtra.

Étape 2 : Ajoutez le widget en utilisant un bloc de code

Si vous souhaitez le widget sur une page ou un article de blog spécifique, utilisez un bloc de code.

1. Accédez à la page ou à l'article Squarespace où vous souhaitez que le widget apparaisse.
2. Cliquez sur le symbole + pour ajouter un bloc.
3. Sélectionnez Code dans le menu.
4. Collez l'extrait < div > du code d'intégration ElevenLabs dans le bloc de code.
5. Enregistrez le bloc et assurez-vous qu'il est correctement positionné sur la page.

Étape 3 : Ajoutez le script en utilisant l'injection de code

Pour garantir le bon fonctionnement du widget, vous devez inclure l'extrait < script > en utilisant l'injection de code.

1. Depuis votre tableau de bord Squarespace, allez dans Paramètres > Avancé > Injection de code.
2. Collez l'extrait < script > dans la section Pied de page.
3. Enregistrez vos modifications.

Remarque : La section Pied de page garantit que le script est chargé sur toutes les pages, activant la fonctionnalité des widgets ajoutés via les blocs de code.

Étape 4 : Publiez et testez

1. Publiez la page ou l'article où le widget a été ajouté.
2. Ouvrez votre site en ligne pour vérifier que le widget apparaît et fonctionne correctement. Important : Le code personnalisé ne s'affiche souvent pas dans l'aperçu de l'éditeur Squarespace—publiez la page pour tester l'intégration.

Problèmes courants et dépannage

Si vous avez du mal à faire fonctionner l'intégration correctement, ne vous inquiétez pas—ces conseils devraient vous aider.

Problème 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 d'injection de code du pied de page et que l'extrait < div > est correctement ajouté à un bloc de code.

Problème 2 : Widget partiellement visible

• Cause: Taille du bloc de code ou conflits de mise en page.
• Solution: Ajustez la taille et l'alignement du bloc. Utilisez du CSS personnalisé si nécessaire pour un placement précis.

Problème 3 : Erreurs de script

• Cause: Scripts en conflit ou restrictions du navigateur.
• Solution: Utilisez la console du navigateur (par exemple, Chrome DevTools) pour identifier les erreurs. Résolvez les conflits de script ou vérifiez les problèmes de CORS.

Conseils avancés

Vous cherchez des options de personnalisation plus avancées ? Consultez les conseils ci-dessous.

• Personnalisation du widget : Utilisez du CSS personnalisé dans la section Design > CSS personnalisé de Squarespace pour styliser le widget. Ajustez les couleurs, les polices ou le placement pour s'aligner avec le design de votre site.
• Test sur différents appareils : Testez votre site sur différents appareils (ordinateur, tablette et mobile) pour vous assurer que le widget s'adapte et fonctionne correctement sur toutes les tailles d'écran.
• Ajout de widgets à plusieurs pages : Pour inclure le widget sur plusieurs pages, répétez le processus de bloc de code pour chaque page et assurez-vous que le script est actif dans le pied de page d'injection de code.

Dernières réflexions

Ajouter le widget Conversational AI d'ElevenLabs à votre site Squarespace est un moyen simple d'améliorer l'interactivité et l'engagement. Que vous l'intégriez sur une seule page ou sur l'ensemble de votre site, les fonctionnalités de blocs de code et d'injection de code de Squarespace rendent l'intégration fluide.

Suivez ce guide étape par étape, testez votre configuration minutieusement et profitez des avantages de l'IA conversationnelle sur votre site. Pour toute assistance supplémentaire, contactez le support ElevenLabs.

Ou, si ce n'est pas déjà fait, inscrivez-vous pour Conversational AI dès aujourd'hui.