Zum Hauptinhalt springen

Branding

[branding] [admin]

Komplettes White-Label-Branding deines Tenant-Portals: Farben, Logo, Schrift, Login-Texte. Wirkt auf Portal, Landing-Page und Widget.

Für wen​

Admins, die ihr Portal in der Corporate Identity ihrer Marke betreiben wollen.

Was du anpassen kannst​

Farben (9 CSS-Variablen)​

  • primary_color — Primär (Buttons, Links, Akzente)
  • background_color — Hauptseiten-Hintergrund
  • header_color — Header-Hintergrund
  • sidebar_color — Sidebar-Hintergrund
  • text_color — generelle Textfarbe
  • button_text_color — Schrift auf Buttons (z.B. weiß auf Primary)
  • heading_color — Überschriften (h1, h2, h3)
  • body_text_color — Fließtext-Farbe
  • font — Google-Font-Name (live geladen, z.B. "Inter", "Roboto", "Poppins")
  • font_secondary — alternative Font für Headlines

Schriftart​

Google-Fonts-API. Eingabe als String: "Inter", "Roboto Condensed", "Playfair Display" etc. Live-Preview im Branding-Tab.

Logo & Favicon​

Upload via Storage-Bucket tenant-assets. Pfad: <tenant_id>/branding/logo.{jpg,png,svg}. Favicon wird über generateMetadata() dynamisch in den <head> injiziert.

Login-Texte​

  • login_title (z.B. "Willkommen zurück")
  • login_subtitle (z.B. "Melde dich mit deinem Lizenz-Account an")

Button-Stil​

  • button_style — rounded (default, 9px Radius), square (0px), pill (999px)

Support-E-Mail​

  • support_email — wird als Empfänger für Forwarded-Tickets und Footer-Kontakt-Link verwendet

Company-Name​

  • company_name — falls anders als tenant.name. Wird in Footer + Stripe-Vendor + Mail-Absender verwendet

Rechnungsstellung​

Separater Tab "Rechnungsstellung" — siehe Rechnungsstellung.

Schritt für Schritt​

1. Branding-Tab öffnen​

Einstellungen → Branding.

2. Farben einstellen​

9 Color-Picker — jede Änderung ist live in der Mobile/Desktop-Preview rechts sichtbar.

3. Logo hochladen​

Logo hochladen → JPG/PNG/SVG. Empfohlen: SVG für scharfe Skalierung.

4. Favicon hochladen​

Favicon hochladen → PNG (32x32 oder 64x64).

5. Schriftart wählen​

Google-Font-Name eingeben. Preview zeigt sofort wie es aussieht.

6. Login-Texte personalisieren​

"Willkommen bei {Marke}" oder ähnlich.

7. Speichern​

Speichern klicken — wirkt sofort auf Portal + Landing-Page + Widget.

Mobile-Preview​

Im Branding-Tab gibt es eine eingebaute Mobile-Preview (eingebettetes iframe), die deinen Login-Screen mit den aktuellen Farben + Logo zeigt. Toggle für Desktop-Ansicht ebenfalls da.

Häufige Fragen​

Werden Bestandskunden sofort die neuen Farben sehen? Ja — Branding wird live aus der DB geladen, nicht statisch gebaut.

Was wenn ich mehrere Brand-Varianten brauche? licensio unterstützt aktuell ein Branding pro Tenant. Wenn du mehrere Brand-Identities hast (Mutter- + Tochtermarke), brauchst du separate Tenants.

Muss ich SVG-Logos optimieren? Bevorzugt ja. Sehr große SVGs können Ladezeiten beeinflussen. Bei PNG: max 200 KB.

Wie kommt das Branding in die Mails? Resend-Templates erben aktuell nur primary_color als Akzentfarbe. Logo wird statisch eingebettet. Volles HTML-Branding der Mails kommt in Phase 2.

Wie unterscheidet sich Branding vom Widget-Tab? Branding wirkt auf Portal + Landing + Mails. Widget-Tab hat eine eigene Konfiguration speziell für den embedbaren Button (eigene Farbe + Stil + Größe + Text). Wenn der Widget-Tab keine eigenen Werte gesetzt hat, fällt er auf branding.primary_color etc. zurück.

Verwandt​