Chatbot Styler - Wie du deinen Bot personalisieren kannst

Dein Chatbot soll das Aushängeschild für deinen Support sein. Daher ist es wichtig ihm eine Identität zu verleihen. Diese kannst du zum einen über die Antworten des Chatbots bestimmen und zum anderen über sein Aussehen. Unter Einstellungen > Corporate Design kannst du deinen Bot so gestalten, wie du es möchtest. Dabei sind dir keine Grenzen gesetzt. Du kannst das Aussehen deines Chatbots somit an dein Corporate Design anpassen oder ihm auch ein völlig anderes Design verpassen. Du hast die Wahl!

Im Folgenden zeigen wir dir Schritt für Schritt, welche Einstellungen du vornehmen kannst. Wir empfehlen dir während der Einstellungen deinen Chabot zu öffnen, um die Änderungen live zu sehen.

1. Größe: Du kannst die Breite und die Höhe deines Chatbot Widgets in Pixeln festlegen. Die Regler hierfür kannst du hoch und runter schieben und das Widget passt sich dynamisch an. Wir empfehlen dir diese Einstellung auf deinem Laptop Bildschirm vorzunehmen, um zu garantieren, dass dann ein Chatbot auch auf kleineren Displays gut aussieht. Um die Größe des Widgets auf Smartphones musst du dir keine Sorge machen. Hier nimmt das Widget automatisch den gesamten Bildschirm ein.

2. Sprechblase: Hier kannst du zum einen die Hintergrundfarben der Sprechblasen deines Chatbots (Antwort-Hintergrundfarbe) und die der User (Eingabe-Hintergrundfarbe) verändern. Zum anderen kannst du auch die jeweiligen Textfarben anpassen. Gebe entweder HEX Farbcodes ein oder klicke auf den jeweiligen Kreis und verschiebe den Regler im Farbeditor zu deiner gewünschten Farbe.

3. Hintergrund: Für den Hintergrund deines Chatbot-Widgets kannst du zwischen drei Optionen wählen. Die erste und einfachste Option ist es ein Bild von dem eigenen Computer durch die Upload-Funktion hochzuladen. Die maximale Größe beträgt hier 2 MB. Die zweite Option ist es einfach eine Farbe als Hintergrund auszuwählen. Diese kann man wieder über einen HEX Code oder über den Farbeditor auswählen. Die dritte und letzte Option ist es eins der vorgefertigten transparenten Bilder und eine zugehörige Farbe auszuwählen.

4. Kopfzeile: Du kannst die Farbe deiner Kopfzeile festlegen, sowie die Textfarbe des Chatbot Namens, welcher in der Kopfzeile steht. Zudem kannst du die Ecken der Kopfzeile abrunden. Verschiebe hierfür den entsprechenden Regler oder gebe eine Pixelzahl in das entsprechende Feld ein.

5. Zurück und Abbrechen Button: Errare humanum est. Es kann vorkommen, dass deine Kund:innen unter den ihnen vorgeschlagenen Optionen die falsche ausgewählt haben. Aber da kein Fehler definitiv ist, hast du die Möglichkeit, die Buttons Zurück und Abbrechen einzufügen. Du kannst die Hintergrundfarbe sowohl von der Zeile als auch von den Buttons selbst bestimmen. Gebe den HEX-Code deiner Lieblings- oder Firmenfarben ein, und anschließend lege fest, ob die Ecken abgerundet werden sollen oder nicht.

6. Fußzeile: Du kannst die Farbe deiner Fußzeile festlegen, sowie die Textfarbe des „Powered by“, welches in der Fußzeile steht. Zudem kannst du die Ecken der Fußzeile abrunden. Verschiebe hierfür den entsprechenden Regler oder gebe eine Pixelzahl in das entsprechende Feld ein.

7. Eingabefeld: Du kannst die Farbe der Eingabezeile festlegen, sowie die Textfarbe. Außerdem kannst du die Platzhalter-Nachricht in der Eingabezeile anpassen. Zudem kannst du die Ecken der Eingabezeile abrunden. Verschiebe hierfür den entsprechenden Regler oder gebe eine Pixelzahl in das entsprechende Feld ein.

8. Nachrichten Verzögerung: Mit dieser Funktion kannst du bestimmen, wie schnell dein*e digitale*r Assistent*in beim Chatten sein soll. Drei Geschwindigkeitsstufen stehen zur Auswahl: Langsam, Mittel und Schnell.

9. Ladeanimation: Du verfügst über fünf Ladeanimationen. Du kannst dir deine aussuchen, je nachdem, ob du lineare oder kreisförmige Animationen magst, mit Punkten oder Linien.

10. Buttons: Die Buttons sind deine Hot Topics und werden nach der Willkommensnachricht angezeigt. Du kannst deren Hintergrund- und Textfarbe ändern. Wie gewohnt, kannst du auch die Ecken der Buttons abrunden. Verschiebe hierfür den entsprechenden Regler oder gebe eine Pixelzahl in das entsprechende Feld ein.

11. Chatbot-Icon: Du möchtest ein Icon, das deinen Chatbot repräsentiert? Hierzu gibt es eine Auswahl an Icons, aber du kannst auch hier ein Bild uploaden. Das Icon wird immer links neben der Sprechblase des Chatbots angezeigt.

12. Widget: Hier kannst du einstellen, ob dein Chatbot unten rechts oder unten links auf deiner Website erscheinen soll. Außerdem kannst du die Farbe des Widgets festlegen.

13. Burger Menü: Über diese Einstellung kannst du festmachen, ob in dem Bürger-Menü oben links die Möglichkeit erscheinen soll, einen Live-Chat zu starten. Dafür musst du nur den Schalter nach links oder rechts umlegen.

Hier ein paar Beispiele, wie dein Chatbot aussehen könnte:

‍