Branding
Verwenden Sie unsere Branding-Optionen, um Ihre Chat-UI zu gestalten und wunderschöne, gebrandete KI-Agenten zu erstellen. Geben Sie Ihrem KI-Agenten einen Namen und begeistern Sie Kunden mit einem individuellen Slogan oder Design. Sie können Brandings von einem KI-Agenten auf einen anderen übertragen oder für jeden einzelnen KI-Agenten neue erstellen. Öffnen Sie dazu einen KI-Agenten und gehen Sie zum Branding-Tab.
Branding einfügen
Wenn Sie bereits ein standardisiertes Branding haben, das Sie auf einen anderen KI-Agenten übertragen möchten, verwenden Sie einfach den Button Branding einfügen, den Sie auf dem Branding-Tab oben rechts finden. Dort können Sie ein beliebiges Branding von einem anderen KI-Agenten in Ihrem Tenant einfügen. Durch das Einfügen des Brandings werden alle Ihre zuvor gemachten Einstellungen auf diesen KI-Agenten übertragen. Hinweis: Sie müssen das Branding nicht zuerst kopieren; fügen Sie einfach ein bestehendes Branding in Ihren KI-Agenten ein.
Auch in der Liste der KI-Agenten können Sie das Kontrollkästchen anklicken, um mehrere KI-Agenten auszuwählen, und dann in der erscheinenden unteren Leiste auf den Button zum Einfügen des Brandings klicken.
Branding von einer Website übernehmen
Statt Ihre Farben, Ihr Logo und Ihre Schriftart von Hand einzurichten, können Sie LoyJoy einen Branding-Entwurf aus Ihrer bestehenden Website ableiten lassen.
Geben Sie im Branding-Tab die URL Ihrer Website ein und klicken Sie auf Generieren. LoyJoy analysiert die Seite und füllt einen Entwurf mit:
- Primärfarbe: die dominante Farbe Ihrer Call-to-Action-Buttons und der Hauptnavigation.
- Logo oder Header-Bild: Ihr Markenzeichen oder Wortmarke. Ein breites Wortzeichen wird als Header-Bild angewendet, ein kompaktes Markenzeichen als Logo.
- Schriftart: die WOFF2-Schriftartdatei, die Ihre Website für Fließtext verwendet.
Nach Abschluss der Analyse werden die vorgeschlagenen Werte auf die Branding-Einstellungen Ihres KI-Agenten angewendet. Sie können jeden Wert danach wie gewohnt prüfen und anpassen.
Neues Branding erstellen
Um Ihre KI-Agenten zu individualisieren, können Sie für jeden KI-Agenten neue Brandings erstellen. Branden wir Ihren KI-Agenten gemeinsam nach Ihren Wünschen. Geben Sie Ihre Markenfarbe ein, laden Sie Ihr Logo und Ihre Schriftartdateien hoch. Klicken Sie auf jedes Element der Chat-UI, das auf der linken Seite des Branding-Tabs angezeigt wird, um die detaillierten Branding-Optionen aufzurufen.
Gespräch
Zuerst finden Sie die Gesprächseinstellungen. Klicken Sie einfach auf den angezeigten Chat. Hier können Sie die Hauptfarbe Ihres KI-Agenten passend zum Markenstil wählen. Wählen Sie die Chat-Blasenfarben, den Stil oder sogar Schriftarten, um alles nach Ihren Wünschen zu personalisieren. Sie können auch den Stil der Agenten-Nachrichten gestalten, indem Sie Ihre Farben und Ihren Stil wählen. Verwalten Sie Ihre Chat-Geschwindigkeit und personalisieren Sie die KI-Agenten, indem Sie ein Chat-Avatar-Bild oder einen Chat-Hintergrund einfügen. Beachten Sie, dass das Hintergrundbild möglicherweise angepasst werden muss, wenn die Größe des Chat-Fensters geändert wird! Denken Sie daran, dass wir empfehlen, dass Bilder nicht größer als 500 kb sind; außerdem finden Sie die empfohlene Pixelgröße im dafür vorgesehenen Bereich!
Sie finden auch die individuellen Einstellungen für Desktop- oder Mobile-Nutzung. Konfigurieren Sie, wie das Chat-Widget je nach Gerät des Nutzers erscheint und sich verhält. Sie können diese Einstellungen unabhängig für Desktop und Mobile umschalten:
Desktop-Einstellungen Desktop initial öffnen: Wenn aktiviert, erweitert sich das Chat-Fenster automatisch, wenn die Seite lädt.
Mobile-Einstellungen Mobile initial öffnen: Wenn aktiviert, wird der Chat beim Laden der Seite automatisch ausgelöst.
Wichtig: Bitte beachten Sie, dass das Aktivieren von "Mobile initial öffnen" dazu führt, dass der Chat direkt im Vollbildmodus startet und auf Mobilgeräten sofort den gesamten Bildschirm abdeckt.
Sie können auch die Fensterposition und die Fensterbreite des Chats für den Desktop-KI-Agenten anpassen.
Kopfzeile
Klicken Sie in der Chat-Animation links auf die Kopfzeile. Sie finden die Kopfzeileneinstellungen. Hier können Sie die Einstellungen zur Chat-Kopfzeile und zu den Neustartoptionen verwalten.
Um das gewünschte Design zu erstellen, wählen Sie einen Titel und einen Untertitel oder fügen Sie ein Logo-Bild ein, das Sie auf der linken Seite der Kopfzeile sehen, und wählen Sie unten die Größen. Fügen Sie außerdem ein Kopfzeilenbild ein, das Sie in der Mitte der Kopfzeile sehen, oder ein Loyalty-Symbol.
Startseite
Durch Klicken auf den nach links zeigenden Pfeil in der Chat-Animation können Sie eine Home View für diesen KI-Agenten auswählen und verwalten, dass die Home View zunächst angezeigt wird, sobald das Chat-Fenster geöffnet ist.
Navigation
Finden Sie die drei Punkte neben dem Pfeil in der Kopf-Chat-Animation, um Ihre Anmelde-/Abmeldeoptionen zu verwalten, das Impressum zu aktivieren, die Datenschutzerklärung zu aktivieren oder den Chat-Neustart und -Reset zu aktivieren. Die Impressums- und Datenschutzoptionen ermöglichen es Ihnen, eine Nachricht im Chat anzuzeigen oder einen Link bereitzustellen, der Nutzer beim Klicken zur entsprechenden Webseite führt. Bevor ein KI-Agent live geht, sollte dieses Impressum gesetzt sein.
Persistente Quick Replies
Sie können feste Buttons in Ihrem KI-Agenten festlegen, um Ihren Kunden die Option zu bieten, mit unseren persistenten Quick Replies direkt in eine bestimmte Aktion zu springen. Um Ihre Quick Replies in der Fußzeile Ihres KI-Agenten zu verwalten, klicken Sie in der Chat-Animation links auf den Bereich über der Fußzeile. Geben Sie Ihre Quick Replies ein und führen Sie Ihre Kunden zu einem anderen KI-Agenten. Sie können bis zu fünf Quick Replies wählen und gestalten.
Fußzeile (Eingabebereich)
Die Fußzeile enthält das Texteingabefeld. Klicken Sie auf den Fußzeilenbereich, um zu konfigurieren:
- Texteingabe: Stellen Sie sicher, dass dies aktiviert ist, wenn Sie KI verwenden, damit Kunden Fragen tippen können. Sie können den Platzhaltertext (z. B. "Nachricht senden...") pro Sprache anpassen.
- Spracheingabe: Aktivieren Sie das Mikrofon-Symbol, um die Sprach-zu-Text-Eingabe zu erlauben.
- Voice Chat: Wählen Sie einen Phone-Agent-Prozess als Voice-Agenten, damit Kunden direkt im Web-Chat mit Ihrem KI-Agenten sprechen können, statt zu tippen. Ein Voice-Mode-Button erscheint dann in der Fußzeile. Mehr dazu in Voice Chat im Web-Chat.
- Vorgeschlagene Fragen: Fügen Sie bis zu drei "Gesprächsstarter" hinzu, die erscheinen, bevor der Nutzer etwas tippt.
Wann ist die Fußzeile sichtbar? Die Fußzeile ist nicht immer sichtbar. Sie erscheint automatisch basierend auf der Prozesslogik:
- Beim Betreten eines Live-Chat-Moduls.
- Beim Betreten eines KI-Agent-Moduls.
- Wenn ein Message-Start-Ereignis existiert.
- Wenn die Funktion Artikelsuche aktiviert ist.
Diese Bedingungen stellen sicher, dass die Fußzeile nur angezeigt wird, wenn eine Nutzereingabe erwartet wird und von den konfigurierten Modulen verarbeitet werden kann.
Chat-Vorschau
Verwenden Sie die Chat-Vorschau (Nachrichten und Buttons, die über Ihrer Chat-Blase erscheinen), um Ihre Kunden zu begeistern und zu motivieren, auf Ihren Chat-Agenten zu klicken. Sie können in Ihrer Chat-Vorschau auch bis zu drei Quick Replies (Buttons) anbieten. Ihre Kunden können damit direkt zu einem Prozessmodul oder zu einem anderen KI-Agenten springen.
Um die Chat-Vorschau zu bearbeiten, scrollen Sie auf dem Branding-Tab nach unten. Unterhalb der Chat-UI sehen Sie eine Nachricht über der Chat-Blase, auf die Sie klicken können, um sie zu bearbeiten.
In den Einstellungen können Sie die Verzögerung der Chat-Vorschau und die Anzeigedauer der Chat-Vorschau in Sekunden konfigurieren. Darunter können Sie die Stile der Vorschau-Nachrichten und Quick Replies passend zu Ihrer Marke gestalten.
Die Chat-Vorschau wird nur beim ersten Mal angezeigt, wenn ein Kunde innerhalb von 30 Minuten eine Website mit dem Chat lädt. Nach 30 Minuten wird die Chat-Vorschau wieder angezeigt, wenn die Seite neu geladen oder eine andere Seite besucht wird.
Chat-Launcher
Klicken Sie links auf den Chat-Launcher, um sein Erscheinungsbild anzupassen. Wählen Sie zuerst grundlegende Informationen wie die Größe des Launchers und seine relative Position auf Ihrer Website. Als Nächstes können Sie den Stil Ihres Launchers anpassen. Sie können entweder unser Chat-Blase-Design wählen, ein Bild hochladen (GIFs werden unterstützt) oder eine Lottie-Animation verwenden. Die beiden Ersteren unterstützen grundlegende CSS-Animationen wie Rotation, Bounce oder Pulse, um Ihren Chat-Launcher auffälliger zu machen. Für die Lottie-Animationen können Sie entweder eine eigene hochladen oder eine aus unserer Bibliothek wählen.
Lottie-Animationsfarben
Die Chat-Blase-Animationen unserer Bibliothek (Onyx Pulse, Onyx Sparkle, Onyx Swirl, Pearl Sparkle, Pearl Swirl und Pearl Wave) können in Ihrer Markenfarbe angezeigt werden. Unterhalb der Bibliothek schalten Sie "Animationsfarben" von "Originalfarben" auf "Eigene Farbe". Der Hintergrund der Chat-Blase nimmt dann die von Ihnen gewählte Chat-Blase-Farbe an. Ohne gewählte Farbe wird die Hauptfarbe Ihres KI-Agenten verwendet. Die Chat-Symbole und Sterne auf der Blase werden automatisch weiß oder dunkel, je nachdem, was besser zum Hintergrund kontrastiert, sodass sie auch bei sehr hellen Markenfarben sichtbar bleiben. Hochgeladene Lottie-Animationen und die anderen Animationen der Bibliothek behalten ihre Originalfarben.
Lottie-Animation hochladen
Besuchen Sie lottiefiles.com, um eine passende Lottie-Animation für Ihren Chat-Launcher zu finden. Sie müssen ein Konto erstellen, um Lottie-Animationen herunterzuladen. Auf der Plattform finden Sie kostenlose und kostenpflichtige Animationen. Laden Sie die Lottie-Dateien immer als JSON-Dateien herunter und laden Sie sie hoch, indem Sie in LoyJoy auf den Upload-Button klicken.
Call to Action
Ein Call to Action kann ein leistungsfähiges Werkzeug sein, um Ihre Kunden zur Interaktion mit Ihrem KI-Agenten zu animieren. Fügen Sie ein Call-to-Action-Bild in der empfohlenen Größe ein, das links neben Ihrer Chat-Blase angezeigt wird.
