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

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 kann man den Nutzer nicht nur begrüßen, sondern auch mit einer zur Webseite passenden Absicht ansprechen.

Der folgende Embed-Code zeigt ein Beispiel, wie man
- nach dem Laden der Seite und
- nach z.B. 5 Sekunden Inaktivität (Maus, Tatstatur) 
das Kiko Webchat-Widget öffnet und eine bestimmte Nutzereingabe simuliert, damit eine zur Webseite passende Absicht gefunden wird und deren Ausgabe erfolgt.

Hier können Sie den Code per Code Pen ausprobieren.

  1. <!DOCTYPE html>
  2.   <html>
  3.     <head>
  4.       <meta charset="UTF-8">
  5.       <title>Title of the document</title>
  6.       <script src="//1000grad-49f9319.prod.1000grad.de/chat/tgd-bot-chat-web-component.min.js" id="tgd-chat-script"></script>
  7.     </head>
  8.     <body onload="onloadChatScript()">
  9.       After 5 seconds without keyboard and mouse activity, the chatbot widget opens.
  10.       <tgd-bot-chat-web-component />
  11.       <script>
  12.         // inactivity timer -------------------------------------- embedding #1
  13.         function setIdleTimeout(millis, onIdle) {
  14.           var timeout = 0;
  15.           var expired = false;
  16.           
  17.           startTimer();

  19.           function startTimer() {
  20.             // console.log("... timer started.");
  21.             timeout = setTimeout(onExpires, millis);
  22.             document.addEventListener("mousemove", onActivity);
  23.             document.addEventListener("keypress", onActivity);
  24.           }
  25.     
  26.           function onExpires() {
  27.             expired = true;
  28.             onIdle();
  29.           }

  31.           function onActivity() {
  32.             // console.log("... activity.");
  33.             if (timeout) clearTimeout(timeout);
  34.             document.removeEventListener("mousemove", onActivity);
  35.             document.removeEventListener("keypress", onActivity);
  36.             if (!expired) setTimeout(startTimer, 1000);
  37.           }
  38.         }
  39.         // ------------------------------------- 
  40.                 
  41.         function onloadChatScript() {
  42.           window.$chatbot.startApp({"identifier":"d08850dd-d4c3-4248-98ec-df00de2fa5bc"}).then(function() {
  43.             console.log("... chat app started.");

  45.              // call inactivity timer ----------- embedding #2
  46.             setIdleTimeout(5000, function() {
  47.               console.log("... reached max idle time.");
  48.               
  49.               window.$chatbot.openChat().then(function() {
  50.                 // console.log("... chat opened.");
  51.                               
  52.                 window.$chatbot.startNewTopic().then(function() {
  53.                   window.$chatbot.sendAsUser({
  54.                     text: 'simulated user input test 123'
  55.                   }).then(function() {
  56.                     console.log("... context request sent.");
  57.                   });
  58.                 });
  59.               });
  60.             });
  61.             // ---

  63.           });
  64.         }
  65.       </script>
  66.     </body>
  67.   </html>

    • Related Articles

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

    • Chatbot in Wordpress einbinden - Anleitung mit Plugin in 3 Schritten

      Kiko ist eine Plattform für Chatbots, die von 1000° DIGITAL in Deutschland entwickelt und gehostet wird. Einen eigenen Chatbot können Sie schnell erstellen und in Wordpress einbinden. Bei einer moderaten monatlichen Nutzung verwenden Sie den Chatbot ...

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

    • Chatbot in Wordpress einbetten - mit individuellem HTML

      In diesem früheren Beitrag haben wir die Einbindung des Kiko-Chatbots in Wordpress mittels Kiko-Chatbot Plugin beschrieben. Alternativ zum Plugin können Sie Ihren Kiko-Chatbot auch mit einem individuellen HTML-Code (Embed-Code) in Ihre ...