Markdown-Ausgabe

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

# Ein ElevenLabs-Sprach-FAQ-Widget auf einer Website-Seite einrichten

> Richten Sie einen eigenen öffentlichen ElevenLabs-FAQ-Agenten ein, begrenzen Sie Hostnamen, binden Sie das Widget auf einer Seite ein und prüfen Sie Gespräch, Datenschutz und Verbrauch.

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.

Ein ElevenLabs-Widget lässt Besucher auf einer Website mündlich Fragen stellen. Diese Anleitung richtet sich an die Person, die Seite und Agent verwaltet. Sie begleitet eine eng begrenzte öffentliche FAQ von der Einrichtung bis zur Prüfung der Live-Seite und erläutert Zugriff, Gesprächsaufzeichnungen und Verbrauch. Grundlage ist die am 20. Oktober 2026 geprüfte Dokumentation. BIG CHANGE hat keinen Agenten erstellt, kein Widget eingebunden und keinen Testanruf durchgeführt.

## Die große Veränderung

- **Was:** ElevenLabs dokumentiert ein Website-Widget für einen öffentlichen ElevenAgents-Agenten mit Sprache als Standardmodus.
- **Wie:** Die Seite lädt ein benutzerdefiniertes Element mit der sichtbaren Agenten-ID. Die Hostnamen-Freigabeliste des Agenten steuert, welche Website-Ursprünge sich verbinden dürfen.
- **Warum das wichtig ist:** Der Betreiber kann einen gesprochenen Hilfsweg auf einer Seite prüfen, muss aber öffentliche Informationen, Besucherhinweis und mögliche Gebühren vor Freigabe genehmigen. Eine Hostnamenliste identifiziert einzelne Besucher nicht.

## Öffentliche FAQ und kleinen Test vorbereiten

Sie brauchen die Berechtigung für einen Agenten sowie zum Bearbeiten und Veröffentlichen einer Seite. Bereiten Sie eine HTTPS-Seite, einen Browser mit Mikrofon und eine Person vor, die Fakten freigibt und Antworten anhört. Das Veröffentlichungssystem muss das dokumentierte Element und Skript unterstützen; nutzen Sie dessen aktuellen Weg für eigenes HTML. Das Beispiel ist die einfache HTML-Einbindung des Anbieters, keine plattformspezifische Anleitung.

Notieren Sie einige **freigegebene öffentliche Fakten** und einen menschlichen Kontakt für andere Anliegen. Wählen Sie eine beantwortbare und eine abzulehnende oder weiterzuleitende Frage. Schließen Sie Kundendaten, private Richtlinien, Kontoinformationen und API-Geheimnisse aus. Legen Sie die Freigabe von Stimme und Hinweis fest. Prüfen Sie, ob Stimme und Kontobedingungen die geplante Nutzung erlauben; diese Anleitung begründet kein universelles kommerzielles Stimmrecht.

Prüfen Sie vor jedem Sprachtest Tarif, verbleibende Guthaben, verbrauchsabhängige Zahlung und Modellkosten. Laut ElevenLabs ist die Agentenerstellung kostenlos, verbundene Sprachanrufe verbrauchen jedoch Kontingente, und LLM-Gebühren können gesondert anfallen. Verbindungszeit kann länger als Sprechzeit sein. Holen Sie vor Dashboard- und Live-Tests die Ausgabenfreigabe ein. Ein Zeitlimit je Anruf ist keine monatliche Kostengrenze.

## Eigenen Agenten konfigurieren

