Webchat-Widget auf Mobirise-Website integrieren

Webchat-Widget auf Mobirise-Website integrieren

In dieser Anleitung erfahren Sie, wie Sie das Kiko-Chatbot-Widget auf einer Mobirise-Website integrieren.

Mobirise ist ein kostenfreier Offline Website Baukasten für Windows oder Mac (Freeware). Kleine mobile-optimierte Seiten können mit wenigen Klicks erstellt werden.
Für die Integration des Kiko-Webchat-Widgets ist vorher in Mobirise eine kostenfreie Extension für einen Code-Editor zu importieren. Dieser Import funktioniert nur mit der Windows- oder Mac-Version.
Eine Besonderheit bei der Mobirise-Integration ist die Aktivierung der Leertasten-Funktion im Webchat-Eingabefeld. Der Kiko-Einbettungscode wurde entsprechend erweitert (s.u.). 

Schritt-für-Schritt-Anleitung

1. Kiko-Chatbot erstellen und Bot-Live-Identifier ermitteln
  - Kiko Chatbot erstellen auf https://cloud02-7c83ec0.prod.1000grad.de/admin/ 
  - Bot-Live-Identifier des "metabot" ermitteln unter Bot-Liste -> Bot bearbeiten

2. Mobirise herunterladen und installieren 

3. Kostenfreie Extension "Code Editor" installieren
  - vom Anbieter witsec die Extension herunterladen
  - Mobirise starten
  - Menü links oben -> Erweiterungen
  - Import der Extension (heruntergeladene Datei verwenden)

4. Individuellen Code-Block am Ende der Seite anlegen
  - Unten rechts "+"
  - "witsec" -> Code-Block anklicken -> Block mit Platzhalter-Bild erscheint

5. Code editieren
  - zum neuen Code-Block scrollen -> Context-Menü -> "Edit Block"
  - die unten stehenden Inhalte eintragen

Code 

HTML

  1. <section class="mbr-section mbr-section--no-padding" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-fullscreen': fullScreen, 'mbr-parallax-background': bg.parallax}">
  2. <div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
  3. </div>
  4. <!-- Place your own code below -->
  5. <div class="container" id="kiko-container" style="text-align:center">
  6.     <tgd-bot-chat-web-component>
  7.     <script>
  8.         window.$chatbot.startApp({
  9.             "viewMode":"widget", 
  10.             "parentId": "kiko-container",
  11.             "identifier":"HIER-BOT-LIVE-IDENTIFIER-EINFÜGEN"
  12.         });
  13.         window.addEventListener('keydown', function(e) {
  14.             if(e.keyCode == 32 && e.target != document.body) { e.stopImmediatePropagation(); }
  15.         });
  16.     </script>
  17. </tgd-bot-chat-web-component></div>
  18. <!-- Place your own code above -->
  19. </section>

CSS/LESS

  1. - Inhalt leeren - 

Nach der Veröffentlichung auf einen Webserver wird das Widget angezeigt und kann geöffnet werden. Im Webchat erscheint die Begrüßung durch den Chatbot. 

    • Related Articles

    • Webchat Widget bei Inaktivität mit Verzögerung öffnen

      Weil das Chatbot-Widget nur ein kleines Element auf der Webseite ist, kann es übersehen werden. Manchmal ist es daher sinnvoll, das Widget nach bestimmten Bedingungen zu öffnen. Dem Nutzer kann dann z.B. Unterstützung per Chat angeboten werden. Dabei ...
    • Webchat auf der Webseite

      Eine ausführliche Entwicklerdokumentation, wie Sie den Chat auf einer Webseite einbinden, finden Sie über das Bot-CMS unter dem Menüpunkt Dokumentation. Über den Link Einbinden des Chats finden Sie einen Einstieg mit Code-Beispielen. Fügen Sie den ...
    • Webchat-Widget abhängig von der Fensterbreite positionieren (responsiv)

      Moderne Webseiten passen das eigene Layout an die Größe des aktuellen Fensters an. Dabei kann es zu einer Überlappung des Widgets mit einem anderen Layout-Element der Hintergrund-Seite kommen. Eine mögliche Lösung für dieses Darstellungsproblem ist ...
    • Einführung Chatbot-Plattform

      Mit der Chatbot-Plattform Kiko können Sie sich einen eigenen Chatbot mit einem CMS entwickeln. Diesen Chatbot können Sie in die eigene Website oder in andere Kommunikationskanäle integrieren und Ihren Nutzern zur Verfügung stellen. Die Inhalte und ...
    • Kiko Leistungsbeschreibung

      Allgemeines Mit der Chatbot-Plattform Kiko kann man sich einen eigenen Chatbot mit einem CMS entwickeln. Diesen Bot kann man in die eigene Website oder in andere Kommunikationskanäle integrieren und seinen Nutzern zur Verfügung stellen. Die Inhalte ...