Chat-Widget per Script-Tag einbinden

Ein einziges Script-Tag bringt die Chat-Bubble von intoCHAT auf jede Website, deren HTML du bearbeiten kannst. Das Tag enthält nur deine Agenten-ID. Alles andere lädt von intoCHAT, spätere Änderungen brauchen also keinen Eingriff in deine Website.

Snippet kopieren

1. Öffne deinen Agenten und wechsle in den Tab Share (Teilen). Er steht bereit, sobald der Agent gespeichert ist.
2. Klicke auf der Karte Bubble Chat auf Copy Code. Deine Agenten-ID ist bereits enthalten.

<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>

Standardmäßig kann jede Website mit diesem Snippet deinen Agenten zeigen. Mit erlaubten Domains beschränkst du ihn auf deine eigenen Websites.

Wohin der Code gehört

Füge das Script direkt vor dem schließenden </body>-Tag ein, auf jeder Seite, auf der der Chat erscheinen soll. Am einfachsten geht das in einem globalen Footer, Layout oder Template, das alle Seiten nutzen.

Das Ende des Body ist der empfohlene Platz, das Script funktioniert aber auch im <head>: Es wartet, bis die Seite geladen ist, und baut erst dann den Launcher. Bietet deine Plattform nur ein Feld für den Head, füge es dort ein.

Landet dasselbe Snippet zweimal auf einer Seite, etwa einmal im Theme und einmal über ein Plugin, erzeugt nur die erste Kopie einen Launcher, die zweite wird ignoriert. Snippets für verschiedene Agenten erzeugen jeweils ihren eigenen Launcher.

Attribute

Weitere Attribute gibt es nicht. Farben, Theme, Schrift, Position, Launcher-Icon, Tooltip, Begrüßungen, Fragevorschläge, das Begrüßungs-Pop-up und das automatische Öffnen legst du im Tab Appearance fest.

Das Script liest data-chatbot-id aus dem Script-Element, das es geladen hat. Lass das Attribut also an diesem Element. Tools, die Script-Tags umschreiben, können es entfernen. Die benutzerdefinierten HTML-Tags im Google Tag Manager tun genau das, deshalb braucht GTM ein eigenes Snippet.

Was auf der Seite passiert

1. Sobald das HTML geladen ist, holt das Script die Einstellungen deines Agenten von intoCHAT.
2. Es setzt einen runden Launcher in die untere linke oder rechte Ecke, daneben kurz einen Tooltip. Hast du unter Launcher behaviour das Begrüßungs-Pop-up oder das automatische Öffnen eingeschaltet, zeigt es diese nach der eingestellten Verzögerung.
3. Ein Klick öffnet den Chat in einem iframe von intoCHAT: am Desktop ein Fenster mit 380 × 600 Pixeln, auf Bildschirmen bis 768 Pixel Breite im Vollbild.
4. Das Widget speichert eine Sitzungs-ID in einem Cookie und im Local Storage deiner Website. So läuft das Gespräch weiter, wenn Besucher eine andere Seite öffnen.

Single-Page-Apps

Der Launcher landet in document.body, außerhalb des Root-Elements deiner App. Clientseitige Routenwechsel berühren ihn nicht. Lade das Script deshalb einmal pro vollständigem Seitenaufruf, nicht bei jedem Routenwechsel. Ersetzt dein Framework bei der Navigation den gesamten <body>, verschwindet der Launcher mit ihm. Läuft das Snippet danach erneut, setzt es denselben Launcher wieder ein, statt einen zweiten hinzuzufügen.

Code für React und Next.js findest du unter Next.js und React.

Content Security Policy

Sendet deine Website eine Content Security Policy, erlaube https://www.intochat.ai in:

• script-src für das Script
• connect-src für das Laden der Agenten-Einstellungen
• frame-src für das Chatfenster

Ein eigenes Launcher-Icon ist ein Bild auf deiner Seite, img-src muss also auch dessen Adresse erlauben.

Installation prüfen

Lade eine Seite deiner Website neu. Der Launcher sollte nach wenigen Sekunden unten in der Ecke erscheinen. Wenn nicht, öffne die Entwicklerkonsole des Browsers:

• „Chatbot not found.“ Der Wert von data-chatbot-id stimmt nicht. Kopiere das Snippet erneut aus dem Tab Share.
• „The embed script needs a data-chatbot-id attribute.“ Das Attribut fehlt, oder ein Tool hat es aus dem Tag entfernt. Kopiere das Snippet erneut, oder nutze das Snippet für Google Tag Manager, wenn du es über GTM lädst.
• „intoCHAT: this website is not in the allowed domains of this agent…“ Der Agent ist auf andere Websites beschränkt. Trag die Domain dieser Website im Tab Share unter Where this agent can appear ein. Siehe Erlaubte Domains.
• „intoCHAT: this agent is private…“ Schalte im Tab Share die Option Private agent aus.
• Ein Fehler zur Content Security Policy. Erlaube die oben genannten Adressen.
• Kein Fehler und keine Anfrage an intochat.ai. Das Script fehlt auf der Seite, oder ein Werbe- oder Tracking-Blocker hat es gestoppt. Teste in einem privaten Fenster ohne Erweiterungen.

Weitere Fälle findest du unter Fehlerbehebung.