Comment ajouter le widget Conversational AI d’ElevenLabs à votre site Framer

Le widget Conversational AI d’ElevenLabs vous permet d’enrichir votre site Framer de conversations interactives propulsées par l’IA. Que vous cherchiez à renforcer l’engagement client ou à améliorer votre support client, Conversational AI peut vous aider. 

Dans ce guide, nous vous expliquons comment ajouter le widget à votre site Framer. Vous apprendrez à configurer des widgets pour l’ensemble du site ou pour des pages spécifiques, et à résoudre les problèmes courants.

Avant de commencer

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

1. Compte Framer : accès à un projet Framer permettant d’ajouter du code personnalisé (disponible avec les offres payantes).
2. Compte ElevenLabs : configurez votre agent Conversational AI et copiez son code d’intégration (y compris les extraits < script > et < div >).
3. Connaissance de Framer : compréhension de base des Site Settings et des Embed Elements de Framer.

Guide étape par étape

Étape 1 : préparez votre widget ElevenLabs

1. Connectez-vous à votre compte ElevenLabs.
2. Accédez à la section Conversational AI.
3. Configurez votre agent IA et copiez le code d’intégration fourni, 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 script aux paramètres du site Framer

1. Ouvrez votre projet Framer.
2. Dans l’angle supérieur droit, cliquez sur Project Settings.
3. Accédez à l’onglet General, puis faites défiler jusqu’à la section Custom Code.
4. Collez l’extrait < script > de votre code d’intégration ElevenLabs dans le champ End of < body > tag.
5. Enregistrez vos modifications. Cette étape garantit le chargement du script requis sur votre site.

Étape 3 : ajoutez le widget à une page spécifique

1. Dans votre projet Framer, accédez à la page où vous souhaitez afficher le widget.
2. Ajoutez un Embed Element depuis la section Utilities du menu Insert.
3. Sélectionnez l’Embed Element sur votre canvas pour accéder à ses paramètres.
4. Définissez Type sur HTML.
5. Collez l’extrait < div > du code d’intégration ElevenLabs dans le champ HTML.
6. Positionnez et dimensionnez l’Embed Element sur votre canvas selon vos besoins.

Étape 4 : publiez et testez

1. Cliquez sur Publish pour mettre vos modifications en ligne.
2. Ouvrez votre site dans un navigateur pour vérifier que le widget s’affiche et fonctionne correctement.
3. • Remarque : le code personnalisé ne s’affiche pas dans le mode Preview de Framer. Vous devez publier votre site pour le visualiser.

Problèmes courants et résolution

Si l’intégration ne fonctionne pas comme prévu, consultez les conseils de résolution ci-dessous. 

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

• Cause : extrait < script > ou < div > manquant ou mal placé.
• Solution : vérifiez que l’extrait < script > est ajouté au champ End of < body > tag dans les Site Settings et que l’extrait < div > figure dans l’Embed Element.

Problème 2 : le widget n’est que partiellement visible

• Cause : l’Embed Element est mal dimensionné ou positionné.
• Solution : ajustez les dimensions et l’alignement de l’Embed Element dans l’éditeur Framer.

Problème 3 : erreurs de script

• Cause : scripts en conflit ou ressources externes bloquées.
• Solution : ouvrez la console du navigateur pour vérifier les erreurs JavaScript. Assurez-vous que Framer est autorisé à charger des scripts externes.

Conseils avancés

Vous recherchez des options de personnalisation plus avancées ? Ces conseils vous aideront. 

• Personnaliser le widget : utilisez du CSS personnalisé pour styliser le widget et l’intégrer harmonieusement au design de votre site.
• Tester sur différents appareils : les outils de design responsive de Framer facilitent les tests du widget sur mobile, tablette et ordinateur afin d’assurer un dimensionnement adapté.
• Ajouter des widgets à des pages spécifiques : pour inclure le widget uniquement sur certaines pages, ajoutez l’extrait < div > à un Embed Element sur les pages concernées et assurez-vous que l’extrait < script > est présent dans les Site Settings.

En conclusion 

En suivant ce guide, vous pouvez enrichir votre site Framer d’interactions dynamiques propulsées par l’IA, adaptées aux besoins de votre audience. Publiez vos modifications, testez votre configuration et laissez votre IA conversationnelle interagir avec vos visiteurs dès aujourd’hui. Pour obtenir de l’aide, contactez le support d’ElevenLabs.

Inscrivez-vous aux agents vocaux IA dès aujourd’hui pour commencer.