1. **Erstellen Sie einen separaten öffentlichen FAQ-Agenten** im ElevenLabs-Dashboard. Nutzen Sie eine freigegebene leere Einrichtung oder Vorlage und prüfen Sie geerbtes Wissen und Werkzeuge. Entfernen Sie privates Wissen, Buchung, CRM, Webhook und unnötige Aktionen. Definieren Sie Zweck und Antwortgrenze aus den freigegebenen Fakten, ergänzen Sie menschlichen Kontakt und erlaubte Stimme und Sprache. Machen Sie keinen bestehenden privaten Agenten durch Abschalten der Authentifizierung öffentlich.
2. Unter **Channels → Widget → Interface**wählen Sie die Sprachoberfläche und prüfen Besuchertexte und Bedingungen. Die Anleitung nennt einen Teil auch den Tab **Widget** ; prüfen Sie daher die gespeicherten Einstellungen. Diese Einbindung verlangt einen **öffentlichen Agenten mit deaktivierter Authentifizierung**, laut Anleitung unter **Advanced**. Die ID ist im Seitenquelltext sichtbar und kein Geheimnis. Halten Sie API-Schlüssel und persönliche oder besucherspezifische Daten aus Markup und Widget-Überschreibungen fern.
3. Im Tab **Security** des Agenten ergänzen Sie den genauen Hostnamen in **Allowlist**, speichern und lesen zurück. ElevenLabs nennt exakten Abgleich, höchstens zehn Hostnamen und getrennte Einträge für Subdomains. Fügen Sie einen lokalen Testhost nur bei tatsächlichem Bedarf hinzu. Die Liste begrenzt Verbindungsursprünge, authentifiziert aber keine sprechende Person.
4. Prüfen Sie Transkriptaufbewahrung und Audiospeicherung sowie den freigegebenen Hinweis- und Einwilligungsprozess. Das Widget kann Bedingungen vor dem Anruf zeigen, aber diese Anzeige und die Mikrofonfreigabe erfüllen nicht automatisch die rechtlichen Pflichten der Website. Unter **Advanced → Call limits**setzen und speichern Sie einen passenden Wert für **Max conversation duration**. ElevenLabs dokumentiert 600 Sekunden Standard und 60 bis 7.200 Sekunden als Bereich. Lesen Sie Datenschutz-, Zeit- und Zugriffseinstellungen vor einem kostenpflichtigen Test zurück.

## Einbindung auf einer Entwurfsseite ergänzen

Fügen Sie den Code über die unterstützte HTML- oder Skriptfunktion in den Seitenkörper ein. Ersetzen Sie `YOUR_PUBLIC_AGENT_ID` durch die ID des eigenen Agenten. Begrenzen Sie den ersten Einsatz auf diese eine freigegebene Seite.

```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>
```

