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
- Change widget position with the teaser code
- Open and close widget
- Hide and show widget
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. 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.setWidgetPosition(100,100,'px',false);
}
</script>
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.
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".
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()
}