Comment personnaliser le thème du SDK mobile Zendesk : Guide complet pour 2026

Lorsque les clients ouvrent votre application et ont besoin d'aide, l'expérience de support doit ressembler à une extension naturelle de votre marque. Le thème du SDK mobile Zendesk vous permet de personnaliser les couleurs, les polices et les éléments de l'interface utilisateur afin que l'interface de support corresponde à l'apparence de votre application.

Mais voici le problème : le thème du SDK nécessite des ressources de développement et une maintenance continue. Si vous recherchez un moyen plus simple d'offrir des expériences de support personnalisées, eesel AI s'intègre à Zendesk et gère la personnalisation sans toucher au code. Plus d'informations à ce sujet plus tard.

Voici comment thématiser le SDK mobile Zendesk pour Android et iOS.

Ce dont vous aurez besoin

Avant de commencer la personnalisation, assurez-vous d'avoir :

• Un compte Zendesk avec accès au SDK mobile
• Android Studio ou Xcode installé
• Une connaissance de base de Kotlin/Java (pour Android) ou Swift/Objective-C (pour iOS)
• Accès aux ressources de thème de votre application et à AndroidManifest.xml (Android) ou Info.plist (iOS)

Étape 1 : Choisissez votre approche de thème

Zendesk propose trois façons de personnaliser l'apparence du SDK mobile. Choisissez celle qui convient à votre situation :

Option A : API UserColors (recommandée pour les nouveaux projets)

L'API UserColors est l'approche moderne pour le SDK Web Widget. Elle vous donne un contrôle granulaire sur plus de 15 propriétés de couleur et prend en charge les modes clair et sombre dès le départ. Utilisez cette option si vous partez de zéro ou si vous pouvez migrer vers le SDK le plus récent.

Option B : Thèmes Material Design (pour les implémentations héritées)

Si vous utilisez le SDK Support classique, vous travaillerez avec les thèmes Material Design. Cette approche étend Theme.MaterialComponents et utilise des attributs tels que colorPrimary et colorAccent. Restez-en à cette option si vous maintenez une ancienne implémentation.

Option C : Configuration du Centre d'administration (option sans code)

Pour les modifications de couleur de base sans toucher au code, vous pouvez définir les couleurs primaire, de message et d'action dans le Centre d'administration Zendesk. Le SDK les utilisera par défaut si vous ne les remplacez pas par programmation. Cela fonctionne pour une image de marque simple, mais manque de la flexibilité des approches de l'API.

Étape 2 : Implémentez l'API UserColors sur Android

L'API UserColors vous permet de définir des couleurs personnalisées pour des composants d'interface utilisateur spécifiques. Voici comment l'implémenter.

Tout d'abord, créez des objets UserColors pour les modes clair et sombre :

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
)

Ensuite, initialisez le SDK avec vos couleurs personnalisées :

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

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

Pour les développeurs Java, le modèle est similaire :

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);

Les propriétés clés à comprendre :

• primary : Couleur d'arrière-plan pour les en-têtes sur les écrans de conversation et de liste de conversations
• onPrimary : Couleur du texte et de l'icône sur les arrière-plans primaires
• message : Arrière-plan pour les messages de l'utilisateur final
• businessMessage : Arrière-plan pour les messages de l'agent/de l'entreprise
• action : Arrière-plan pour les boutons tels que « nouvelle conversation » et les boutons de formulaire
• background : Couleur d'arrière-plan pour les écrans de conversation
• onBackground : Couleur pour les horodatages, les noms et l'état du message (à 65 % d'opacité)

Étape 3 : Personnalisez l'apparence du SDK iOS

Le thème iOS est plus simple qu'Android. Vous travaillez principalement avec l'objet CommonTheme pour définir la couleur principale de votre marque. Consultez la documentation du SDK iOS pour plus de détails.

En Swift :

import CommonUISDK

// Définissez la couleur principale de votre marque
CommonTheme.currentTheme.primaryColor = UIColor(red: 0.12, green: 0.53, blue: 0.90, alpha: 1.0)

En Objective-C :

#import <CommonUISDK/CommonUISDK.h>

// Définissez la couleur principale de votre marque
[ZDKCommonTheme currentTheme].primaryColor = [UIColor colorWithRed:0.12 green:0.53 blue:0.90 alpha:1.0];

Ce simple changement de couleur s'applique à l'ensemble de l'interface utilisateur du SDK en tant que couleur de teinte, affectant les barres de navigation, les boutons et les éléments interactifs.

Pour le style des articles du centre d'aide, créez un fichier nommé help_center_article_style.css à la racine de votre projet et ajoutez-le à votre projet Xcode. Le SDK utilisera automatiquement votre CSS personnalisé au lieu des styles par défaut.

Étape 4 : Stylez les articles du centre d'aide

