So passen Sie das Theming des Zendesk Mobile SDK an: Vollständige Anleitung für 2026

Wenn Kunden Ihre App öffnen und Hilfe benötigen, sollte sich das Support-Erlebnis wie eine natürliche Erweiterung Ihrer Marke anfühlen. Mit dem Zendesk Mobile SDK Theming können Sie Farben, Schriftarten und UI-Elemente anpassen, sodass die Support-Oberfläche zum Look and Feel Ihrer App passt.

Aber hier ist der springende Punkt: Das SDK-Theming erfordert Entwicklungsressourcen und laufende Wartung. Wenn Sie nach einer einfacheren Möglichkeit suchen, gebrandete Support-Erlebnisse bereitzustellen, integriert sich eesel AI in Zendesk und übernimmt die Anpassung, ohne den Code zu berühren. Mehr dazu später.

Hier erfahren Sie, wie Sie das Zendesk Mobile SDK sowohl für Android als auch für iOS thematisieren.

Was Sie benötigen

Bevor Sie mit der Anpassung beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Ein Zendesk-Konto mit Zugriff auf das Mobile SDK
• Android Studio oder Xcode installiert
• Grundlegende Kenntnisse in Kotlin/Java (für Android) oder Swift/Objective-C (für iOS)
• Zugriff auf die Theme-Ressourcen Ihrer App und AndroidManifest.xml (Android) oder Info.plist (iOS)

Schritt 1: Wählen Sie Ihren Theming-Ansatz

Zendesk bietet drei Möglichkeiten, das Erscheinungsbild des Mobile SDK anzupassen. Wählen Sie diejenige aus, die zu Ihrer Situation passt:

Option A: UserColors API (empfohlen für neue Projekte)

Die UserColors API ist der moderne Ansatz für das Web Widget SDK. Sie bietet Ihnen eine detaillierte Kontrolle über mehr als 15 Farbeigenschaften und unterstützt standardmäßig den Hell- und Dunkelmodus. Verwenden Sie diese Option, wenn Sie neu anfangen oder zum neueren SDK migrieren können.

Option B: Material Design Themes (für Legacy-Implementierungen)

Wenn Sie das klassische Support SDK verwenden, arbeiten Sie mit Material Design Themes. Dieser Ansatz erweitert Theme.MaterialComponents und verwendet Attribute wie colorPrimary und colorAccent. Bleiben Sie dabei, wenn Sie eine ältere Implementierung pflegen.

Option C: Admin Center-Konfiguration (No-Code-Option)

Für grundlegende Farbänderungen, ohne den Code zu berühren, können Sie im Zendesk Admin Center Primär-, Nachrichten- und Aktionsfarben festlegen. Das SDK verwendet diese als Standardwerte, wenn Sie sie nicht programmgesteuert überschreiben. Dies funktioniert für einfaches Branding, es fehlt jedoch die Flexibilität der API-Ansätze.

Schritt 2: Implementieren Sie die UserColors API unter Android

Mit der UserColors API können Sie benutzerdefinierte Farben für bestimmte UI-Komponenten definieren. So implementieren Sie sie.

Erstellen Sie zunächst UserColors-Objekte für den Hell- und Dunkelmodus:

val userLightColors = UserColors(
    primary = Color.parseColor("#1E88E5"),
    onPrimary = Color.WHITE,
    message = Color.parseColor("#E3F2FD"),
    onMessage = Color.parseColor("#1565C0"),
    businessMessage = Color.WHITE,
    onBusinessMessage = Color.parseColor("#424242"),
    action = Color.parseColor("#43A047"),
    onAction = Color.WHITE,
    background = Color.parseColor("#FAFAFA"),
    onBackground = Color.parseColor("#616161"),
    onSecondaryAction = Color.parseColor("#1E88E5"),
    error = Color.parseColor("#E53935"),
    notify = Color.parseColor("#FB8C00"),
    onError = Color.WHITE,
    onNotify = Color.WHITE
)

val userDarkColors = UserColors(
    primary = Color.parseColor("#90CAF9"),
    onPrimary = Color.BLACK,
    message = Color.parseColor("#1565C0"),
    onMessage = Color.WHITE,
    businessMessage = Color.parseColor("#424242"),
    onBusinessMessage = Color.WHITE,
    action = Color.parseColor("#66BB6A"),
    onAction = Color.BLACK,
    background = Color.parseColor("#212121"),
    onBackground = Color.parseColor("#BDBDBD"),
    onSecondaryAction = Color.parseColor("#90CAF9"),
    error = Color.parseColor("#EF5350"),
    notify = Color.parseColor("#FFA726"),
    onError = Color.BLACK,
    onNotify = Color.BLACK
)

