Erweitertes Help-Center-Branding

Mit dem erweiterten Branding kannst du ein Deskwoot-Help-Center über das einfache Logo und die Markenfarbe hinaus gestalten und so aussehen lassen, als hätte es dein eigenes Design-Team gebaut. Du konfigurierst alles unter Help Center, dann im Tab Einstellungen. Die Grundlagen (Logo, Markenfarbe, Suche, Layout) funktionieren in jedem Tarif, während die tieferen Einstellungen (eigenes CSS, Header- und Footer-HTML) Teil des Enterprise-Tarifs sind. Hier ist alles, was du anpassen kannst.

Wie lege ich ein eigenes Favicon fest?

Das Favicon ist das kleine Symbol im Browser-Tab. Lade eines in den Help-Center-Einstellungen hoch, und es erscheint auf jeder öffentlichen Seite dieses Portals. Wenn du keines hochlädst, erzeugt Deskwoot ein Markensymbol aus deiner Markenfarbe und dem ersten Buchstaben deines Portalnamens. Ein Help-Center zeigt niemals das eigene Favicon von Deskwoot, sodass Besucher unsere Marke schon vor deiner Einrichtung nicht im Tab sehen.

Verwende ein quadratisches Bild (ein PNG eignet sich gut). Die meisten Browser stellen es mit 16 oder 32 Pixeln dar, halte das Design also einfach genug, um es in dieser Größe lesen zu können.

Wie wähle ich eine Schriftart für das Help-Center?

Lege in den Einstellungen eine Webschriftart fest, und das gesamte Help-Center wird damit dargestellt. Deskwoot lädt die Schriftart für dich von Google Fonts, sodass du nichts hosten oder hochladen musst. Du wählst aus einer kuratierten Liste:

• Systemstandard (keine Webschriftart, nutzt die Schriftart auf dem Gerät des Besuchers)
• Inter
• Roboto
• Open Sans
• Lato
• Poppins
• Montserrat
• Nunito
• Source Sans
• Plus Jakarta Sans

Passe die Schriftart an deine Marketing-Website an, und das Help-Center fühlt sich nicht mehr wie ein separates Tool an. Lass es auf Systemstandard, um die schnellste Ladezeit zu erreichen, wenn du keine bestimmte Markenschrift im Sinn hast.

Hell, dunkel oder automatisch: ein Theme wählen

Das Help-Center hat eine Theme-Einstellung mit drei Optionen:

• Hell (der Standard): weiße Flächen, dunkler Text.
• Dunkel: dunkle Flächen, heller Text. Gut, wenn deine Marke dunkel ist.
• Automatisch: folgt der Systemeinstellung des Besuchers (dessen prefers-color-scheme), zeigt also Menschen mit Gerät im Dunkelmodus die dunkle und allen anderen die helle Variante.

Das Theme gilt über das gemeinsame Seitengerüst für jede öffentliche Seite, du legst es also einmal fest, und es deckt die Startseite, die Kategorieseiten und die Artikelseiten ab.

Kann ich die Farben mit Design-Tokens feinjustieren?

Ja. Zusätzlich zum Theme kannst du einzelne Design-Tokens überschreiben, statt CSS zu schreiben. Die Tokens, die du festlegen kannst, sind der Seitenhintergrund, die Fläche (Karten und Panels), die Rahmenfarbe, die Textfarbe des Fließtexts, die gedämpfte Textfarbe und die Überschriftenfarbe. Jeder nimmt einen Hex-Wert an. Jeder Token, den du leer lässt, fällt auf die Voreinstellung des Themes zurück.

Das ist der saubere Weg, ein dunkles Theme an deine genaue Markenpalette anzunähern, zum Beispiel ein tiefes Marineblau als Seitenhintergrund mit einer etwas helleren Fläche, ganz ohne eigenes CSS. Die Markenfarbe, die du separat festlegst, steuert weiterhin Buttons, Links und Akzente.

Eigenes CSS

Für alles, was Theme und Tokens nicht erreichen, können Enterprise-Portale eigenes CSS einbinden. Deskwoot bettet es in einen abgegrenzten Style-Block am Anfang des öffentlichen Help-Centers ein, sodass es deine Seiten gestaltet, ohne dass du Templates bearbeitest.

Ein paar Regeln, die du vorab kennen solltest:

• Wir bereinigen das CSS, wenn du es speicherst. @import-Regeln, url(javascript:...) und Abrufe externer Ressourcen werden entfernt. Das verhindert, dass ein Portal über die öffentliche Seite schädlichen Code ausliefert oder von Angreifern kontrollierte Inhalte lädt.
• Es gibt eine Obergrenze von 20.000 Zeichen. Das reicht reichlich für Branding-Anpassungen; es ist nicht dafür gedacht, ein ganzes Design-System aufzunehmen.
• Da es auf das öffentliche Help-Center abgegrenzt ist, kann dein CSS das Deskwoot-Dashboard nicht versehentlich beeinflussen.

Greife zuerst zu Design-Tokens. Wechsle nur dann zu eigenem CSS, wenn du etwas umgestalten musst, das die Tokens nicht offenlegen.

Eigenes Header- und Footer-HTML

Damit sich das Help-Center wie ein Teil deiner Haupt-Website anfühlt, können Enterprise-Portale rohes Header-HTML und Footer-HTML bereitstellen.

Das Header-HTML wird als eigenständiger Block über dem Hero dargestellt, sodass du die Navigationsleiste deiner Marketing-Website einfügen und Besucher ohne harten Bruch zwischen deiner Website und deinem Help-Center wechseln lassen kannst. Eigenes Header-HTML benötigt eine aktive eigene Domain.

Das Footer-HTML ersetzt den Standard-Footer am Ende jeder öffentlichen Seite, sodass du deinen Marketing-Footer exakt nachbilden kannst. Wenn du rohes Footer-HTML festlegst, tritt es an die Stelle des einfacheren spaltenbasierten eigenen Footers (ein strukturierter Footer mit bis zu 4 Link-Spalten plus einer Copyright-Zeile), falls du diesen ebenfalls konfiguriert hattest.

Sowohl Header- als auch Footer-HTML werden beim Speichern bereinigt. Skripte, Event-Handler, <style>-Blöcke, iframes, Formulare und javascript:-URLs werden entfernt. Klassen- und Inline-Style-Attribute bleiben erhalten, du schreibst das Markup also mit Klassen und überlässt deinem eigenen CSS den Feinschliff. Jedes Feld ist auf 20.000 Zeichen begrenzt.

Wie das zusammenpasst

Ein typisches, vollständig gebrandetes Setup sieht so aus: eine eigene Domain, damit die URL deine ist, White-Label aktiviert, um den Deskwoot-Footer zu entfernen, dein Logo und Favicon hochgeladen, eine Markenfarbe und Webschriftart gewählt, ein Theme festgelegt (bei Bedarf mit ein paar Token-Überschreibungen) und deine echte Navigationsleiste und dein echter Footer als Header- und Footer-HTML eingefügt. An diesem Punkt kann ein Besucher nicht erkennen, dass das Help-Center auf Deskwoot läuft. Für die Schritte zur Domain und zum White-Label siehe Eine eigene Domain einrichten und Dein Help-Center mit White-Label versehen.

Noch ein Sicherheitsnetz: Jedes Mal, wenn du Design-Änderungen speicherst, erstellt Deskwoot eine Momentaufnahme des vorherigen Zustands. Über den Designverlauf in den Einstellungen siehst du, wer was geändert hat, und kannst mit einem Klick zu einem früheren Aussehen zurückkehren, sodass das Experimentieren mit dem Branding wenig riskant ist.