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

Le ElevenLabs Conversational AI widget vous permet d'améliorer votre site Framer avec des conversations interactives pilotées par l'IA. Que vous souhaitiez augmenter l'engagement client ou améliorer votre support client, le 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 d'avoir les éléments suivants :

1. Compte Framer: Accès à un projet Framer avec la possibilité d'ajouter du code personnalisé (disponible sur les plans payants).
2. Compte ElevenLabs: Configurez votre agent Conversational AI et copiez son code d'intégration (y compris les extraits < script > et < div >).
3. Familiarité avec Framer: Compréhension de base des paramètres du site Framer et des éléments d'intégration

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 inclut :
4. • Un extrait < script > pour charger la fonctionnalité du widget.
   • Un extrait < div > pour définir où le widget apparaîtra.

Étape 2 : Ajoutez le script aux paramètres du site Framer

1. Ouvrez votre projet Framer.
2. Dans le coin supérieur droit, cliquez sur Paramètres du projet.
3. Accédez à l'onglet Général et faites défiler jusqu'à la section Code personnalisé.
4. Collez l'extrait < script > de votre code d'intégration ElevenLabs dans le champ Fin de la balise < body >.
5. Enregistrez vos modifications. Cette étape garantit que le script requis est chargé pour votre site.

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

1. Dans votre projet Framer, allez à la page où vous souhaitez que le widget apparaisse.
2. Ajoutez un élément d'intégration depuis la section Utilitaires du menu Insérer.
3. Sélectionnez l'élément d'intégration sur votre canevas pour accéder à ses paramètres.
4. Changez le type en HTML.
5. Collez l'extrait < div > du code d'intégration ElevenLabs dans le champ HTML.
6. Positionnez et dimensionnez l'élément d'intégration sur votre canevas selon vos besoins.

Étape 4 : Publiez et testez

1. Cliquez sur Publier pour rendre vos modifications actives.
2. Ouvrez votre site dans un navigateur pour vérifier que le widget apparaît et fonctionne correctement.
3. • Remarque : Le code personnalisé ne s'affiche pas en mode Aperçu de Framer—il doit être publié pour être visible.

Problèmes courants et dépannage

Si vous avez du mal à faire fonctionner l'intégration, ne vous inquiétez pas—consultez ces conseils de dépannage ci-dessous.

Problème 1 : Widget non affiché

• Cause: Extrait < script > ou < div > manquant ou mal placé.
• Solution: Assurez-vous que l'extrait < script > est ajouté au champ Fin de la balise < body > dans les paramètres du site et que l'extrait < div > est dans l'élément d'intégration.

Problème 2 : Widget partiellement visible

• Cause: Élément d'intégration mal dimensionné ou positionné.
• Solution: Ajustez les dimensions et l'alignement de l'élément d'intégration 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 a les permissions pour charger des scripts externes.

Conseils avancés

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

• Personnalisation du widget: Utilisez du CSS personnalisé pour styliser le widget et l'intégrer harmonieusement au design de votre site.
• Test sur différents appareils: Les outils de design réactif de Framer facilitent le test du widget sur les vues mobile, tablette et bureau pour assurer un bon ajustement.
• Ajout de widgets à des pages spécifiques: Pour inclure le widget uniquement sur des pages spécifiques, ajoutez l'extrait < div > à un élément d'intégration sur les pages souhaitées et assurez-vous que l'extrait < script > est présent dans les paramètres du site.

Dernières réflexions

En suivant ce guide, vous pouvez enrichir votre site Framer avec des interactions dynamiques pilotées par l'IA, adaptées aux besoins de votre audience. Publiez vos modifications, testez votre configuration et laissez votre Conversational AI commencer à engager les visiteurs dès aujourd'hui. Pour plus d'assistance, contactez ElevenLabs support.

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