Chatbot in Wordpress einbinden - Anleitung mit Plugin in 3 Schritten

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 im Basis-Plan kostenfrei.

In unserer Anleitung zeigen wir, wie Sie mit nur 3 einfachen Schritten einen eigenen Chatbot auf Ihrer WordPress-Website einbinden.

Voraussetzungen

  1. Eine bestehende Wordpress-Installation
  2. Ein bestehendes Kiko-Konto auf der Domain "cloud02-7c83ec0.prod.1000grad.de" -  oder hier kostenfrei registrieren.
  3. Ein bestehender Chatbot mit dem Namen "metabot" im Kiko-Konto - nach der Registrierung können sie über Start - Vorlagen: Vorlage importieren einen Chatbot-Inhalte schnell anlegen und anpassen. 

Schritt 1: Plugin installieren

Im WordPress-Dashboard gehen Sie auf Plugins - Installieren. Dort suchen Sie nach "Kiko Chatbot". Anschließend klicken Sie auf "Jetzt installieren" und das Plugin wird geladen und installiert.



Nachdem Sie das Plugin auch aktiviert haben, sehen Sie links im Menü einen neuen Eintrag „Kiko Chatbot“.



Schritt 2: Bestehendes Kiko-Konto verbinden

Wenn Sie den API-Key des bestehenden Kiko-Kontos eintragen, verbinden Sie das Plugin mit dem Konto.
Tragen Sie den bestehenden API-Key im Menü-Punkt "Kiko-Chatbot" ein.
Sie finden diesen Key nach dem Login im Kiko-CMS im eigenen Profil (Menü oben rechts - Profil: API Key)



Nachdem Sie den API-Key beim Wordpress-Plugin gespeichert haben, wird die Einstellungs-Seite angezeigt.




Schritt 3: Modus wählen

Wählen Sie hier den Einbindungs-Modus für den Chatbot. 
Mit widget erscheint ein anklickbares Chatbot-Icon sofort nach dem Speichern unten rechts auf allen Wordpress-Webseiten.
  

Wenn der Webbesucher auf das Widget klickt, öffnet sich der Webchat mit dem Chatbot.
Begrüßungsinhalt, Name, Farbe und Logo können im Kiko-CMS beim "metabot" angepasst und veröffentlicht werden.




Mit dem Modus innerHtml und einem Shortcode kann der Webchat stattdessen innerhalb einer Seite in der gewünschten Größe platziert werden.
Nutzen Sie z.B. diesen Shortcode: 

[kiko-wp-plugin-chat style="width:500px; height:500px;"]







Der Webbesucher sieht dann den geöffneten Webchat innerhalb der Seite.




Alternativ zum Plugin können Sie Ihren Kiko-Chatbot auch mit einem individuellen HTML-Code (Embed-Code) in Ihre Wordpress-Seite einfügen und die zahlreichen Konfigurationsmöglichkeiten nutzen. Die Anleitung dazu finden Sie unter Chatbot in Wordpress einbetten - mit individuellem HTML

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. Chatbot in Wordpress einbetten - mit individuellem HTML


    • Related Articles

    • 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 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 ...
    • Weitere Nutzer-Sprache für den Chatbot einrichten

      Wenn ein Chatbot in deutscher Sprache fertig einrichtet und trainiert ist, ergibt sich bald auch der Bedarf an einer übersetzten Variante für z.B. englischsprachige Nutzer. Kiko biete hier zwei Möglichkeiten an: Redaktionelle Übersetzung: alle ...
    • 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 ...