Cómo personalizar el tema del SDK móvil de Zendesk: Guía completa para 2026

Cuando los clientes abren su aplicación y necesitan ayuda, la experiencia de soporte debe sentirse como una extensión natural de su marca. La tematización del SDK móvil de Zendesk le permite personalizar los colores, las fuentes y los elementos de la interfaz de usuario para que la interfaz de soporte coincida con la apariencia de su aplicación.

Pero aquí está la cuestión: la tematización del SDK requiere recursos de desarrollo y mantenimiento continuo. Si está buscando una forma más sencilla de ofrecer experiencias de soporte de marca, eesel AI se integra con Zendesk y se encarga de la personalización sin tocar el código. Más sobre eso más adelante.

Aquí se explica cómo tematizar el SDK móvil de Zendesk para Android e iOS.

Lo que necesitará

Antes de comenzar a personalizar, asegúrese de tener:

• Una cuenta de Zendesk con acceso al SDK móvil
• Android Studio o Xcode instalado
• Familiaridad básica con Kotlin/Java (para Android) o Swift/Objective-C (para iOS)
• Acceso a los recursos de tema de su aplicación y AndroidManifest.xml (Android) o Info.plist (iOS)

Paso 1: Elija su enfoque de tematización

Zendesk ofrece tres formas de personalizar la apariencia del SDK móvil. Elija el que se adapte a su situación:

Opción A: API UserColors (recomendada para proyectos nuevos)

La API UserColors es el enfoque moderno para el SDK de Web Widget. Le brinda un control granular sobre más de 15 propiedades de color y admite los modos claro y oscuro de forma predeterminada. Use esto si está comenzando de cero o puede migrar al SDK más nuevo.

Opción B: Temas de Material Design (para implementaciones heredadas)

Si está utilizando el SDK de soporte clásico, trabajará con temas de Material Design. Este enfoque extiende Theme.MaterialComponents y usa atributos como colorPrimary y colorAccent. Quédese con esto si está manteniendo una implementación anterior.

Opción C: Configuración del Centro de administración (opción sin código)

Para cambios de color básicos sin tocar el código, puede establecer los colores primario, de mensaje y de acción en el Centro de administración de Zendesk. El SDK los usará como valores predeterminados si no los anula mediante programación. Esto funciona para la marca simple, pero carece de la flexibilidad de los enfoques de la API.

Paso 2: Implementar la API UserColors en Android

La API UserColors le permite definir colores personalizados para componentes de la interfaz de usuario específicos. Aquí se explica cómo implementarlo.

Primero, cree objetos UserColors para los modos claro y oscuro:

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
)

Luego, inicialice el SDK con sus colores personalizados:

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

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

Para los desarrolladores de Java, el patrón es similar:

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

Las propiedades clave para comprender:

• primary: Color de fondo para los encabezados en las pantallas de conversación y lista de conversaciones
• onPrimary: Color del texto y del icono en los fondos primarios
• message: Fondo para los mensajes del usuario final
• businessMessage: Fondo para los mensajes del agente/empresa
• action: Fondo para botones como "nueva conversación" y botones de formulario
• background: Color de fondo para las pantallas de conversación
• onBackground: Color para marcas de tiempo, nombres y estado del mensaje (con un 65% de opacidad)

Paso 3: Personalizar la apariencia del SDK de iOS

La tematización de iOS es más sencilla que la de Android. Principalmente, trabaja con el objeto CommonTheme para establecer el color primario de su marca. Consulte la documentación del SDK de iOS para obtener detalles completos.

En Swift:

import CommonUISDK

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

En 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];

Este único cambio de color se aplica en toda la interfaz de usuario del SDK como un color de tinte, que afecta a las barras de navegación, los botones y los elementos interactivos.

Para el estilo de los artículos del centro de ayuda, cree un archivo llamado help_center_article_style.css en la raíz de su proyecto y agréguelo a su proyecto Xcode. El SDK usará automáticamente su CSS personalizado en lugar de los estilos predeterminados.

Paso 4: Estilizar los artículos del centro de ayuda

