Chat widget customizations

Here you can find different possibilities for the technical playout of the chat widget

In addition to the available design customizations under Settings in the moinAI Hub, customizations can be made to the appearance and behavior of the chat widget.


The chat widget provides a JS API function through which control options are available that are described in the technical documentation.

Change widget position 

One option of the API is to define the widget position on the website e.g. to avoid overlapping with other elements (e.g. scroll-top button, contact widget). This option is also integrated as a separate code. The details can be found in the technical documentation.

 

Display widget on the left-hand side

Additionally to the option of displaying the widget on the right-hand side, it is equally possible to arrange it on the left-hand side too. 
To use this option, the widget & teaser setting must be selected in the editor.

Bildschirmfoto 2023-10-25 um 16.33.17

Following the settings widget appearance has to be selected. 

Under the section "Customize elements", the orientation of the widget on the web page can be determined. To do this, simply select the button "BOTTOM LEFT" or "BOTTOM RIGHT".

Bildschirmfoto 2023-10-25 um 16.36.30

Change widget position with the teaser code

One option of the API is to define the widget position on the website e.g. to avoid overlapping with other elements (e.g. scroll-top button, contact widget). This option is also integrated as a separate code. The details can be found in the technical documentation. The following code contains the teaser as well as the definition of the position.

The values in the code (100,100) are the offset from the bottom and right respectively and define the position on the respective axis in absolute or relative terms using CSS values, excluding percentages.

<script>
 var chatWidgetReady = function () {
   window.knowhere.api.teaser({
       showTeaser: true,
       showAvatar: true,
       message: 'Wie kann ich dir helfen?',
       quickActions: [{
           text: 'Frage stellen',
           intent: 'start'
         },
         {
           text: 'Beispielthema',
           intent: 'faq_beispielthema'
         }
       ]
     });
window.knowhere.api.setWidgetPosition(100,100,'px',false);
 }
</script>

 

Open and close widget

Opening and closing the chat widget can be controlled by rules or buttons on the website. The specifications for this can be found in the technical documentation. For example, the chat widget can be opened automatically when a specific subpage is accessed, after scrolling to the bottom of the page, or after clicking a website button.


Open via command/button on website = open

Close via command/button on website = close

Open and close via command/button on website = toggle



Hide and show widget

In the technical documentation you can find the commands that can be used to hide or show the entire chat widget including chat widget icon on the website.


With a javascript command the widget can be hidden:

knowhere.api.hideWidget();

 

It can then be displayed and opened again with a command, for example when a button is clicked:

knowhere.api.open();

knowhere.api.showWidget();

<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() {

   //both functions can be called numerous times and dont change/do anything if the widget is already in the wanted state

   // hides the Widget if it is visible

   window.knowhere.api.hideWidget()

   //shows the widget if it is invisble

   window.knowhere.api.showWidget()

 }