Initialisieren Sie dann das SDK mit Ihren benutzerdefinierten Farben:

val factory = DefaultMessagingFactory(
    userLightColors = userLightColors,
    userDarkColors = userDarkColors
)

Zendesk.initialize(
    context = this,
    channelKey = "your_channel_key",
    messagingFactory = factory
)

Für Java-Entwickler ist das Muster ähnlich:

UserColors userLightColors = new UserColors(
    Color.parseColor("#1E88E5"),  // primary
    Color.WHITE,                   // onPrimary
    Color.parseColor("#E3F2FD"),  // message
    // ... remaining colors
);

DefaultMessagingFactory factory = new DefaultMessagingFactory(
    userLightColors,
    userDarkColors
);

Zendesk.initialize(this, "your_channel_key", factory);

Die wichtigsten Eigenschaften, die Sie verstehen sollten:

• primary (Primär): Hintergrundfarbe für Header auf Konversations- und Konversationslistbildschirmen
• onPrimary (AufPrimär): Text- und Symbolfarbe auf primären Hintergründen
• message (Nachricht): Hintergrund für Endbenutzernachrichten
• businessMessage (Geschäftsnachricht): Hintergrund für Agenten-/Geschäftsnachrichten
• action (Aktion): Hintergrund für Schaltflächen wie "Neue Konversation" und Formularschaltflächen
• background (Hintergrund): Hintergrundfarbe für Konversationsbildschirme
• onBackground (AufHintergrund): Farbe für Zeitstempel, Namen und Nachrichtenstatus (bei 65 % Deckkraft)

Schritt 3: Passen Sie das Erscheinungsbild des iOS SDK an

Das iOS-Theming ist einfacher als unter Android. Sie arbeiten hauptsächlich mit dem CommonTheme-Objekt, um Ihre primäre Markenfarbe festzulegen. Weitere Informationen finden Sie in der iOS SDK-Dokumentation.

In Swift:

import CommonUISDK

// Set your primary brand color
CommonTheme.currentTheme.primaryColor = UIColor(red: 0.12, green: 0.53, blue: 0.90, alpha: 1.0)

In Objective-C:

#import <CommonUISDK/CommonUISDK.h>

// Set your primary brand color
[ZDKCommonTheme currentTheme].primaryColor = [UIColor colorWithRed:0.12 green:0.53 blue:0.90 alpha:1.0];

Diese einzelne Farbänderung wird im gesamten SDK-UI als Farbton angewendet und wirkt sich auf Navigationsleisten, Schaltflächen und interaktive Elemente aus.

Erstellen Sie für das Styling von Help Center-Artikeln eine Datei namens help_center_article_style.css im Stammverzeichnis Ihres Projekts und fügen Sie sie Ihrem Xcode-Projekt hinzu. Das SDK verwendet automatisch Ihr benutzerdefiniertes CSS anstelle der Standardstile.

Schritt 4: Gestalten Sie Help Center-Artikel

Sowohl Android als auch iOS unterstützen die CSS-Anpassung für Help Center-Artikel. Hier können Sie den Inhalt wirklich wie einen Teil Ihrer App gestalten.

Erstellen Sie eine Datei namens help_center_article_style.css mit Ihren benutzerdefinierten Stilen. Hier ist eine Startvorlage:

