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

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

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

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

    • Webchat-Widget auf Mobirise-Website integrieren

      In dieser Anleitung erfahren Sie, wie Sie das Kiko-Chatbot-Widget auf einer Mobirise-Website integrieren. Mobirise ist ein kostenfreier Offline Website Baukasten für Windows oder Mac (Freeware). Kleine mobile-optimierte Seiten können mit wenigen ...

    • Webchat Widget bei Inaktivität mit Verzögerung öffnen

      Weil das Chatbot-Widget nur ein kleines Element auf der Webseite ist, kann es übersehen werden. Manchmal ist es daher sinnvoll, das Widget nach bestimmten Bedingungen zu öffnen. Dem Nutzer kann dann z.B. Unterstützung per Chat angeboten werden. Dabei ...

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

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