Kiko Webchat-Widget abhängig von der Fensterbreite positionieren (responsiv)

Kiko Webchat-Widget abhängig von der Fensterbreite positionieren (responsiv)

Moderne Webseiten passen das eigene Layout an die Größe des aktuellen Fensters an.
Dabei kann es zu einer Überlappung des Widgets mit einem anderen Layout-Element der Hintergrund-Seite kommen.
Eine mögliche Lösung für dieses Darstellungsproblem ist die dynamische Positionierung des Widgets, abhängig von der Fensterbreite.
Das Widget wird dann z.B. in der Mobil-Darstellung (Fensterbreite < 1024px) am rechten Fensterrand nach oben versetzt.

Im folgenden Beispiel-HTML-Code wird diese dynamische Anpassung gezeigt.
Für die eigene Seite sind die Start-Optionen des Widgets nach eigenen Anforderungen zu erweitern - siehe https://cloud02-7c83ec0.prod.1000grad.de/chat/docs/#/configuration?id=widgetbutton

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title of the document</title>
  6.     <script src="//cloud02-7c83ec0.prod.1000grad.de/chat/tgd-bot-chat-web-component.min.js" id="tgd-chat-script"></script>
  7.   </head>
  8.   <body onload="onloadChatScript()">
  9.     Content of the document......
  10.     <tgd-bot-chat-web-component />
  11.     <script>
  12.       function getOptionsByWindowSize(options = { "widgetButton": {} }) {        
  13.         if (window.innerWidth < 1024) {
  14.           options.widgetButton.right = "10px";
  15.           options.widgetButton.bottom = "80px";
  16.         } else {
  17.           options.widgetButton.right = "130px";
  18.           options.widgetButton.bottom = "10px";          
  19.         }
  20.         return options
  21.       }

  22.       function resetChatbotWidgetByWindowSize() {
  23.         const currentOptions = window.$chatbot.getOptions();
  24.         const resetOptions = getOptionsByWindowSize();
  25.         if (currentOptions.widgetButton.right !== resetOptions.widgetButton.right) {
  26.           window.$chatbot.reset(resetOptions).then(function() {
  27.             console.log("... resetChatbotWidgetByWindowSize() - resetted.");
  28.           });
  29.         }
  30.       }

  31.       function onloadChatScript() {
  32.         const startOptions = getOptionsByWindowSize({
  33.           "identifier":"xxxxxxxx-xxxxxx-xxxx-xxx-xxxx", // bot identifier
  34.           "widgetButton": {
  35.               "right": "130px",
  36.               "bottom": "10px"
  37.           },
  38.         });
  39.         window.$chatbot.startApp(startOptions).then(function() {
  40.           console.log("... chat app started.");          
  41.           window.addEventListener('resize', resetChatbotWidgetByWindowSize);
  42.         });
  43.       }
  44.     </script>
  45.   </body>
  46. </html>

    • Related Articles

    • Webchat auf der Webseite

      Eine ausführliche Entwicklerdokumentation, wie Sie den Chat auf einer Webseite einbinden, finden Sie über das Bot-CMS unter dem Menüpunkt Dokumentation. Über den Link Einbinden des Chats finden Sie einen Einstieg mit Code-Beispielen. Fügen Sie den ...
    • Kurzeinführung in den Ablauf der Spracherkennung mit Kiko Bots

      Standardmäßig werden Anfragen aus einem Kiko Chat zuerst an den Metabot geleitet und dort verarbeitet. Haben Sie viele Themen, gruppieren Sie diese besser in zusätzlichen Subbots. Ein Bot kann maximal 250 unterschiedliche Antworten beinhalten. Im ...
    • Kiko Webservices

      Kiko Webservices erweitern den Kiko Service um zusätzliche Features, welche per Software-as-a-Service bereitgestellt werden. translate Adapter-Service zur Übersetzung aller ein- und ausgehenden Nachrichten Weitere Chatbot-Sprache durch eine ...
    • Aufbau der Benutzeroberfläche

      Das CMS ist in die folgenden drei Bereiche gegliedert: das Metamenü oben, das Hauptmenü links und und einen großen Arbeitsbereich.  Metamenü  Im Metamenü oben finden Sie drei Elemente, die wir Ihnen kurz vorstellen. Wichtige Informationen zur ...
    • Import von Trainingsbeispielen per API

      Für den Import von Trainingsbeispielen zu einem Intent steht für Entwickler und Fortgeschrittene eine API zur Verfügung. Um die Funktionsweise zu erläutern, stellen wir die Import-Schritte als Kommandozeilen-Befehle vor. Auf diese Weise kann man auch ...