Chat-Widget Integration auf der Website

Hier zeigen wir dir 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.


Für den Go-live muss der folgende Code des Chat-Widgets im Head-Bereich der Website oder 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>

Der Code beinhaltet die ID des Live-Chatbots. In der moinAI Preview ist hingegen die ID des Test-Chatbots hinterlegt. 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 Code

Ein Teaser mit zwei oder mehr Action-Buttons, der bei erstmaligen Website Besuchern am Widget-Icon erscheint, wird als Code gesondert ergänzt. In der Preview im moinAI Hub kann ein Teaser gestaltet und der dazugehörige Code generiert werden. In dem Artikel zu dem Teaser finden sich Details dazu.

Die Teaser-Nachricht und die Action Buttons darunter können für jede Unterseite anders definiert werden. Dazu wird der Code angepasst und nur für bestimmte Unterseiten angelegt.

<script>

//ChatWidgetReady function signals that the script is fully operational
//this function is called when the client side api can be accessed

var chatWidgetReady = function() {

     //place your own logic in this function.
     //example for teaser
     window.knowhere.api.teaser({
       showTeaser: true,
       showAvatar: true,
       message: 'Wie kann ich Ihnen helfen?',
       quickActions: [{
           text: 'Frage stellen',
           intent: 'start'
         },
         {
           text: 'Beratung anfordern',
           intent: 'faq_beratung'
         }
       ]
     })
}
</script>

 

In dem Artikel zu Teaser Anpassungen sind mögliche Änderungen am Verhalten des Chat-Widget Teasers beschrieben.

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.