Chat widget customizations

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.

1. Change widget position
2. Change widget position with the teaser code
3. Open and close widget
4. Hide and show widget

1. 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.

1. Via the Widget & Teaser menu item, open the Widget Appearance section.
   
2. In the Customise elements section, the alignment of the widget on the website is determined. In the Widget button area, you can select the buttons bottom left or bottom right to determine the alignment of the widget. The preview on the left-hand side of the buttons will adjust accordingly.
3. Click on Deploy in the bottom right-hand corner to save the change.

2. 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: 'How can I help you?',
       quickActions: [{
           text: 'raise question',
           intent: 'start'
         },
         {
           text: 'subject',
           intent: 'faq_subject'
         }
       ]
     });
window.knowhere.api.setWidgetPosition(100,100,'px',false);
 }
</script>

3. 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

4. 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.

• Hide
  The following JavaScript command hides the chat widget:
  knowhere.api.hideWidget();
• Show
  It can then be displayed and opened again with a command, for example when a button is clicked:
  knowhere.api.hideWidget();

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

 }