Widget-Integration in 3 Zeilen Code: Anleitung für jede Website
📑 Inhaltsverzeichnis
⚡ Warum 3 Zeilen Code ausreichen
Der häufigste Einwand gegen einen KI Voice-Chat-Agenten lautet: „Das ist zu technisch für uns." Tatsächlich dauert die technische Integration bei einem modernen Widget-Ansatz wenige Minuten – unabhängig davon, ob Ihre Website auf WordPress, Squarespace, Shopify oder einem selbst entwickelten System läuft.
Das Prinzip ist dasselbe wie bei Google Analytics, einem Cookie-Banner oder einem Live-Chat-Widget: Sie fügen einen kleinen JavaScript-Schnipsel in Ihren HTML-Code ein, und das Widget erscheint auf Ihrer Seite. Kein Build-Prozess, kein Framework, keine Serveränderungen.
Was nach der Integration auf Ihrer Website ankommt: Ein Widget-Button, den Ihre Besucher sehen und anklicken können. Der Agent öffnet sich, spricht, hört zu und antwortet – auf Basis der Wissensbasis, die Sie in Ihrem Convayla-Dashboard eingerichtet haben. Ihre Website-Besucher erhalten Antworten, ohne eine E-Mail schreiben oder auf einen Rückruf warten zu müssen.
🔧 Das Code-Snippet: Aufbau und Bedeutung
Das Convayla-Widget wird über ein Standard-Script-Tag eingebunden. Der Snippet besteht aus drei Zeilen:
<script
src="https://widget.voice-chat-agent.com/widget.js"
data-agent-id="IHR-AGENT-ID"
></script>Was jede Zeile bedeutet:
- src: Die URL des Widget-Skripts – wird von Convayla gehostet und automatisch aktuell gehalten. Sie müssen nie manuell aktualisieren.
- data-agent-id: Die eindeutige ID Ihres Agenten aus dem Convayla-Dashboard. Jeder Agent hat eine eigene ID – so können Sie auf verschiedenen Websites unterschiedliche Agenten mit jeweils eigener Wissensbasis einsetzen.
- Das schließende Tag beendet das Script-Element korrekt gemäß HTML-Standard.
Optional ergänzen Sie weitere Attribute: data-auto-expand="true" öffnet den Agenten beim Seitenaufruf automatisch, data-language="de" legt die Sprache fest (Standard: automatische Erkennung aus dem Browser).
Praxisbeispiel: Ein mittelständisches Beratungsunternehmen integriert den Agenten auf seiner Kontaktseite. Der verantwortliche Mitarbeiter findet die Agent-ID im Dashboard, öffnet die WordPress-Einstellungen, fügt die drei Zeilen in den Footer-Code-Bereich ein und speichert. Nach dem nächsten Seitenaufruf ist der Widget-Button sichtbar. Gesamtaufwand: unter 10 Minuten – ohne Entwicklerkenntnisse.
🌐 Integration nach Website-Typ
Jede gängige Website-Plattform bietet einen Weg, eigenen JavaScript-Code einzubinden. Hier sind die Integrationspfade für die verbreitetsten Systeme:
| Website-Typ | Integrationspfad | Aufwand |
|---|---|---|
| Custom HTML | Direkt vor </body> in jeder Seite einfügen | 1–2 Min. |
| WordPress | Plugin „Insert Headers and Footers" → Footer-Feld | 3–5 Min. |
| Squarespace | Einstellungen → Erweitert → Code-Einschleusung → Footer | 3–5 Min. |
| Webflow | Projekteinstellungen → Custom Code → Before </body> | 2–4 Min. |
| Shopify | Online-Shop → Themes → Bearbeiten → theme.liquid → vor </body> | 5–10 Min. |
| Wix | Einstellungen → Eigener Code → Körper-Ende (alle Seiten) | 3–5 Min. |
| Jimdo Creator | Einstellungen → Eigene Designs → HTML-Code → Footer | 3–5 Min. |
In allen Fällen gilt: Das Script-Tag gehört möglichst weit unten in den HTML-Body, unmittelbar vor dem schließenden </body>-Tag. So lädt das Widget erst nachdem der Rest der Seite bereits sichtbar ist – das verhindert Verzögerungen beim Seitenaufbau.
Wie unser Artikel über Wissensbasis-Dateiformate erklärt, ist die technische Integration nur der erste Schritt – mindestens genauso wichtig ist, was der Agent weiß. Ein Widget ohne gefüllte Wissensbasis gibt keine hilfreichen Antworten.
📍 Platzierung und Sichtbarkeit optimieren
Das Widget erscheint standardmäßig als Button in der rechten unteren Ecke der Seite – eine Position, die Nutzer von Live-Chat-Systemen kennen und intuitiv finden. Folgende Faktoren beeinflussen, wie gut das Widget angenommen wird:
- Alle Seiten oder nur bestimmte Seiten? Wenn Sie das Script global im Footer einbinden, erscheint das Widget auf jeder Seite. Das ist in der Regel sinnvoll. Möchten Sie es nur auf bestimmten Seiten anzeigen – etwa nur im Support-Bereich oder auf der Produktseite – binden Sie das Script nur dort ein.
- Auto-Expand: Mit
data-auto-expand="true"öffnet sich das Widget beim Seitenaufruf automatisch. Das kann die Interaktionsrate deutlich erhöhen, birgt aber das Risiko, als aufdringlich wahrgenommen zu werden. Empfehlung: zunächst deaktiviert lassen, nach einigen Wochen testen. - Allowed Domains: Im Convayla-Dashboard legen Sie fest, auf welchen Domains das Widget ausgeführt werden darf. Tragen Sie Ihre Domain dort ein, bevor Sie das Widget live schalten – andernfalls wird der Agent aus Sicherheitsgründen blockiert.
- Button-Farbe: Die Farbe des Widget-Buttons lässt sich im Dashboard anpassen. Stimmen Sie sie auf Ihr Corporate Design ab, damit das Widget als integrierter Teil Ihrer Website wirkt.
Wie unser Leitfaden zu System-Prompts zeigt, spielt die Konfiguration des Agenten selbst eine ebenso große Rolle wie die technische Einbindung. Ein schlecht konfigurierter Agent liefert auch mit perfekter Widget-Integration wenig Mehrwert.
✅ Vor der Integration: Agent richtig vorbereiten
Die Widget-Integration selbst dauert wenige Minuten. Mehr Zeit sollten Sie für die Vorbereitung des Agenten einplanen – das ist die Arbeit, die sich in der Qualität der Antworten auszahlt. Folgende Schritte empfehlen sich vor dem Go-Live:
1. Wissensbasis befüllen
Laden Sie die relevanten Dokumente hoch: Öffnungszeiten, Leistungsbeschreibungen, Preise, FAQ-Dokumente, Produktinformationen. Wie Sie dabei am besten vorgehen und welche Formate am besten funktionieren, erklärt unser ausführlicher Leitfaden zum Aufbau der Wissensbasis.
2. System-Prompt schreiben
Der System-Prompt legt die Persönlichkeit und die Leitlinien Ihres Agenten fest: Wie begrüßt er Besucher? Was tut er, wenn eine Frage außerhalb seines Wissensbereichs liegt? Welchen Ton soll er treffen – sachlich, freundlich, beratend?
3. Agent testen
Nutzen Sie die Vorschau-Funktion im Dashboard, um den Agenten vor dem Go-Live zu testen. Stellen Sie typische Kundenfragen und prüfen Sie, ob die Antworten präzise und angemessen sind.
4. Allowed Domains eintragen
Tragen Sie im Security-Bereich des Dashboard Ihre Domain ein. Ohne diesen Schritt funktioniert das Widget auf Ihrer Seite nicht.
5. Script einbinden und prüfen
Erst wenn die Schritte 1–4 erledigt sind, binden Sie das Script auf Ihrer Website ein. Rufen Sie die Seite auf, klicken Sie den Widget-Button und prüfen Sie, ob der Agent korrekt antwortet.
❓ Häufig gestellte Fragen
Brauche ich Entwicklerkenntnisse für die Integration?
Nein. Das Einfügen eines Script-Tags erfordert keine Programmierkenntnisse – nur Zugang zu den Einstellungen Ihrer Website-Plattform. Bei den meisten CMS-Systemen gibt es dafür einen dedizierten Bereich für eigenen Code, der ohne technische Vorkenntnisse bedienbar ist. Falls Sie keinen Zugang zum Backend Ihrer Website haben, reicht es, den Snippet an Ihre Agentur oder Ihren Administrator weiterzugeben.
Verlangsamt das Widget meine Website?
Das Widget-Script lädt asynchron, also parallel zum restlichen Seiteninhalt, und blockiert das Rendering nicht. Platzieren Sie den Script-Tag am Ende des Body-Bereichs – dann lädt die sichtbare Seite zuerst, das Widget wird danach initialisiert. Eine spürbare Verlangsamung ist bei korrekter Einbindung nicht zu erwarten.
Kann ich das Widget auf mehreren Websites einsetzen?
Ja. Sie können denselben Agenten auf mehreren Domains einbinden – fügen Sie einfach alle Domains in der Allowed-Domains-Liste ein. Alternativ erstellen Sie für verschiedene Websites unterschiedliche Agenten mit eigenen Wissensdatenbanken und System-Prompts, jeweils zugeschnitten auf die Anforderungen der jeweiligen Seite.
Was passiert, wenn ich das Script entferne?
Das Widget verschwindet sofort. Es hinterlässt keine Spuren auf Ihrer Website, installiert nichts lokal und schreibt keine Daten in Ihre Datenbank. Die gesamte Logik läuft serverseitig bei Convayla – Ihre Website bleibt unverändert, wenn Sie den Script-Tag entfernen.
Ist das Widget DSGVO-konform?
Convayla verarbeitet alle Daten auf deutschen Servern (Hetzner) und löscht Gesprächsdaten automatisch nach 30 Tagen. Hinweisen Sie Ihre Besucher in der Datenschutzerklärung auf den Einsatz des KI-Widgets – analog zu anderen eingebundenen Drittanbieter-Diensten wie Analyse-Tools oder Live-Chat-Systemen.
Testen Sie Convayla kostenlos – richten Sie Ihren Agenten ein und binden Sie das Widget in wenigen Minuten auf Ihrer Website ein.
📖 Lesetipp: Wissensbasis richtig aufbauen: So trainieren Sie Ihren Voice Agent