Dies ist die aktuelle [offizielle Widget-Einbindung](https://elevenlabs.io/docs/eleven-agents/customization/widget). Die Skript-URL ist **nicht versioniert**; halten Sie die Installation fest und prüfen Sie bei Wartung die Anleitung. Bestätigen Sie im Entwurf genau ein Widget ohne verdeckte wichtige Bedienelemente. Bei Content Security Policy sollte der Verantwortliche konkrete blockierte Anfragen untersuchen und eng begrenzt freigegeben ändern. Abschalten oder breite Platzhalter gehören nicht zur Einrichtung.

## Agenten und anschließend den Live-Besucherweg prüfen

Stellen Sie nach Kosten- und Datenschutzfreigabe beide Fragen im Sprachtest des Dashboards. Vergleichen Sie Antworten mit Fakten und menschlicher Weiterleitung. Korrigieren und wiederholen Sie bei unsicheren oder unbelegten Aussagen. Ein Dashboard-Anruf prüft nur diesen Weg, nicht die Website-Einbindung.

Der Seitenverantwortliche prüft Inhalt, Hinweis, Platzierung und Ergebnis vor Veröffentlichung. Auf der **Live-Seite am freigegebenen Hostnamen**öffnen Sie das Widget, geben das Mikrofon bewusst frei, stellen beide Fragen, hören zu und beenden den Anruf. Kontrollieren Sie erloschene Mikrofonanzeige und Nutzbarkeit auf Telefongröße. Vergleichen Sie Gesagtes mit den genehmigten Antworten; flüssige Sprache beweist keine richtigen Fakten. Notieren Sie Zeit und Agent zur Verbrauchsprüfung. Dies ist eine Leserprüfung, kein von BIG CHANGE beobachtetes Ergebnis.

Öffnen Sie **Call history** für den Agenten, sofern die Aufbewahrung einen Eintrag erlaubt, und vergleichen Sie das Gespräch mit beiden Fragen. In **Analytics**filtern Sie Agent und kurzen Zeitraum nach Zahl, Dauer und Kosten. Summen allein ordnen keine Gebühr einem bestimmten Anruf zu. Löscht die freigegebene Richtlinie Gesprächsdaten, behalten Sie nur die erlaubte minimale Antwortbeobachtung und prüfen die verfügbaren Gesamtdaten. Verlängern Sie die Aufbewahrung nicht nur hierfür. Ein fehlender Datensatz beweist keine Kostenfreiheit.

## Wenn die Prüfung scheitert

Fehlt das Widget, vergleichen Sie das veröffentlichte Markup mit [der dokumentierten Einbindung](https://elevenlabs.io/docs/eleven-agents/customization/widget), suchen doppelte Elemente oder Skripte und konkrete Browser- oder CSP-Fehler. Fehlt nur die Verbindung, prüfen Sie öffentliche Authentifizierung, genauen Live-Hostnamen, Mikrofonfreigabe, Guthaben und Dashboard-Fehler. Bei Sprachausfall prüfen Sie Mikrofon, Browserfreigabe, sicheren Seitenkontext und verfügbares Gesprächsprotokoll. Beenden Sie eine unklare Sitzung und prüfen Verbrauch vor einem weiteren bezahlten Versuch.

Erfindet der Agent Antworten oder verlässt die FAQ, entfernen Sie die Einbindung während der Überarbeitung. Wiederholen Sie beide Fragen im Dashboard und live vor Wiederherstellung. Bei überhöhtem Verbrauch entfernen Sie sie, prüfen gefilterte Statistik und Abrechnung und überdenken Dauer und Einsatzumfang. Entfernen verhindert neue Anrufe auf dieser Seite; es beweist weder das Ende eines laufenden Anrufs noch sperrt es andere erlaubte Hosts.

Für eine lokal entwickelte Browser-Sprachanwendung behandelt [unsere OpenAI Realtime-Anleitung](https://bigchange.ai/blog/openai-realtime-browser-voice-webrtc-guide) eine andere Aufgabe. Hier wird das gehostete öffentliche ElevenLabs-Widget genutzt. Das Handbuch nennt andernorts ein Attribut `signed-url` , verlangt für die einfache Einbindung aber ausdrücklich einen öffentlichen Agenten; das Attribut allein ist kein getestetes Rezept für ein privates Widget.

## Quellen und weiterführende Informationen

- [ElevenLabs-Widget anpassen](https://elevenlabs.io/docs/eleven-agents/customization/widget): öffentlicher Agent, Oberflächensteuerung und aktuelle Einbindung. Die Skript-URL ist nicht versioniert.
- [Agenten-Authentifizierung](https://elevenlabs.io/docs/eleven-agents/customization/authentication): exakte Hostnamen, Zehnergrenze und Unterschied zur Benutzeranmeldung.
- [Gesprächsablauf](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) und [Datenschutzkontrollen](https://elevenlabs.io/docs/eleven-agents/customization/privacy): Dauer, Aufbewahrung und Audiospeicherung.
- [ElevenAgents-Schnellstart](https://elevenlabs.io/docs/eleven-agents/quickstart), [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) und [Kostenhilfe](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost): Dashboard-Tests, Verlauf, Gesamtverbrauch und Abrechnungsbasis. Kontobedingungen bestimmen tatsächliches Kontingent und Rechnung.

## Sources

- [Widget-Anpassung](https://elevenlabs.io/docs/eleven-agents/customization/widget) — Geprüft am 20. Oktober 2026. Öffentlicher Agent, Modi, Standardelement und aktuelles unversioniertes Skript. Keine Prüfung einer privaten signierten Widget-Umsetzung.
- [Agenten-Authentifizierung](https://elevenlabs.io/docs/eleven-agents/customization/authentication) — Geprüft am 20. Oktober 2026. Exakte Hostnamen und höchstens zehn; Ursprungskontrolle, keine Besucher-Authentifizierung.
- [Gesprächsablauf](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) — Geprüft am 20. Oktober 2026. Standarddauer, Bereich und Speicherung je Gespräch; keine Gesamtausgabengrenze belegt.
- [Datenschutz](https://elevenlabs.io/docs/eleven-agents/customization/privacy) — Geprüft am 20. Oktober 2026. Transkript- und Audioaufbewahrung; Website-Hinweis und Rechtsgrundlage erfordern Betreiberprüfung.
- [ElevenAgents-Schnellstart](https://elevenlabs.io/docs/eleven-agents/quickstart) — Geprüft am 20. Oktober 2026. Dashboard-Einrichtung und Test, Call history und offizieller Code; kein BIG CHANGE-Test.
- [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) — Geprüft am 20. Oktober 2026. Agent-/Zeitfilter und Summen von Zahl, Dauer und Kosten; keine eindeutige Zuordnung eines Testanrufs allein daraus.
- [Was kostet ElevenAgents?](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost) — Geprüft am 20. Oktober 2026. Erstellung, Verbindungsdauer und gesonderte LLM-Kosten; konkreten Tarif, Guthaben und Stimmrechte prüfen.