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