Integrationsanleitung

Widget-Dokumentation

So bindest du TalkTG ein – von der Installation bis zur Anpassung.

Inhalt

Schnellstart

Eine Codezeile einfügen und in wenigen Minuten loslegen.

Registrieren und Website hinzufügen

Erstelle ein Konto, öffne „Websites“, wähle „Website hinzufügen“ und gib deine Domain ein.

Telegram-Bot verbinden

Erstelle bei @BotFather einen Bot, kopiere den Token, verbinde ihn mit der Website und sende /start.

Widget-Code einfügen

Kopiere den Einbettungscode und füge ihn direkt vor </body> in dein HTML ein.

Voraussetzungen

1Ein TalkTG-Konto
2Eine Website mit bearbeitbarem HTML
3Ein Telegram Bot Token von @BotFather

Installation

Ersetze YOUR_SITE_ID durch die im Dashboard angezeigte Website-ID.

<script src="https://talktg.com/widget.js"
  data-site-id="YOUR_SITE_ID" async></script>

Einfaches HTML

Füge das Skript vor dem schließenden </body>-Tag ein.

Next.js / React

Nutze die Next.js-Script-Komponente im Root-Layout.

Vue / Nuxt

Füge es in nuxt.config.ts unter app.head.script ein.

WordPress

Füge es in footer.php vor </body> ein oder nutze ein Header/Footer-Plugin.

Shopify

Füge es in theme.liquid vor </body> ein.

Wix

Füge benutzerdefinierten Code am Body-Ende ein und aktiviere ihn für alle Seiten.

Widget-Konfiguration

Unter „Websites → Deine Website → Widget-Einstellungen“ kannst du Aussehen und Verhalten ändern.

Option	Standard	Beschreibung
Primärfarbe	`#6366F1`	Farbe für Schaltfläche, Kopfzeile und Besuchernachrichten.
Position	`bottom-right`	Unten rechts oder unten links.
Begrüßung	`Hi there!`	Nachricht für neue Besucher.
Agentenname	`Support`	Name in der Chat-Kopfzeile.
Automatisch öffnen	`false`	Zeigt die Begrüßung automatisch an.
Ton	`true`	Spielt bei einer neuen Antwort einen Ton ab.

API-Referenz

Diese öffentlichen APIs werden intern vom Widget verwendet und müssen normalerweise nicht direkt aufgerufen werden.

GET/api/widget/config/{siteId}

Ruft die Widget-Konfiguration ab.

GET/api/sites/{siteId}/status

Prüft den Status des Telegram-Bots.

POST/api/chat/send

Sendet eine Besuchernachricht.

GET/api/chat/history

Lädt den Gesprächsverlauf.

GET/api/chat/poll

Fragt neue Nachrichten ab.

Funktionsweise

Das Skript lädt asynchron und isoliert Styles per Shadow DOM.

Nachrichten werden über TalkTG an das verbundene Telegram weitergeleitet.

Telegram-Antworten erscheinen im Website-Chat.

Die Besucherkennung bleibt im Browser gespeichert, damit Gespräche fortgesetzt werden.

FAQ und Fehlerbehebung

Das Widget erscheint nicht

Prüfe Skriptposition, Website-ID und Fehler in der Browserkonsole.

Keine Nachrichten in Telegram

Sende /start an den Bot und prüfe im Dashboard den Verbindungsstatus.

Kann ich mehrere Domains nutzen?

Eine Website entspricht einer Domain. Lege pro Domain eine Website an.

Verlangsamt das Widget die Website?

Nein. Es lädt mit async und blockiert das Rendern nicht.

Bereit loszulegen?

Die Einrichtung dauert nur wenige Minuten und erfordert keine Kreditkarte.

Kostenloses Konto erstellen Zurück zur Startseite