Chat-Widget Integration auf der Website

Hier zeigen wir die Codes, mit denen du deinen Chatbot ganz einfach auf deiner Webseite integrieren kannst

Das Chat-Widget von moinAI wird mit einem einfachen Javascript auf der Website hinzugefügt.

Im moinAI Hub findest du im Menü Widget & Teaser unter Widget Darstellung den Integrationscode:

Bildschirmfoto 2022-10-27 um 12.47.39Bildschirmfoto 2022-10-27 um 12.47.48


Für den Go-live muss der folgende Code des Chat-Widgets

a) im Head-Bereich der Website oder

b)  z.B. über den Google Tag Manager integriert werden.

<script type="text/javascript" id="moinloader" src="https://widget.moin.ai/moin-loader.js?id=IHRE_BOT_ID_HIER"></script>

Vor dem Go-Live muss der Stand des Chatbots im Hub veröffentlicht werden, sodass der Live-Chatbot auf den aktuellen Stand gesetzt wird.

In dem Artikel zu Chat-Widget Anpassungen sind mögliche Änderungen des Chat-Widgets beschrieben.

Chat-Widget API

Das Widget bietet eine JS API Funktion, über die weitere Steuerungsoptionen zur Verfügung stehen, die in der technischen Dokumentation beschrieben sind.

Teaser Set Up und Integration

Der Teaser kann im moinAI Hub im Menü Widget & Teaser unter Teaser Setup erstellt werden, sobald das Chat Widget live auf der Website ist.

Google Tag Manager - Integration von Tags

YouTube Video (1 Min.) mit einer Anleitung für das Anlegen von Tags im GTM.

  1. Neues “benutzerdefiniertes HTML-Tag” anlegen.
  2. Widget Code einfügen.
  3. Als Trigger "All pages" wählen, um das Widget auf allen Unterseiten identisch zu integrieren. Alternativ die Unterseiten definieren, auf denen das Widget erscheinen soll.
  4. Den Vorgang identisch für den Teaser Code durchführen.

Anschließend empfiehlt es sich, die GTM-Testumgebung o.ä. aufzurufen, um die Integration zu überprüfen. Es gibt eine offizielle Anleitung zu dem GTM Preview Mode. Die Vorschau Funktion wird auch in diesem YouTube Video gezeigt.