Tanto Android como iOS admiten la personalización de CSS para los artículos del centro de ayuda. Aquí es donde realmente puede hacer que el contenido se sienta como parte de su aplicación.

Cree un archivo llamado help_center_article_style.css con sus estilos personalizados. Aquí hay una plantilla inicial:

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

Para Android, coloque este archivo en su directorio assets. Para iOS, agréguelo a su paquete de proyecto. El SDK detecta y aplica automáticamente su CSS personalizado.

Paso 5: Pruebe y valide su tema

Antes de enviar a producción, pruebe su tema a fondo:

• Variedad de dispositivos: Pruebe en diferentes tamaños de pantalla (teléfono, tableta, plegable)
• Modos claro y oscuro: Verifique que los colores funcionen en ambos temas
• Accesibilidad: Verifique que las relaciones de contraste cumplan con las pautas de WCAG (4.5:1 para texto normal, 3:1 para texto grande)
• Casos extremos: Pruebe con títulos de artículos largos, múltiples archivos adjuntos y estados de error

Problemas comunes a tener en cuenta:

• Colores que no se aplican: Asegúrese de estar configurando los colores antes de inicializar el SDK
• El modo oscuro no funciona: Verifique que tenga definidos objetos de color claro y oscuro
• CSS no se carga: Verifique que su archivo CSS esté en la ubicación correcta e incluido en su compilación

Alternativa: Temas de Zendesk de terceros

Si la tematización personalizada del SDK le parece exagerada, los temas preconstruidos de mercados como Premium Plus, Diziana o Grow-Shine ofrecen otro camino. Estos varían de $30 a $389 y brindan diseños profesionales sin trabajo de desarrollo.

¿La trampa? Los temas de terceros personalizan principalmente el centro de ayuda basado en la web, no la interfaz de usuario del SDK móvil. Aún necesitará la tematización del SDK para la experiencia de soporte en la aplicación. Son más adecuados para equipos que desean un centro de ayuda pulido sin construir un tema personalizado desde cero.

Personalización de soporte más sencilla con eesel AI

Aquí está la realidad: la tematización del SDK lleva tiempo, requiere mantenimiento continuo y necesita la participación del desarrollador para cada actualización de marca. Si desea soporte de marca sin la complejidad, eesel AI ofrece un enfoque diferente.

En lugar de tematizar un SDK, eesel AI funciona junto con su mesa de ayuda existente (incluido Zendesk) para brindar soporte impulsado por IA. Aprende la voz de su marca a partir de tickets anteriores y artículos del centro de ayuda, por lo que las respuestas coinciden naturalmente con su tono. No se requiere código, no hay SDK para tematizar, no hay mantenimiento cuando cambia la marca.

El precio también es sencillo: paga por las interacciones, no por los puestos, y puede comenzar con la IA redactando respuestas antes de permitirle manejar las conversaciones de forma autónoma. Para los equipos que desean excelentes experiencias de soporte sin la sobrecarga de desarrollo, vale la pena considerarlo junto con la tematización tradicional del SDK.

Solución de problemas comunes de tematización

Incluso con una documentación clara, a veces las cosas no funcionan como se espera. Aquí hay soluciones para los problemas más comunes:

Colores que no se aplican: Asegúrese de estar configurando los colores antes de llamar a Zendesk.initialize(). El SDK lee la configuración del tema en el momento de la inicialización.

El modo oscuro se ve mal: Verifique que haya definido tanto userLightColors como userDarkColors. Si solo establece uno, el SDK usa los valores predeterminados para el otro.

Los cambios de CSS no se muestran: En iOS, asegúrese de que su archivo CSS esté incluido en el destino del paquete de la aplicación. En Android, verifique que esté en la carpeta assets, no en res.

Problemas de herencia de temas: Si extiende los temas del SDK, use los nombres de tema principal exactos: ZendeskSdkTheme.Light, ZendeskSdkTheme.Dark o ZendeskSdkTheme.Light.DarkActionBar.

Cuándo reconstruir vs reiniciar: Los cambios de código (colores, temas) requieren una reconstrucción. Los cambios en los archivos CSS a menudo solo necesitan un reinicio de la aplicación. En caso de duda, reconstruya.