Mit Google Tag Manager einbinden

So binden Sie Ihr botts.ai Chat-Widget in eine Website ein, die bereits Google Tag Manager nutzt: mit einem benutzerdefinierten HTML-Tag, das auf allen Seiten ausgelöst wird.

Mit dieser Anleitung binden Sie das Chat-Widget eines botts.ai Website-Deployments in eine Website ein, die bereits Google Tag Manager nutzt. Sie fügen das Script des Widgets als benutzerdefiniertes HTML-Tag hinzu, lassen es auf allen Seiten auslösen und veröffentlichen den Container. Der Code Ihrer Website bleibt unverändert.

Das brauchen Sie

• Einen Tag-Manager-Container, der bereits auf Ihrer Website installiert ist. Nutzt Ihre Website Tag Manager noch nicht, ist es einfacher, den Code direkt in Ihre Website einzufügen: siehe die anderen Anleitungen in der Seitenleiste unter In Ihre Website einbinden.
• Die Berechtigung Veröffentlichen für den Container. Mit Bearbeiten oder Freigeben können Sie das Tag vorbereiten, live schalten kann es aber nur, wer die Berechtigung Veröffentlichen hat. Ein Kontoadministrator ändert Berechtigungen unter Verwaltung → Nutzerverwaltung.
• Keinen kostenpflichtigen Plan. Google Tag Manager ist kostenlos, und benutzerdefinierte HTML-Tags gehören zur kostenlosen Version.
• Den Einbettungscode Ihres Website-Deployments. Öffnen Sie in botts.ai Agenten, wählen Sie Ihren Agenten, wechseln Sie in den Tab Bereitstellen und öffnen Sie das Website-Deployment. Im Abschnitt Einbinden ganz unten im Editor steht der Code, mit einer Schaltfläche zum Kopieren. Noch kein Website-Deployment? Siehe Deployments.

Der Einbettungscode sieht so aus, mit dem Schlüssel Ihres Deployments anstelle von IHR_API_KEY:

<script async src="https://api.botts.ai/widget/chat-widget.js?key=IHR_API_KEY"></script>

Schritt 1: Container öffnen

Rufen Sie tagmanager.google.com auf, melden Sie sich mit Ihrem Google-Konto an und öffnen Sie den Container, der auf Ihrer Website installiert ist.

Schritt 2: Neues Tag erstellen

Klicken Sie auf dem Tab Arbeitsbereich links auf Tags und dann oben rechts in der Tag-Liste auf Neu.

Ersetzen Sie oben Unbenanntes Tag durch einen Namen, den Sie wiedererkennen, zum Beispiel botts.ai Chat-Widget.

Schritt 3: «Benutzerdefiniertes HTML» wählen und Code einfügen

Klicken Sie auf Tag-Konfiguration. Wählen Sie in der Liste der Tag-Typen, die sich öffnet, Benutzerdefiniertes HTML. Es steht weiter unten, unterhalb der Google-Tag-Typen.

Fügen Sie den Einbettungscode in das HTML-Feld ein, genau so, wie Sie ihn kopiert haben: Adresse und Schlüssel dürfen sich nicht ändern. Die übrigen Optionen lassen Sie, wie sie sind.

Schritt 4: Tag auf allen Seiten auslösen

Klicken Sie auf Trigger und wählen Sie Alle Seiten (Typ Seitenaufruf), nicht eine der Varianten mit Initialisierung im Namen. Klicken Sie danach oben rechts auf Speichern.

Das Tag ist jetzt in Ihrem Arbeitsbereich gespeichert, aber noch nicht live. Auf Ihrer Website kommt erst etwas an, wenn Sie in Schritt 6 veröffentlichen.

Schritt 5: In der Vorschau testen

Klicken Sie oben rechts auf In Vorschau ansehen (englisch Preview). Der Tag Assistant öffnet sich in einem neuen Tab. Geben Sie die Adresse Ihrer Website ein und klicken Sie auf Verbinden. Ihre Website öffnet sich so, als wären die Änderungen schon veröffentlicht, und das Chat-Symbol sollte erscheinen. Diese Vorschau sehen nur Sie, nicht die Besuchenden Ihrer Website.

