Hier findest du verschiedene Möglichkeiten zur technischen Ausspielung des Chat-Widgets
Zusätzlich zu den verfügbaren Designanpassungen unter Einstellungen im moinAI Hub können Anpassungen an der Darstellung und am Verhalten des Chat-Widgets vorgenommen werden.
Das Chat-Widget bietet eine JS API Funktion, über die Steuerungsoptionen zur Verfügung stehen, die in der technischen Dokumentation beschrieben sind.
- Widget Position ändern
- Widget Position mit manuellem Teaser ändern
- Widget öffnen und schließen
- Widget aus- und einblenden
Widget Position ändern
Eine Option der API ist die Definition der Widget-Position auf der Website z.B. zur Vermeidung der Überlagerung mit anderen Elementen (z.B. Scroll-top-Button, Kontakt-Widget). Diese Option wird ebenfalls als separater Code integriert. Die Details finden sich in der technischen Dokumentation.
Ausspielen auf der linken Seite
Neben der Option das Widget auf der rechten Seite auszuspielen, besteht natürlich auch die Möglichkeit es linksseitig zu positionieren.
Um diese Einstellung auszuwählen, muss im Editor die Widget & Teaser Einstellung ausgewählt werden.
Im Anschluss müssend die Einstellungen zur Widget Darstellung geöffnet werden.
Unter dem Abschnitt „Elemente Anpassen" kann die Ausrichtung des Widgets auf der Webseite bestimmt werden. Hierfür muss einfach der passende Button „UNTEN LINKS" bzw. „UNTEN RECHTS" gewählt werden.
Widget Position ändern bei Nutzung des manuellen Teasers
Eine Option der API ist die Definition der Widget-Position auf der Website z.B. zur Vermeidung der Überlagerung mit anderen Elementen (z.B. Scroll-top-Button, Kontakt-Widget). Diese Option wird ebenfalls als separater Code integriert. Die Details finden sich in der technischen Dokumentation. Der folgende Code enthält den Teaser als auch die Definition der Position.
Die Werte im Code (100,100) sind der Versatz von unten bzw. rechts und definieren die Position auf der jeweiligen Achse in absoluten oder relativen Angaben mittels CSS-Werte, ausgenommen Prozenten.
<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>
Widget öffnen und schließen
Das Öffnen und Schließen des Chat-Widgets kann durch Regeln oder Buttons auf der Website gesteuert werden. Die Angaben dazu finden sich in der technischen Dokumentation. Zum Beispiel kann das Chat-Widget automatisch beim Aufrufen einer bestimmten Unterseite, nach dem Scrollen zum Seitenende oder nach dem Klick auf einen Website-Button geöffnet werden.
Öffnen via Befehl/Button auf Website = open
Schließen via Befehl/Button auf Website = close
Öffnen und Schließen via Befehl/Button auf Website = toggle
Widget aus- und einblenden
In der technischen Dokumentation sind die Befehle hinterlegt, mit denen das gesamte Chat-Widget inkl. Chat-Widget Icon auf der Website ausgeblendet oder eingeblendet werden kann.
Mit einem Javascript Befehl kann das Widget ausgeblendet werden:
knowhere.api.hideWidget();
Es kann dann mit einem Befehl wieder angezeigt und geöffnet werden, wenn z.B. ein Button geklickt wurde:
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()
}