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
- Bot-Live-Identifier des "metabot" ermitteln unter Bot-Liste -> Bot bearbeiten
2. Mobirise herunterladen und installieren
3. Kostenfreie Extension "Code Editor" installieren
- 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
<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}">
<div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
</div>
<!-- Place your own code below -->
<div class="container" id="kiko-container" style="text-align:center">
<tgd-bot-chat-web-component>
<script>
window.$chatbot.startApp({
"viewMode":"widget",
"parentId": "kiko-container",
"identifier":"HIER-BOT-LIVE-IDENTIFIER-EINFÜGEN"
});
window.addEventListener('keydown', function(e) {
if(e.keyCode == 32 && e.target != document.body) { e.stopImmediatePropagation(); }
});
</script>
</tgd-bot-chat-web-component></div>
<!-- Place your own code above -->
</section>
CSS/LESS
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.