LE MONDE NE S’ARRÊTE PAS.RSS
BIG CHANGE.

Édition Markdown

AI-translated from English; not yet reviewed by a fluent editor.

# Ajouter un widget vocal de FAQ ElevenLabs à une page de votre site

> Configurez un agent public ElevenLabs dédié à une FAQ, limitez les noms d’hôte autorisés, intégrez le widget sur une page et vérifiez la conversation en ligne, la confidentialité et la consommation.

By BIG CHANGE Editorial

Published: 2026-10-20T06:57:39.691Z
Updated: 2026-10-20T06:57:39.691Z
Canonical: https://bigchange.ai/blog/elevenlabs-voice-faq-widget-website-guide

![Conceptual charcoal illustration of one person speaking toward a handheld phone displaying an unbranded, unreadable web page.](https://bigchange.ai/api/media/file/elevenlabs-public-voice-faq-phone-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

Un widget ElevenLabs permet aux visiteurs de poser des questions oralement sur un site. Ce guide s’adresse à la personne qui gère la page et l’agent ElevenLabs. Il suit une FAQ publique limitée, de la configuration au contrôle de la page en ligne, puis explique comment examiner accès, conversations et consommation. Il reflète la documentation vérifiée le 20 octobre 2026. BIG CHANGE n’a créé aucun agent, intégré aucun widget ni effectué d’appel de test.

## Le grand changement

- **Quoi :** ElevenLabs documente un widget de site pour un agent public ElevenAgents, dont le mode par défaut est vocal.
- **Comment :** La page charge un élément personnalisé avec l’identifiant visible de l’agent. Sa liste de noms d’hôte autorisés contrôle les origines de site qui peuvent se connecter.
- **Pourquoi cela compte :** Un propriétaire peut vérifier un parcours d’aide vocale sur une page, mais doit approuver les informations publiques, l’avis aux visiteurs et les frais possibles avant exposition. Une liste de noms d’hôte n’identifie pas chaque visiteur.

## Préparer une FAQ publique et un petit test

Il faut l’autorisation de gérer un agent ElevenLabs et de modifier et publier une page. Prévoyez une page HTTPS, un navigateur avec microphone et une personne pouvant approuver la FAQ et écouter les réponses. L’outil de publication doit autoriser l’élément personnalisé et le script documentés ; utilisez sa méthode actuelle d’ajout de HTML personnalisé. L’exemple est l’intégration HTML simple du fournisseur, pas une procédure propre à une plateforme.

Notez quelques **faits publics approuvés** auxquels l’agent peut répondre et un contact humain pour le reste. Choisissez une question couverte par ces faits et une question à refuser ou à transmettre à une personne. Excluez dossiers clients, règles privées, informations de compte et secrets API. Désignez qui approuve la voix et l’avis aux visiteurs. Vérifiez que la voix et les conditions du compte autorisent l’usage prévu ; ce guide n’établit aucun droit commercial universel sur les voix.

Avant tout test vocal, vérifiez votre formule, crédits restants, paiement à l’usage et informations tarifaires du modèle sélectionné. Selon ElevenLabs, créer un agent est gratuit, mais les appels vocaux connectés consomment des ressources et les frais LLM peuvent être distincts. Le temps de connexion peut dépasser le temps parlé. Faites approuver les dépenses des tests du tableau de bord et du site avant de les lancer. Une durée limite par appel ne constitue pas un plafond mensuel.

## Configurer l’agent dédié

1. **Créez un agent de FAQ public distinct** dans le tableau de bord ElevenLabs. Utilisez une configuration vide ou un modèle approuvé, puis examinez les connaissances et outils hérités. Retirez connaissances privées, réservation, CRM, webhook et autres actions inutiles. Définissez objectif et limites à partir des faits approuvés, ajoutez le contact humain et choisissez une voix et une langue autorisées. Ne transformez pas un agent privé existant en widget public en désactivant son authentification.
2. Dans **Channels → Widget → Interface**, choisissez l’interface vocale prévue et examinez textes et conditions présentés aux visiteurs. Le manuel appelle aussi une partie de cet écran l’onglet **Widget** : vérifiez donc les contrôles enregistrés. L’intégration ci-dessous exige un **agent public dont l’authentification est désactivée**, réglage que le manuel situe dans **Advanced**. L’identifiant sera visible dans le code de la page ; ce n’est pas un secret. Excluez clés API et données personnelles ou propres au visiteur du balisage et des paramètres de remplacement.
3. Dans l’onglet **Security** de l’agent, ajoutez le nom d’hôte exact du site à **Allowlist**, enregistrez et relisez. ElevenLabs indique une correspondance exacte, dix noms maximum et un ajout distinct pour chaque sous-domaine. N’ajoutez un hôte de test local que si nécessaire. La liste limite l’origine des connexions, sans authentifier la personne qui parle.
4. Examinez la conservation des transcriptions et l’enregistrement audio, puis approuvez l’avis et le consentement adaptés au site. Le widget peut présenter des conditions avant l’appel, mais cet écran et l’autorisation microphone du navigateur ne règlent pas les obligations juridiques du site. Dans **Advanced → Call limits**, définissez et enregistrez une valeur adaptée pour **Max conversation duration**. ElevenLabs documente 600 secondes par défaut et une plage de 60 à 7 200 secondes. Relisez les paramètres de confidentialité, durée et accès avant tout test facturable.

## Ajouter l’intégration à une seule page brouillon

Placez ce code dans le corps de la page avec la fonction HTML ou script personnalisée prise en charge par votre site. Remplacez `YOUR_PUBLIC_AGENT_ID` par l’identifiant de l’agent dédié. Limitez le lancement initial à cette seule page approuvée.

```html
<elevenlabs-convai agent-id="YOUR_PUBLIC_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
```

Voici l’actuelle [intégration officielle du widget](https://elevenlabs.io/docs/eleven-agents/customization/widget). L’URL du script est **sans version fixée**; notez l’installation et reconsultez le manuel lors de la maintenance. Dans l’aperçu brouillon, confirmez un seul widget qui ne masque aucune commande essentielle. Si le site impose une Content Security Policy, demandez au responsable d’examiner les requêtes réellement bloquées et de faire un changement limité et validé. Désactiver la politique ou ajouter des jokers larges n’est pas une étape d’installation.

## Tester l’agent, puis le parcours réel des visiteurs

Après validation des coûts et de la confidentialité, posez les deux questions dans le test vocal du tableau de bord. Comparez les réponses aux faits et à la limite de transfert vers un humain. Corrigez l’agent et retestez toute réponse dangereuse ou non étayée. Cet appel vérifie seulement le tableau de bord, pas l’intégration au site.

Faites valider contenu, avis, emplacement et résultat par le responsable de la page avant publication. Sur la **page en ligne au nom d’hôte autorisé**, ouvrez le widget, accordez délibérément le microphone, posez les deux mêmes questions, écoutez les réponses et terminez l’appel. Vérifiez que l’indicateur microphone s’éteint et que le widget reste utilisable sur un écran de téléphone. Comparez les propos aux réponses approuvées ; la fluidité ne prouve pas les faits. Notez heure et agent pour examiner la consommation. C’est un test à effectuer par le lecteur, pas un résultat observé par BIG CHANGE.

Ouvrez **Call history** pour l’agent si la conservation choisie laisse un enregistrement, et comparez la conversation aux deux questions. Dans **Analytics**, filtrez cet agent et une courte période pour examiner nombre, durée et coût des appels. Ces totaux ne prouvent pas à eux seuls quel appel a généré un frais. Si la politique approuvée supprime les conversations, ne gardez que l’observation minimale autorisée de la réponse et examinez les totaux disponibles. N’allongez pas la conservation pour ce contrôle. L’absence de trace conservée ne prouve pas la gratuité.

## Si le contrôle échoue

Si aucun widget n’apparaît, comparez le balisage réellement publié à [l’intégration documentée](https://elevenlabs.io/docs/eleven-agents/customization/widget), cherchez les éléments ou scripts en double et les erreurs précises de script ou CSP. S’il apparaît sans se connecter, relisez l’authentification publique, le nom d’hôte exact autorisé, l’autorisation microphone, les crédits et l’erreur du tableau de bord. Si la voix échoue, vérifiez microphone choisi, autorisation navigateur et contexte sécurisé, puis le journal disponible. Terminez une session incertaine et examinez la consommation avant de payer un nouvel essai.

Si l’agent invente ou sort de la FAQ, retirez l’intégration pendant la révision des faits et instructions. Répétez les deux questions dans le tableau de bord et sur le site avant rétablissement. Si la consommation dépasse l’autorisation, retirez l’intégration, examinez statistiques filtrées et facturation, puis durée et déploiement. Ce retrait empêche cette page de proposer de nouveaux appels ; il ne prouve pas qu’un appel actif est terminé et ne retire pas l’accès public depuis un autre hôte autorisé.

Pour une application vocale de navigateur développée localement, [notre guide OpenAI Realtime](https://bigchange.ai/blog/openai-realtime-browser-voice-webrtc-guide) traite une autre tâche. Ici, nous utilisons le widget public hébergé d’ElevenLabs. Le manuel mentionne ailleurs un attribut `signed-url` , mais les instructions d’intégration de base exigent explicitement un agent public ; cet attribut seul n’est pas une recette testée de widget privé.

## Sources et lectures complémentaires

- [Personnalisation du widget ElevenLabs](https://elevenlabs.io/docs/eleven-agents/customization/widget): agent public requis, contrôles d’interface et intégration actuelle. L’URL du script n’est pas versionnée.
- [Authentification de l’agent](https://elevenlabs.io/docs/eleven-agents/customization/authentication): noms d’hôte exacts, limite de dix et différence avec l’authentification individuelle.
- [Déroulement d’une conversation](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) et [contrôles de confidentialité](https://elevenlabs.io/docs/eleven-agents/customization/privacy): durée, conservation et enregistrement audio.
- [Démarrage rapide ElevenAgents](https://elevenlabs.io/docs/eleven-agents/quickstart), [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) et [aide sur les coûts](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost): tests du tableau de bord, historique, totaux et base de facturation. Les conditions du compte déterminent allocation et facture réelles.

## Sources

- [Personnalisation du widget](https://elevenlabs.io/docs/eleven-agents/customization/widget) — Vérifié le 20 octobre 2026. Agent public requis, modes, élément personnalisé de base et script actuel non versionné. Ne vérifie pas une implémentation privée avec signature.
- [Authentification de l’agent](https://elevenlabs.io/docs/eleven-agents/customization/authentication) — Vérifié le 20 octobre 2026. Noms d’hôte exacts et limite de dix ; contrôle d’origine, pas authentification du visiteur.
- [Déroulement d’une conversation](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) — Vérifié le 20 octobre 2026. Durée par défaut, plage et sauvegarde par conversation ; aucun plafond global de dépense établi.
- [Confidentialité](https://elevenlabs.io/docs/eleven-agents/customization/privacy) — Vérifié le 20 octobre 2026. Conservation des transcriptions et audio ; avis du site et base juridique à examiner par le responsable.
- [Démarrage rapide ElevenAgents](https://elevenlabs.io/docs/eleven-agents/quickstart) — Vérifié le 20 octobre 2026. Configuration et test dans le tableau de bord, Call history et code officiel du widget ; aucun test BIG CHANGE.
- [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) — Vérifié le 20 octobre 2026. Filtres agent/temps et totaux de nombre, durée, coût ; les agrégats seuls n’identifient pas un appel de test.
- [Combien coûte ElevenAgents ?](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost) — Vérifié le 20 octobre 2026. Création d’agent, durée de connexion et frais LLM distincts ; formule, crédits et droits vocaux propres au compte à vérifier.