/* Base styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 20px;
    background-color: #fff;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: #1a1a1a;
    font-weight: 600;
    margin-bottom: 16px;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

/* Links */
a {
    color: #1E88E5;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Lists */
ul, ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

li {
    margin-bottom: 8px;
}

/* Hide article footer (author and date) */
footer {
    display: none;
}

Platzieren Sie diese Datei für Android in Ihrem assets-Verzeichnis. Fügen Sie sie für iOS Ihrem Projektbundle hinzu. Das SDK erkennt und wendet Ihr benutzerdefiniertes CSS automatisch an.

Schritt 5: Testen und validieren Sie Ihr Theme

Testen Sie Ihr Theming vor dem Versand in die Produktion gründlich:

• Gerätevielfalt: Testen Sie auf verschiedenen Bildschirmgrößen (Telefon, Tablet, faltbar)
• Hell- und Dunkelmodus: Stellen Sie sicher, dass die Farben in beiden Themes funktionieren
• Barrierefreiheit: Überprüfen Sie, ob die Kontrastverhältnisse die WCAG-Richtlinien erfüllen (4,5:1 für normalen Text, 3:1 für großen Text)
• Edge Cases: Testen Sie mit langen Artikeltiteln, mehreren Anhängen und Fehlerzuständen

Häufige Probleme, auf die Sie achten sollten:

• Farben werden nicht angewendet: Stellen Sie sicher, dass Sie die Farben vor der Initialisierung des SDK festlegen
• Dunkelmodus funktioniert nicht: Stellen Sie sicher, dass Sie sowohl helle als auch dunkle Farbobjekte definiert haben
• CSS wird nicht geladen: Überprüfen Sie, ob sich Ihre CSS-Datei am richtigen Speicherort befindet und in Ihrem Build enthalten ist

Alternative: Zendesk Themes von Drittanbietern

Wenn Ihnen das benutzerdefinierte SDK-Theming übertrieben erscheint, bieten vorgefertigte Themes von Marktplätzen wie Premium Plus, Diziana oder Grow-Shine einen anderen Weg. Diese kosten zwischen 30 und 389 US-Dollar und bieten professionelle Designs ohne Entwicklungsaufwand.

Der Haken? Themes von Drittanbietern passen in erster Linie das webbasierte Help Center an, nicht die Mobile SDK-UI. Für das In-App-Support-Erlebnis benötigen Sie weiterhin das SDK-Theming. Sie eignen sich am besten für Teams, die ein ausgefeiltes Help Center wünschen, ohne ein benutzerdefiniertes Theme von Grund auf neu zu erstellen.

Einfachere Support-Anpassung mit eesel AI

Hier ist die Realität: Das SDK-Theming kostet Zeit, erfordert laufende Wartung und benötigt die Beteiligung von Entwicklern für jedes Markenupdate. Wenn Sie gebrandeten Support ohne die Komplexität wünschen, bietet eesel AI einen anderen Ansatz.

Anstatt ein SDK zu thematisieren, arbeitet eesel AI mit Ihrem bestehenden Helpdesk (einschließlich Zendesk) zusammen, um KI-gestützten Support bereitzustellen. Es lernt Ihre Markenstimme aus vergangenen Tickets und Help Center-Artikeln, sodass die Antworten auf natürliche Weise zu Ihrem Ton passen. Kein Code erforderlich, kein zu thematisierendes SDK, keine Wartung, wenn Sie ein Rebranding durchführen.

Die Preisgestaltung ist ebenfalls unkompliziert: Sie zahlen für Interaktionen, nicht für Seats, und Sie können mit dem Entwurf von KI-Antworten beginnen, bevor Sie die Konversationen autonom abwickeln lassen. Für Teams, die großartige Support-Erlebnisse ohne den Entwicklungsaufwand wünschen, ist es eine Überlegung wert, neben dem traditionellen SDK-Theming.

Fehlerbehebung bei häufigen Theming-Problemen

Auch mit einer klaren Dokumentation funktionieren die Dinge manchmal nicht wie erwartet. Hier sind Korrekturen für die häufigsten Probleme:

Farben werden nicht angewendet: Stellen Sie sicher, dass Sie die Farben konfigurieren, bevor Sie Zendesk.initialize() aufrufen. Das SDK liest die Theme-Einstellungen zum Zeitpunkt der Initialisierung.

Der Dunkelmodus sieht falsch aus: Überprüfen Sie, ob Sie sowohl userLightColors als auch userDarkColors definiert haben. Wenn Sie nur eine festlegen, verwendet das SDK Standardwerte für die andere.

CSS-Änderungen werden nicht angezeigt: Stellen Sie unter iOS sicher, dass Ihre CSS-Datei im App-Bundle-Ziel enthalten ist. Überprüfen Sie unter Android, ob sie sich im Ordner assets und nicht in res befindet.

Theme-Vererbungsprobleme: Verwenden Sie beim Erweitern von SDK-Themes die exakten Namen der übergeordneten Themes: ZendeskSdkTheme.Light, ZendeskSdkTheme.Dark oder ZendeskSdkTheme.Light.DarkActionBar.

Wann neu erstellen vs. neu starten: Codeänderungen (Farben, Themes) erfordern eine Neuerstellung. CSS-Dateiänderungen benötigen oft nur einen Neustart der App. Im Zweifelsfall neu erstellen.