Dein Knowledge Base-Widget ist oft der erste Kontaktpunkt, den ein Nutzer mit deinen Support-Inhalten hat. Ein Widget, das zur visuellen Identität Ihres Produkts passt, wirkt native und vertrauenswürdig – eines, das nicht wie ein Nachgedanke eines Drittanbieters wirkt. Dieser Artikel behandelt jede visuelle Einstellung, die für das Widget verfügbar ist, und erklärt, wann und warum du jede davon verwenden würdest.
Styling-Einstellungsreferenz
| Schauplatz | Was er kontrolliert |
|---|---|
| Widget-Farbe | Die Hintergrundfarbe des Themas und des Icons |
| Widget-Symbol | Die Button-Grafik, die das Widget öffnet |
| Widget-Position | Linke oder rechte Seite des Bildschirms, mit Abstandsregelung |
| Begrüßungsbotschaft | Ein kurzer Prompt über dem Symbol wird angezeigt, bevor der Nutzer klickt |
| Widget ausblenden | Unterdrücke das schwebende Symbol (verwendet beim Auslösen über eine benutzerdefinierte Taste) |
| Meistgesuchte Artikel ausblenden | Entfernt die Trendartikel, die beim Öffnen des Widgets angezeigt werden |
Wie man Widget-Styling-Einstellungen öffnet
- Gehe in der linken Navigationsleiste zu Verbindungen () > Knowledge Base-Widget.
- Fahre mit der Maus über das gewünschte Widget und klicke auf das Edit ()-Symbol.
- Im Reiter Konfigurieren & Verbinden erweitern Sie das Akkordeon des Style-Widgets .
Änderungen werden automatisch gespeichert, während du zwischen den Tabs navigierst. Klicken Sie auf Speichern , um sich ausdrücklich zu bewerben, bevor Sie die Seite verlassen.
Wann man Widget-Styling konfigurieren sollte
- Während der Ersteinrichtung sollten Sie das Widget mit den Markenfarben und dem Symbol Ihres Produkts ausrichten.
- Beim Umpositionieren, um Überschneidungen mit einem Live-Chat-Widget oder Cookie-Banner zu vermeiden.
- Wenn ich eine benutzerdefinierte Auslösertaste benutze und das Standard-Schwebensymbol ausblenden möchte.
- Beim Hinzufügen einer Onboarding-Willkommensnachricht für neue Nutzer.
Bevor du anfängst
Du musst eine Rolle als Projektleiter oder Administrator haben.
Widget-Farbe
Warum es wichtig ist: Wenn die Akzentfarbe deines Widgets mit der Hauptfarbe deines Produkts abgestimmt wird, fühlt es sich wie ein gestalteter Teil deiner Benutzeroberfläche an, nicht wie ein eingebettetes Tool. Dies ist besonders wichtig für SaaS-Produkte, bei denen Markenkonsistenz die wahrgenommene Qualität beeinflusst.
Wie man es einstellt:
- Klicken Sie auf Farbe ändern. Die Farbpalette öffnet sich.
- Wählen Sie eine Farbe aus dem Picker oder geben Sie direkt einen Hex-, RGB- oder HSL-Wert ein.
- Klicken Sie auf Speichern.
Ergebnis: Das Widget-Symbol und seine Headerleiste werden sofort in der Vorschau und auf deiner Live-Seite nach dem Laden der nächsten Seite aktualisiert.
Beispiel: Wenn dein Produkt als primäres Blau verwendet
#0057FF, passt das Widget-Symbol durch die Eingabe dieses Hex-Werts perfekt zu deiner Navigationsleiste und den CTA-Buttons.
Widget-Symbol
Warum es wichtig ist: Das Standardsymbol ist eine generische Hilfeblase. Wenn Sie es durch Ihr Logo oder ein benutzerdefiniertes Symbol ersetzen, signalisieren Sie den Nutzern, dass dieses Widget zu Ihrem Produkt gehört und nicht zu einem Drittanbieter-Tool – was die Klickrate erhöht.
Wie man es einstellt:
- Klicke auf das Symbol 'Ändern 'Symbol'.
- Wählen Sie im Tab Icon-Set, um ein vorgefertigtes Symbol auszuwählen, oder klicken Sie auf Bild einfügen , um ein benutzerdefiniertes Bild zu verwenden:
- Aus der URL: Füge den Bildlink ein und klicke auf Einfügen.
- Vom Gerät: Klicken Sie auf Bild hochladen und wählen Sie Ihre Datei aus.
- Klicken Sie auf Speichern.
- Um zurückzusetzen, klicken Sie auf Standard.
Tipp: Verwenden Sie ein quadratisches Bild mit transparentem Hintergrund (PNG, empfohlen 64×64px oder größer) für das sauberste Ergebnis bei allen Bildschirmgrößen.
Widget-Position
Warum es wichtig ist: Die Standardposition unten rechts funktioniert für die meisten Seiten, aber einige Layouts haben feste Navigationsleisten, Cookie-Banner oder Chat-Widgets in dieser Ecke. Eine Neupositionierung vermeidet Überlappungen und stellt sicher, dass das Widget immer sichtbar und zugänglich ist.
Wie man es einstellt:
- Wählen Sie links oder rechts , um zu wählen, auf welcher Seite des Bildschirms das Widget erscheint.
- Geben Sie Werte in Seitenabstand (horizontaler Abstand vom Rand) und Unterabstand (vertikaler Abstand vom unteren Rand) in Pixel ein.
- Klicken Sie auf Speichern.
Beispiel: Wenn dein Live-Chat-Widget unten rechts mit einem 20px-Margen liegt, positioniere dein Knowledge Base-Widget links im gleichen unteren Abstand, sodass beide ohne Überschneidungen zugänglich sind.
Begrüßungsbotschaft
Warum es wichtig ist: Die meisten Nutzer werden ein schwebendes Symbol nicht bemerken, es sei denn, etwas zieht ihre Aufmerksamkeit an. Eine Begrüßungsnachricht erscheint als Chatblase über dem Symbol und dient als sanfter Anstoß – besonders nützlich während Onboarding-Flows oder nach einem neuen Feature-Start.
Wie man es einstellt:
- Gib deine Nachricht im Willkommens-Feld ein (maximal 50 Zeichen).
- Klicken Sie auf Speichern.
Beispiele für effektive Willkommensbotschaften:
- "Brauchst du Hilfe? Fang hier an."
- "Neu bei dieser Funktion? Wir haben Führer."
- "Durchsuche unsere Wissensdatenbank."
Wann sollte man es überspringen: Wenn dein Widget in eine stark aufgabenorientierte Benutzeroberfläche (wie ein Checkout-Flow) eingebettet ist, kann eine Willkommensnachricht aufdringlich wirken. Lass es in diesen Kontexten leer.
Widget ausblenden
Warum es wichtig ist: Wenn du das Widget über einen benutzerdefinierten Button auslöst (z. B. einen "Hilfe"-Link in deiner Navigationsleiste), möchtest du nicht, dass das Standard-Schweben-Symbol auch erscheint – das erzeugt zwei Einstiegspunkte und visuelle Unordnung. Das Ausblenden des Widget-Symbols ermöglicht es dir, genau zu steuern, wo und wie das Widget gestartet wird.
Wie man es einstellt:
- Aktiviere den Umschalter für das Widget "Verstecken ".
- Klicken Sie auf Speichern.
Wenn du das Widget auf einen benutzerdefinierten Button gelegt hast, das schwebende Symbol aber weiterhin erscheint, überprüfe, ob dieser Schalter aktiviert ist.
Meistgesuchte Artikel ausblenden
Warum es wichtig ist: Der Bereich "meistgesucht" zeigt trendende Artikel an, wenn das Widget zum ersten Mal geöffnet wird. Das ist hilfreich für allgemeine Wissensdatenbanken. Wenn Ihr Widget jedoch auf einen bestimmten Produktbereich oder Workflow beschränkt ist, kann das Anzeigen nicht verwandter populärer Artikel die Nutzer verwirren.
Wie man es einstellt:
- Aktivieren Sie den Schalter "Meistgesuchte Artikel ausblenden ".
- Klicken Sie auf Speichern.
Das Aktivieren dieses Schalters deaktiviert außerdem die URL-basierte Listenzuordnung für das Widget. Wenn du darauf angewiesen bist, dass URLs auf Surface-Kategorielisten auf bestimmten Seiten zugeordnet werden, lass diese Einstellung aktiviert.
Best Practices
- Passen Sie die Widget-Farbe an die primäre CTA-Farbe Ihres Produkts an, um ein natives Gefühl zu erzielen.
- Wenn ein anderes Widget (z. B. Live-Chat) die untere rechte Ecke belegt, verschieben Sie das Knowledge Base-Widget mit entsprechendem unteren Abstand nach links.
- Verwenden Sie ein benutzerdefiniertes Symbol mit transparentem PNG-Hintergrund für markenkonsistente Ergebnisse.
- Lassen Sie die Begrüßungsnachricht auf Seiten mit hoher Absicht (Auschecken, Einreichen von Formularen) leer, wo Ablenkungen die Konversion beeinträchtigen.