Android et iOS prennent en charge la personnalisation CSS pour les articles du centre d'aide. C'est là que vous pouvez vraiment donner l'impression que le contenu fait partie de votre application.

Créez un fichier appelé help_center_article_style.css avec vos styles personnalisés. Voici un modèle de départ :

/* Styles de base */
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;
}

/* Titres */
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; }

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

a:hover {
    text-decoration: underline;
}

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

li {
    margin-bottom: 8px;
}

/* Masquer le pied de page de l'article (auteur et date) */
footer {
    display: none;
}

Pour Android, placez ce fichier dans votre répertoire assets. Pour iOS, ajoutez-le à votre bundle de projet. Le SDK détecte et applique automatiquement votre CSS personnalisé.

Étape 5 : Testez et validez votre thème

Avant de passer à la production, testez minutieusement votre thème :

• Variété d'appareils : Testez sur différentes tailles d'écran (téléphone, tablette, pliable)
• Modes clair et sombre : Vérifiez que les couleurs fonctionnent dans les deux thèmes
• Accessibilité : Vérifiez que les rapports de contraste respectent les directives WCAG (4,5:1 pour le texte normal, 3:1 pour le texte volumineux)
• Cas extrêmes : Testez avec des titres d'articles longs, plusieurs pièces jointes et des états d'erreur

Problèmes courants à surveiller :

• Couleurs ne s'appliquant pas : Assurez-vous de définir les couleurs avant d'initialiser le SDK
• Mode sombre ne fonctionnant pas : Vérifiez que vous avez défini des objets de couleur clairs et sombres
• CSS ne se chargeant pas : Vérifiez que votre fichier CSS se trouve au bon endroit et qu'il est inclus dans votre build

Alternative : Thèmes Zendesk tiers

Si le thème SDK personnalisé vous semble excessif, les thèmes préconstruits des places de marché comme Premium Plus, Diziana ou Grow-Shine offrent une autre voie. Ceux-ci varient de 30 $ à 389 $ et offrent des conceptions professionnelles sans travail de développement.

Le piège ? Les thèmes tiers personnalisent principalement le centre d'aide Web, pas l'interface utilisateur du SDK mobile. Vous aurez toujours besoin du thème SDK pour l'expérience de support intégrée à l'application. Ils conviennent mieux aux équipes qui souhaitent un centre d'aide soigné sans créer de thème personnalisé à partir de zéro.

Personnalisation de support plus simple avec eesel AI

Voici la réalité : le thème du SDK prend du temps, nécessite une maintenance continue et nécessite l'implication d'un développeur pour chaque mise à jour de la marque. Si vous souhaitez un support personnalisé sans la complexité, eesel AI offre une approche différente.

Au lieu de thématiser un SDK, eesel AI fonctionne avec votre centre d'assistance existant (y compris Zendesk) pour fournir un support basé sur l'IA. Il apprend la voix de votre marque à partir des tickets passés et des articles du centre d'aide, de sorte que les réponses correspondent naturellement à votre ton. Aucun code requis, aucun SDK à thématiser, aucune maintenance lorsque vous changez de marque.

La tarification est également simple : vous payez pour les interactions, pas pour les sièges, et vous pouvez commencer par l'IA qui rédige des réponses avant de la laisser gérer les conversations de manière autonome. Pour les équipes qui souhaitent d'excellentes expériences de support sans les frais généraux de développement, il vaut la peine d'envisager cette option en plus du thème SDK traditionnel.

Dépannage des problèmes de thème courants

Même avec une documentation claire, les choses ne fonctionnent parfois pas comme prévu. Voici des correctifs pour les problèmes les plus courants :

Couleurs ne s'appliquant pas : Assurez-vous de configurer les couleurs avant d'appeler Zendesk.initialize(). Le SDK lit les paramètres de thème au moment de l'initialisation.

Le mode sombre semble incorrect : Vérifiez que vous avez défini userLightColors et userDarkColors. Si vous n'en définissez qu'un, le SDK utilise les valeurs par défaut pour l'autre.

Les modifications CSS ne s'affichent pas : Sur iOS, assurez-vous que votre fichier CSS est inclus dans la cible du bundle d'application. Sur Android, vérifiez qu'il se trouve dans le dossier assets, pas dans res.

Problèmes d'héritage de thème : Si vous étendez les thèmes SDK, utilisez les noms de thème parent exacts : ZendeskSdkTheme.Light, ZendeskSdkTheme.Dark ou ZendeskSdkTheme.Light.DarkActionBar.

Quand reconstruire ou redémarrer : Les modifications de code (couleurs, thèmes) nécessitent une reconstruction. Les modifications de fichier CSS nécessitent souvent simplement un redémarrage de l'application. En cas de doute, reconstruisez.