Einen Kiko-Chatbot mit einem DIV-Element in die eigene HTML-Seite einbinden
Ein Kiko-Chatbot kann
- als Widget,
- per iFrame oder
- 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.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <META http-equiv="Content-Type" content="text/html; charset=UTF-8" >
- <title>Kiko Chatbot</title>
- </head>
- <body>
- <div id="kiko-id-01" style="width:686px;height:686px;">
- <tgd-bot-chat-web-component />
- </div>
- <script src="//1000grad-49f9319.prod.1000grad.de/chat/tgd-bot-chat-web-component.min.js" id="tgd-chat-script"></script>
- <script>
- if (window.addEventListener) { window.addEventListener('load', startChatScript, false); }
- else if (window.attachEvent) { window.attachEvent('onload', startChatScript); }
-
- function startChatScript() {
- window.$chatbot.startApp({
- identifier: "13b42290-af7c-44af-9cbf-b48fc83929a1",
- parentId: "kiko-id-01",
- viewMode:"innerHtml",
- hideHeader: true
- }).then(function () {
- console.log("... chat app started.");
- });
- }
- </script>
- </body>
- </html>
Beispiel 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. ...