Schliessen Sie das Vorschaufenster und kehren Sie zu Tag Manager zurück.

Schritt 6: Container veröffentlichen

Klicken Sie oben rechts auf Senden (englisch Submit). Lassen Sie Veröffentlichen und Version erstellen ausgewählt, geben Sie der Version einen Namen wie botts.ai Chat-Widget und klicken Sie auf Veröffentlichen. Das Widget ist jetzt auf Ihrer Live-Website.

Schritt 7: Widget auf der Website prüfen

Öffnen Sie Ihre öffentliche Website in einem privaten Fenster, laden Sie die Seite neu und warten Sie einen Moment. Das Chat-Symbol erscheint unten rechts oder dort, wo Sie es im Widget-Editor platziert haben. Öffnen Sie das Widget und senden Sie eine Testfrage. Prüfen Sie auch eine Unterseite und die Ansicht auf dem Smartphone.

Falls das Widget nicht erscheint

1. Prüfen Sie, ob Sie veröffentlicht haben. Speichern legt das Tag nur in Ihrem Arbeitsbereich ab; auf Ihre Website kommt es erst mit Senden → Veröffentlichen.
2. Öffnen Sie das Tag und prüfen Sie, ob der vollständige Code im HTML-Feld steht, der Trigger Alle Seiten ist und das Tag nicht pausiert ist.
3. Haben Sie in Ihrem Konto mehrere Container, prüfen Sie, ob Sie im Container gearbeitet haben, der auf dieser Website installiert ist. Kann sich die Vorschau nicht mit Ihrer Website verbinden, fehlt der Container womöglich auf dieser Seite.
4. Nutzt Ihre Website Einwilligungseinstellungen in Tag Manager, öffnen Sie im Tag Erweiterte Einstellungen → Einstellungen zur Nutzereinwilligung. Ist Zusätzliche Einwilligung zur Auslösung des Tags erforderlich gewählt, wird das Tag nur ausgelöst, wenn alle dort aufgeführten Einwilligungsarten beim Laden der Seite bereits gewährt sind. Wer später zustimmt, sieht das Widget erst, wenn eine weitere Seite geöffnet oder die aktuelle neu geladen wird.
5. Testen Sie in einem privaten Fenster ohne Werbeblocker. Werbeblocker können Tag Manager blockieren und damit auch das Widget. Blockiert Ihr Cookie-Banner oder Ihr Consent-Tool Scripts, prüfen Sie dessen Konfiguration.
6. Prüfen Sie, ob der Schlüssel zum richtigen Deployment gehört und ob das Deployment im Tab Bereitstellen eingeschaltet ist.

Widget ändern oder entfernen

Farben, Texte, den Launcher und alle anderen Einstellungen des Widgets ändern Sie im botts.ai Editor. Ihre Website übernimmt sie, ohne dass Sie in Tag Manager etwas ändern. Ersetzen müssen Sie den Code nur, wenn sich der Schlüssel des Deployments ändert: Fügen Sie den neuen Code ins Tag ein, speichern Sie und veröffentlichen Sie erneut.

Um das Widget zu entfernen, öffnen Sie das Tag unter Tags, klicken oben rechts auf das Dreipunkt-Menü, wählen Pausieren und danach Speichern. Um es endgültig zu entfernen, löschen Sie das Tag stattdessen. In beiden Fällen kommt die Änderung erst auf Ihre Website, wenn Sie erneut senden und veröffentlichen.

Weitere Hilfe

• Tag Manager-Hilfe: Benutzerdefinierte Tags
• Tag Manager-Hilfe: Tags prüfen und veröffentlichen
• Die allgemeinen Schritte für jede Website: Einbettungscode

Zuletzt aktualisiert am 4. Oktober 2026