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

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

Ce guide vous explique comment ajouter le widget à votre site Framer. Vous apprendrez à configurer des widgets à l’échelle du site ou pour des pages spécifiques, ainsi qu’à 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 forfaits payants).
2. Compte ElevenLabs : configurez votre agent d’IA conversationnelle et copiez son code d’intégration (y compris les extraits < script > et < div >).
3. Connaissance de Framer : compréhension de base des paramètres du site et des Embed Elements de Framer

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 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 : ajouter 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 que le script requis est chargé pour votre site.

Étape 3 : ajouter 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 canevas pour accéder à ses paramètres.
4. Définissez le Type sur HTML.
5. Collez l’extrait < div > du code d’intégration ElevenLabs dans le champ HTML.
6. Positionnez et redimensionnez l’Embed Element sur votre canevas selon vos besoins.

Étape 4 : publier et tester

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 en mode Preview dans Framer, vous devez publier le site pour le voir.

Problèmes courants et dépannage

Si vous rencontrez des difficultés avec l’intégration, consultez les conseils de dépannage ci-dessous. 

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

• Cause : extrait < script > ou < div > manquant ou mal placé.
• Solution : assurez-vous que l’extrait < script > est ajouté au champ End of < body > tag dans Site Settings et que l’extrait < div > se trouve 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 dispose des autorisations nécessaires pour charger des scripts externes.

Conseils avancés

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

• 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 conception responsive de Framer facilitent les tests du widget sur mobile, tablette et ordinateur afin de garantir une mise à l’échelle adéquate.
• 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 souhaitées et assurez-vous que l’extrait < script > est présent dans 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.

S’inscrire aux agents vocaux IA dès aujourd’hui pour commencer.