Chatbot in Wordpress einbetten - mit individuellem HTML

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 Wordpress-Seite einfügen.
Damit können Sie die zahlreichen Konfigurationsmöglichkeiten des Webchats nutzen.
Fügen Sie dafür in einer Wordpress-Seite einen Inhaltsblock vom Typ "Individuelles HTML" hinzu.



Nutzen Sie folgenden HTML-Code und tragen Sie den "Bot-Identifier" Ihres metabots ein.
Diesen Wert finden Sie im Kiko-CMS unter Botliste: metabot - Aktionen: Bot bearbeiten - Identifier: Live-Identifier kopieren.


Hier sehen Sie den individuellen HTML-Code für die Wordpress-Seite. Den Style bzw. die Größe können Sie in der ersten Zeile anpassen. Weitere Konfigurationswerte können ab Zeile 14 hinzugefügt werden.
  1.  <div id="kiko-webchat" style="width:500px; height:500px;">
  2.     <tgd-bot-chat-web-component>      
  3.     </tgd-bot-chat-web-component>
  4. </div>
  5. <script src="//cloud02-7c83ec0.prod.1000grad.de/chat/tgd-bot-chat-web-component.min.js" id="tgd-chat-script"></script> 
  6. <script>
  7.   if (window.addEventListener) { window.addEventListener('load', startChatScript, false); } 
  8.   else if (window.attachEvent) { window.attachEvent('onload', startChatScript); }  
  9.   function startChatScript() {
  10.     window.$chatbot.startApp({
  11.       identifier: "HIER-DEN-IDENTIFIER-EINTRAGEN",
  12.       parentId: "kiko-webchat",
  13.       viewMode:"innerHtml",
  14.       hideHeader: true
  15.     });
  16.   }
  17. </script>

Statt dem viewMode "innerHtml" können Sie hier auch den Wert "widget" eintragen. Damit können Sie für die aktuelle Wordpress-Seite das Chatbot-Widget unten rechts individuell aktivieren und konfigurieren.


Hier noch mal die wichtigsten Links:
  1. Kiko Basis-Plan (kostenfrei)
  2. Registrierung beim Kiko-CMS für den kostenfreien Basis-Plan
  3. Login zum Kiko-CMS
  4. Konfigurationsmöglichkeiten des Kiko-Webchats

    • Related Articles

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