Einen Kiko-Chatbot mit einem DIV-Element in die eigene HTML-Seite einbinden

Einen Kiko-Chatbot mit einem DIV-Element in die eigene HTML-Seite einbinden

Ein Kiko-Chatbot kann
  1. als Widget,
  2. per iFrame oder
  3. mittels DIV-Element
in die eigene Webseite eingebunden werden.

Das folgende Code-Beispiel zeigt die Einbindung mit dem div-Element mit der id "kiko-id-01". Dabei im Style-Attribut von "kiko-id-01" die Größe des geöffneten Webchats festgelegt.
Hier können Sie den Code per Code Pen ausprobieren.​
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <META http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  5.     <title>Kiko Chatbot</title>
  6.   </head>
  7.   <body>
  8.     <div id="kiko-id-01" style="width:686px;height:686px;">
  9.       <tgd-bot-chat-web-component />
  10.     </div>
  11.     <script src="//1000grad-49f9319.prod.1000grad.de/chat/tgd-bot-chat-web-component.min.js" id="tgd-chat-script"></script> 
  12.     <script>
  13.       if (window.addEventListener) { window.addEventListener('load', startChatScript, false); } 
  14.       else if (window.attachEvent) { window.attachEvent('onload', startChatScript); }
  15.       
  16.       function startChatScript() {
  17.         window.$chatbot.startApp({
  18.           identifier: "13b42290-af7c-44af-9cbf-b48fc83929a1",
  19.           parentId: "kiko-id-01",
  20.           viewMode:"innerHtml",
  21.           hideHeader: true
  22.         }).then(function () {        
  23.           console.log("... chat app started.");
  24.         });
  25.       }
  26.     </script>
  27.   </body>
  28. </html>

Webchat Integration mit DIV-ElementBeispiel für die Einbindung des Webchats mittels DIV-Element

    • Related Articles

    • Chatbot Design - Tutorial für Grafiker

      Dieses Tutorial soll Grafiker bei der Erstellung eines individuellen Chatbot-Designs unterstützen. Sie lernen den Webchat Konfigurator näher kennen und erfahren hilfreiche Tipps zur Anpassung an das gewünschte Corporate Design.  Abschnitt 1 - Planung ...

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

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

    • Chatbot mit synchronem Kanal verbinden

      Die Channel-Schnittstelle im Kiko-CMS funktioniert asynchron. Damit der Channel Chatbot-Nachrichten empfangen kann, ist vom Channel ein extra API-Endpunkt bereitzustellen. Kanäle, die im synchronen Modus arbeiten (Anfrage wartet auf Antwort) können ...

    • Benutzerdefinierter Datumswähler im Chatbot

      Einführung Mit der Kiko-Software können Sie einen Chatbot erstellen, der Ihre Online-Formulare ersetzt - https://www.kiko.bot/  Sie können das Verhalten des Formulardialogs selbst definieren, indem Sie einen externen Subbot und Webservice verwenden.  ...