Assistenten-Designkonfiguration
Über die „Chat-Design“ können Sie das visuelle Erscheinungsbild des Chat-Widgets vollständig anpassen, um eine nahtlose Integration in das Branding Ihres Shops zu gewährleisten.
Grundlegende Identität und Positionierung
Identität: Sie können den „Assistentennamen“ (z. B. „KI-Assistent“) definieren, der in der Kopfzeile angezeigt wird, und optional eine „Assistenten-Avatar-URL“ angeben, um ein benutzerdefiniertes Logo oder Bild neben dem Namen anzuzeigen.
Positionierung: Verwenden Sie das Dropdown-Menü „Position auf dem Bildschirm“, um auszuwählen, wo das Widget in Ihrem Shop angezeigt wird (in der Regel unten rechts).
Layout und Abmessungen
Sie haben die präzise Kontrolle über die physische Größe und Form der Chat-Oberfläche mithilfe von Pixel (px), Viewport-Höhe (vh) oder Rem-Einheiten:
Passen Sie die Gesamtbreite des Chats (z. B. 400px) und die maximale Chathöhe (z. B. 50vh) an.
Mit „Messages padding“ lässt sich der Abstand feinjustieren und die Krümmung der Benutzeroberfläche mithilfe von Radius-Reglern wie „Messages container radius“ (18px) und „Chat window radius“ (12px) anpassen.
Die Typografiegröße lässt sich über die Einstellungen für „Chat-Schriftgröße“, „Chat-Header-Textgröße“ und „Chat-Header-Symbolgröße“ steuern.
Farbgestaltung
Die Benutzeroberfläche bietet umfangreiche Hex-Code-Auswahlmöglichkeiten, um jedes einzelne Element des Chatfensters zu ändern.
Hintergründe: Passen Sie den primären Chat-Hintergrund (#FFFFFF), den Hintergrund für Kundennachrichten und den Hintergrund für Assistentennachrichten (#000000) an. Sie können auch bestimmte Bereiche wie den Hintergrund des Begrüßungstextfelds oder die Hintergrundfarbe der FAQs (#F9FAFB) einfärben.
Rahmen: Definieren Sie die dezenten Umrisse für das Nachrichtenfeld, die FAQ-Boxen und die Links, um ein einheitliches Erscheinungsbild zu erzielen.
Häufig gestellte Fragen
Im FAQ-Bereich können Sie vorgefertigte Fragen erstellen, die dem Nutzer angezeigt werden, noch bevor er seine erste Nachricht eingibt. So lassen sich häufige Anfragen sofort beantworten, ohne dass eine KI-Generierung erforderlich ist.
Klicken Sie auf „+ FAQ hinzufügen“, um einen neuen Eintrag zu erstellen.
Geben Sie für jeden Eintrag die allgemeine „Frage“ ein (z. B. „Können Sie das Produkt in die USA versenden?“) und formatieren Sie die statische „Antwort“ mithilfe des Rich-Text-Editors (fett, kursiv, unterstrichen, durchgestrichen).
Sie können die Fragen per Drag & Drop neu anordnen oder sie mithilfe der Stift- und Papierkorbsymbole bearbeiten oder löschen.
Schnellzugriff
Über den Tab „Links“ können Sie am unteren Rand des Chat-Begrüßungsbildschirms direkte Navigationsschaltflächen hinzufügen. Dies ist ideal, um Nutzer zu alternativen Supportkanälen oder wichtigen Shopseiten weiterzuleiten.
Rasterlayout: Legen Sie zunächst fest, wie die Links angezeigt werden, indem Sie die Anzahl der „Rasterspalten“ auswählen (z. B. werden sie bei einer Einstellung von 3 in einer horizontalen Zeile angezeigt).
Links hinzufügen: Klicken Sie auf „+ Link hinzufügen“, um eine neue Schaltfläche zu erstellen. Geben Sie einen „Linktitel“ (z. B. „WhatsApp“ oder „E-Mail“) an und tragen Sie die genaue „Link-URL“ ein (verwenden Sie Standardformate wie mailto: für E-Mail-Adressen oder direkte Telefonnummern).
Symbole: Sie können aus einer integrierten Bibliothek von Vektorsymbolen (z. B. Briefumschlag, Telefon, Globus oder Kalender) auswählen, um den Link visuell darzustellen. Alternativ können Sie über die Schaltfläche „Datei auswählen“ unter „Benutzerdefiniertes Bild“ ein eigenes Symbol hochladen.
Bereit, mehr auf Shopify zu verkaufen?
Installieren Sie Liliwi in Ihrem Shopify-Shop und erhalten Sie eine kostenlose Einrichtung von unserem Team.
Nutzen Sie den vollen Service schon ab 1 Dollar.