Branding und Design konfigurieren

Im Bereich Branding definieren Sie das optische Erscheinungsbild für die von tebio bereitgestellten Frontends (zum Beispiel Hosted Pages oder das Self-Care / Kundenportal). Indem Sie Ihre Firmenfarben und Ihr Logo hinterlegen, stellen Sie sicher, dass Ihre Kunden stets ein konsistentes Markenerlebnis (Corporate Identity) haben.

Wann brauche ich diese Funktion?

Diese Funktion benötigen Sie, wenn Sie bereitgestellte tebio Frontends (wie Hosted Pages für eine Subscription) nutzen und diese Seiten optisch so anpassen möchten, dass sie wirken, als wären sie Teil Ihrer eigenen Unternehmens-Website. Ein vertrautes Branding erhöht das Vertrauen der Kunden beim Kaufprozess.

Voraussetzungen

• Sie sind im tebio Business-Portal angemeldet.
• Sie verfügen über ausreichende Berechtigungen für die Unternehmenseinstellungen.
• Ihr Firmenlogo und Favicon liegen idealerweise als öffentlich erreichbare URL auf Ihrem eigenen Server vor, oder stehen als gängiges Bildformat (z. B. PNG, JPG oder SVG) auf Ihrem Computer zum Upload bereit.

Schritt-für-Schritt-Anleitung

1. Branding-Bereich öffnen: Navigieren Sie im tebio Business-Portal zu den Allgemeinen Einstellungen (über das Zahnrad-Symbol) und wählen Sie im Bereich Unternehmen den Punkt Branding.
2. Farben festlegen:
   • Auf der linken Seite finden Sie das Panel Elemente.
   • Klicken Sie auf die Farbfelder unter Primärfarbe und Sekundärfarbe.
   • Wählen Sie über die erscheinende Farbauswahl die exakten Farben Ihrer Marke aus (alternativ können Sie den HEX-Code, zum Beispiel #0055FF, per Tastatur eingeben). Die Primärfarbe wird meist für Haupt-Buttons verwendet, die Sekundärfarbe für dezente Akzente.
3. Logo und Favicon hinterlegen:
   • Unter den Farbfeldern finden Sie den Bereich für die Logos.
   • Sie können Ihr Firmenlogo und Ihr Favicon entweder klassisch hochladen oder – falls Sie die Bilddateien zentral auf Ihrem eigenen Server verwalten möchten – direkt per URL zu einer Bilddatei auf Ihrem eigenen Server einbinden.
   • Das Firmenlogo wird später prominent im Header der Hosted Pages platziert. Das Favicon ist das kleine Symbol, das Kunden im Browser-Tab sehen, wenn sie eine Ihrer Seiten öffnen.
4. Live-Vorschau prüfen:
   • Auf der rechten Bildschirmseite (beziehungsweise auf Mobilgeräten weiter unten) finden Sie eine Live-Vorschau.
   • Die Vorschau zeigt in Echtzeit, wie sich Ihre Farb- und Logo-Änderungen auf Ihre Hosted Pages auswirken. Über die verschiedenen Reiter über der Vorschau können Sie unterschiedliche Szenarien simulieren.
5. Speichern: Klicken Sie auf Änderungen speichern, um Ihr neues Branding zu aktivieren.

Ergebnis

Alle öffentlichen Hosted Pages, die mit Ihrem Portal verknüpft sind, übernehmen nach dem Speichern die neuen Farben und Logos. Besucher sehen anschließend Ihr individuelles Design.

Hinweise und typische Fehler

Kontraste prüfen

Achten Sie bei der Wahl Ihrer Primärfarbe darauf, dass weiße oder sehr helle Texte auf dieser Farbe gut lesbar bleiben. Ein zu schwacher Kontrast erschwert es Kunden, Buttons (z. B. “Jetzt kaufen”) zu lesen.

Logo-Größen

Vermeiden Sie es, extrem hochauflösende oder unbeschnittene Logos hochzuladen, bei denen das eigentliche Markenzeichen viel Leerraum besitzt. Ein gut zugeschnittenes Logo im Querformat wirkt auf den Hosted Pages meist am professionellsten.

API-Hinweis

Branding-Einstellungen (wie z. B. Farben und Logos für Rechnungen oder gehostete Seiten) lassen sich ebenfalls über die API verwalten. Das ist besonders für White-Label-Szenarien mit mehreren Tenants nützlich.

• Branding-Einstellungen abrufen: Get branding
• Branding-Einstellungen aktualisieren: Patch branding
• Logo und Bilder hochladen: Nutzen Sie hierfür die allgemeinen Dokumenten- und Medien-Endpunkte, z. B. Upload public web content

Verwandte Themen

• Firmendaten und Kontakte verwalten
• Hosted Pages einrichten