Chat widget integration on the website

Here we show the codes that you can use to easily integrate your chatbot on your website.

The moinAI chat widget is added to the website with a simple Javascript.

In the moinAI Hub, you can find the integration code in the Widget & Teaser menu under Widget Settings:


Bildschirmfoto 2022-12-07 um 12.36.58Bildschirmfoto 2022-12-07 um 12.38.36

 

For the Go-live, the following code of the chat widget has to be

a) in the head area of the website or

b) e.g. via the Google Tag Manager.

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

Before the Go-live, the status of the chatbot must be published in the Hub so that the live chatbot is updated to the current status.

The article on chat widget adjustments describes possible changes to the chat widget.

 

Chat Widget API

The widget provides a JS API function with further control options, which are described in the technical documentation.

Teaser Set Up and Integration

The Teaser can be created in the moinAI Hub in the Widget & Teaser menu under Teaser Setup once the chat widget is live on the website.

 


Google Tag Manager - Integration of tags

YouTube video (1 min.) with instructions on how to create tags in the GTM.


  1. Create a new "custom HTML tag".
  2. Insert widget code.
  3. Select "All pages" as trigger to integrate the widget identically on all subpages. 
  4. Alternatively, define the sub-pages on which the widget is to appear.

Perform the same procedure for the teaser code.

It is then advisable to call up the GTM test environment or similar to check the integration. There is an official manual for the GTM Preview Mode. The preview function is also shown in this YouTube video.