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

Bevor Sie mit der Integration des Chatbots beginnen, sollten Sie das Layout entsprechend der zu implementierenden Webanwendung anpassen. Ein digitaler Assistent wird häufig auf Webseiten oder dem Intranet eingebunden. Meist fand hier schon eine ausführliche Bearbeitung des CDs statt. Passen Sie Ihren Chatbot einfach den bestehenden Designvorlagen an, um Ihn so natürlich wie möglich in die Umgebung einzubetten. Oder brechen Sie mit allen Regeln, dann aber konsequent. 

Abschnitt 2 - Umsetzung 

Alle Einstellungen für das Design finden Sie im CMS unter: Botliste -> Bot auswählen -> Aktionen -> Web Chat bearbeiten. Arbeiten Sie nur mit einem Haupt-Chatbot im System, sollten alle Styles über den metabot festgelegt werden. Über den Button "Web Chat Optionen aktivieren" werden alle hinterlegten Angaben in das Chatwidget übertragen. Außerdem lassen sich hier auch alle Einstellungen zurücksetzen.

Abschnitt 3 - Expertenmodus

Ihnen genügt die Auswahl an Funktionen noch nicht? Sie haben zusätzlich die Möglichkeit das Chatwidget über JSON zu manipulieren. 

Der Aufbau ist immer identisch:

{

"Name des Elementes": "parameter" 

}

Möchten Sie mehrere Elemente anpassen, werden die einzelnen Abschnitte mit einem Komma getrennt.

{

"Name des Elementes1": "parameter1",

"Name des Elementes2": "parameter2" 

} 

Eine Übersicht aller Möglichkeiten finden Sie in unserer Dokumentation, hier sind alle Befehle nochmal aufgelistet. 

Die Liste ist alphabetisch sortiert und enthält auch zusätzliche Funktionen für das Einbetten des Chatbots in einer Webanwendung.

Abschnitt 4 - Tipps und Tricks

1.  Sie brauchen die genauen Hex-Codes bzw. RGB-Werte? Nutzen Sie doch einen Color-Picker, dafür gibt es kostenfreie Tools im Internet. Wählen Sie die gewünschte Farbe und lassen Sie sich automatisiert die korrekten Farbwerte anzeigen.
   
2. Sie benötigen Bildmaterial? Auch dafür können Sie Stock-Fotos nutzen, achten Sie hierbei jedoch immer auf die entsprechenden Lizenz-Bedingungen. Mit Grafiken und Fotos lassen Sie Ihren Chatbot modern und frisch aussehen. Achten Sie darauf, dass die Bilder auch zum Text passen. Für die Nutzung im CMS benötigen Sie den Nachrichtentyp "Card".
   
3. Der Chatbot kann auf unterschiedliche Weise eingebunden werden, nicht nur als Widget unten rechts. Als einzelnes Div auf einer Webseite, können Sie den Chatbot auch mit einem selbst designten Hintergrund präsentieren.
   
4. Jeder Nachrichtentyp hat seine eigenen Design-Settings und die Textfarben sind vordefiniert. Beispielsweise kann ein "Card"-Untertitel nur genutzt werden, wenn auch ein Bild hinterlegt ist. Hier gilt, probieren Sie sich aus und entscheiden individuell welche Designoptionen Sie verwenden.  

Abschnitt 5 - Beispiele

Beispiel 1 - Deutsche Alzheimer Gesellschaft - Mecklenburg-Vorpommern

Die Webseite im ersten Beispiel sticht vor allem mit einem satten Rot-Ton hervor. Die Button-Elemente sind abgerundet und die Textfarbe ist grau bzw. weiß. Damit der digitale Assistent sich gut in die Webseite einpasst, wurden diese Style-Vorgaben übernommen. Der Header-Text wurde gleichgesetzt mit der Headerfarbe, damit dieser nicht mehr sichtbar ist. Somit konnte das relativ breite Logo besser platziert werden. Der Avatar wurden mithilfe eines kostenfreien Generators erstellt und ersetzt das vorgegebene Roboter-Icon. Um mehr Platz für die Textelemente zu schaffen, wurde der Nutzer-Avatar deaktiviert. Mit einer leichten Transparenz bleiben bestehende Webseitenelemente sichtbar. Alle Bilder/Logos werden zuerst in der Medienverwaltung hochgeladen, danach kann man die URL kopieren und in die JSON übernehmen.    

Hier das komplette JSON-Skript vom Beispiel: 

{

    "headerColor": "rgba(255, 243, 243, 1)",

    "headerLogo": "BildURL",

    "botMessageColor": "rgba(224, 221, 221, 1)",

    "chatColor": "rgba(228, 7, 22, 80%)",

    "chatBoxShadow": "5px 5px 5px 0px lightgray",

    "chatBorderRadius": "15px",

    "botAvatar": "BildURL",

    "widgetButton": {

        "backgroundColor": "rgba(228, 7, 22, 20%)",

        "iconOpen": "BildURL"

    },

    "userAvatarVisibility": false,

    "headerTextColor": "rgba(255, 243, 243, 1)"

}

Beispiel 2 - ROMPC Institut Kassel

{

    "headerColor": "rgba(217, 217, 217, 1)",

    "headerTextColor": "rgba(217, 217, 217, 1)",

    "botAvatar": "BildURL",

    "chatBoxShadow": "3px 3px 3px 2px grey",

    "headerLogo": "BildURL",

    "chatBorderRadius": "5px",

    "chatColor": "rgba(190,190,190, 80%)",

    "menuButtonIconColor": "rgba(221,18,123,255)",

    "widgetButton": {

        "backgroundColor": "rgba(221,18,123,255)",

        "iconOpen": "BildURL",

    },

    "userMessageBorderRadius": "3px",

    "botMessageBorderRadius": "5px",

    "userAvatarVisibility": false,

    "headerTextVisibility": false,

    "userMessageColor": "rgba(81, 78, 79, 255)"

}

• Related Articles

• Chatbot Vorlagen

  Hier werden Ihnen Vorlagen aus dem CMS vorgestellt. Diese können unter “Start” und “Vorlagen” in Ihr Konto importiert werden. 1. Hilfestellung zur Nutzung Um Ihnen das Erstellen von Chatbots zu erleichtern, bieten wir Vorlagen für den leichten ...

• Absichtenerkennung verbessern - Tutorial 2 für Fortgeschrittene (15 min)

  Aufgabe Ø Dauer 6. NLU aktivieren 2 min 7. Beispielfragen hinterlegen 6 min 8. Unerkannte Anfragen trainieren 5 min 9. Anfragen exportieren 2 min In diesem Tutorial werden Sie Methoden kennenlernen, mit denen Sie die Erkennung Ihres Assistenten ...

• Botarten und der Weg zur Veröffentlichung eines Testszenarios - Tutorial 2 für Einsteiger (13 min)

  Aufgabe Ø Dauer 6.Subbot 4 min 7.Weiterleitung 3 min 8.Botfreigabe 2 min 9.Veröffentlichung 4 min Im zweiten Tutorial erkläre ich Ihnen die Funktion von Meta- und Subbot sowie den Weg zur Veröffentlichung der erstellten Inhalte. Durch den Einsatz von ...

• Tutorials für Fortgeschrittene

  In diesen Tutorials lernen Sie Funktionen im CMS kennen, mithilfe Sie Ihren Chatbot erweitern bzw. verbessern können. Voraussetzungen Um die kommenden Themen zu verstehen, sollten Sie die beiden Tutorials für Einsteiger absolviert haben. Was Sie ...

• Tutorials für Einsteiger

  In diesen beiden Tutorials lernen Sie, einen einfachen Chatbot mit Kiko zu erstellen und ihn auf Ihre Website zu integrieren. Diese Lerneinheiten können Sie auch interaktiv im CMS-Assistenten als Schritt-für-Schritt-Anleitung durchführen. ...