{
"title": "Como personalizar o tema do SDK móvel do Zendesk: Guia completo para 2026",
"slug": "zendesk-mobile-sdk-theming",
"locale": "pt",
"date": "2026-02-26",
"updated": "2026-02-26",
"template": "default",
"excerpt": "Um guia abrangente para personalizar a aparência do SDK móvel do Zendesk no Android e iOS, incluindo exemplos de código e dicas de implementação.",
"categories": [
"Zendesk",
"Guides"
],
"tags": [
"Zendesk",
"Mobile SDK",
"Theming",
"Android",
"iOS",
"UI Customization"
],
"readTime": 7,
"author": 16,
"reviewer": 14,
"seo": {
"title": "Como personalizar o tema do SDK móvel do Zendesk: Guia completo para 2026",
"description": "Um guia abrangente para personalizar a aparência do SDK móvel do Zendesk no Android e iOS, incluindo exemplos de código e dicas de implementação.",
"image": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-c754bea7-877c-48ef-9852-09e3b800208a"
},
"coverImage": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-c754bea7-877c-48ef-9852-09e3b800208a",
"coverImageAlt": "Imagem do banner para Como personalizar o tema do SDK móvel do Zendesk: Guia completo para 2026",
"coverImageWidth": 1920,
"coverImageHeight": 1080,
"faqs": {
"heading": "Perguntas Frequentes",
"type": "blog",
"answerType": "html",
"faqs": [
{
"question": "Posso usar o tema do SDK móvel do Zendesk sem escrever código?",
"answer": "Parcialmente. Você pode definir cores básicas (primária, mensagem, ação) no Admin Center do Zendesk sem código. Mas para personalização completa, incluindo cores de texto, suporte ao modo escuro e estilo da central de ajuda, você precisará usar a API UserColors ou CSS."
},
{
"question": "O tema do SDK móvel do Zendesk funciona da mesma forma no Android e no iOS?",
"answer": "Não. O Android usa a API UserColors com mais de 15 propriedades personalizáveis. O iOS usa uma abordagem mais simples com apenas uma cor primária e CSS para artigos da central de ajuda. Você precisará implementar temas específicos da plataforma para cada um."
},
{
"question": "Posso mudar do tema Material Design para a API UserColors?",
"answer": "Sim, mas requer a migração do SDK de suporte clássico para o SDK do Web Widget. Isso envolve a atualização de dependências, a alteração do código de inicialização e testes completos. Planeje uma migração adequada em vez de uma mudança rápida."
},
{
"question": "Os temas personalizados afetarão o desempenho?",
"answer": "Não. O tema acontece na camada da interface do usuário e não afeta o desempenho do SDK. No entanto, o CSS complexo em artigos da central de ajuda pode aumentar ligeiramente o tempo de renderização de artigos muito grandes."
},
{
"question": "O que acontece se eu não personalizar o tema?",
"answer": "O SDK usa cores padrão que podem não corresponder à sua marca. Ele também extrai cores do Admin Center, se disponível. Para uma experiência de marca coesa, a personalização de tema é recomendada."
},
{
"question": "Posso usar temas de terceiros com o SDK móvel?",
"answer": "Temas de terceiros, como os da Premium Plus ou Diziana, personalizam principalmente a central de ajuda da web. O tema do SDK móvel é separado e requer as abordagens abordadas neste guia."
},
{
"question": "Existe uma alternativa ao tema do SDK móvel do Zendesk para suporte de marca?",
"answer": "Sim. O eesel AI fornece experiências de suporte de marca sem tema de SDK. Ele aprende a voz da sua marca a partir do conteúdo existente e funciona com sua central de ajuda atual, eliminando a necessidade de desenvolvimento personalizado."
}
],
"supportLink": null
}
}
---
Quando os clientes abrem seu aplicativo e precisam de ajuda, a experiência de suporte deve parecer uma extensão natural da sua marca. O [tema do SDK móvel do Zendesk](https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/ui_customization/) permite que você personalize cores, fontes e elementos de interface do usuário para que a interface de suporte corresponda à aparência do seu aplicativo.
Mas aqui está a questão: o tema do SDK requer recursos de desenvolvimento e manutenção contínua. Se você está procurando uma maneira mais simples de oferecer experiências de suporte de marca, o [eesel AI se integra ao Zendesk](https://www.eesel.ai/integration/zendesk-ai) e lida com a personalização sem tocar no código. Mais sobre isso mais tarde.
Veja como aplicar temas ao SDK móvel do Zendesk para Android e iOS.
## O que você vai precisar
Antes de começar a personalizar, certifique-se de que você tem:
- Uma conta do Zendesk com acesso ao SDK móvel
- Android Studio ou Xcode instalado
- Familiaridade básica com Kotlin/Java (para Android) ou Swift/Objective-C (para iOS)
- Acesso aos recursos de tema do seu aplicativo e AndroidManifest.xml (Android) ou Info.plist (iOS)
## Passo 1: Escolha sua abordagem de tema
O Zendesk oferece três maneiras de personalizar a aparência do SDK móvel. Escolha aquela que se adapta à sua situação:
**Opção A: API UserColors (recomendada para novos projetos)**
A [API UserColors](https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/ui_customization/) é a abordagem moderna para o SDK do Web Widget. Ela oferece controle granular sobre mais de 15 propriedades de cores e suporta os modos claro e escuro prontos para uso. Use isso se você estiver começando do zero ou puder migrar para o SDK mais recente.
**Opção B: Temas do Material Design (para implementações legadas)**
Se você estiver usando o SDK de suporte clássico, você trabalhará com [temas do Material Design](https://developer.zendesk.com/documentation/classic-web-widget-sdks/support-sdk/android/customizing_the_look/). Essa abordagem estende `Theme.MaterialComponents` e usa atributos como `colorPrimary` e `colorAccent`. Mantenha isso se você estiver mantendo uma implementação mais antiga.
**Opção C: Configuração do Admin Center (opção sem código)**
Para alterações básicas de cores sem tocar no código, você pode definir as cores primária, de mensagem e de ação no Admin Center do Zendesk. O SDK usará esses valores como padrões se você não os substituir programaticamente. Isso funciona para branding simples, mas carece da flexibilidade das abordagens de API.
## Passo 2: Implemente a API UserColors no Android
A API UserColors permite que você defina cores personalizadas para componentes de interface do usuário específicos. Veja como implementá-la.
Primeiro, crie objetos UserColors para os modos claro e escuro:
```kotlin
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
)
Em seguida, inicialize o SDK com suas cores personalizadas:
val factory = DefaultMessagingFactory(
userLightColors = userLightColors,
userDarkColors = userDarkColors
)
Zendesk.initialize(
context = this,
channelKey = "your_channel_key",
messagingFactory = factory
)
Para desenvolvedores Java, o padrão é semelhante:
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);
As propriedades principais para entender:
- primary: Cor de fundo para cabeçalhos nas telas de conversa e lista de conversas
- onPrimary: Cor do texto e do ícone em fundos primários
- message: Fundo para mensagens do usuário final
- businessMessage: Fundo para mensagens de agente/empresa
- action: Fundo para botões como "nova conversa" e botões de formulário
- background: Cor de fundo para telas de conversa
- onBackground: Cor para carimbos de data/hora, nomes e status da mensagem (com 65% de opacidade)
Passo 3: Personalize a aparência do SDK do iOS
O tema do iOS é mais direto do que o Android. Você trabalha principalmente com o objeto CommonTheme para definir a cor primária da sua marca. Consulte a documentação do SDK do iOS para obter detalhes completos.
Em Swift:
import CommonUISDK
// Defina a cor primária da sua marca
CommonTheme.currentTheme.primaryColor = UIColor(red: 0.12, green: 0.53, blue: 0.90, alpha: 1.0)
Em Objective-C:
#import <CommonUISDK/CommonUISDK.h>
// Defina a cor primária da sua marca
[ZDKCommonTheme currentTheme].primaryColor = [UIColor colorWithRed:0.12 green:0.53 blue:0.90 alpha:1.0];
Essa única alteração de cor se aplica em toda a interface do usuário do SDK como uma cor de matiz, afetando barras de navegação, botões e elementos interativos.
Para o estilo do artigo da central de ajuda, crie um arquivo chamado help_center_article_style.css na raiz do seu projeto e adicione-o ao seu projeto Xcode. O SDK usará automaticamente seu CSS personalizado em vez dos estilos padrão.
Passo 4: Estilize artigos da central de ajuda
Tanto o Android quanto o iOS suportam a personalização de CSS para artigos da central de ajuda. É aqui que você pode realmente fazer com que o conteúdo pareça parte do seu aplicativo.
Crie um arquivo chamado help_center_article_style.css com seus estilos personalizados. Aqui está um modelo 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 arquivo no seu diretório assets. Para iOS, adicione-o ao seu pacote de projeto. O SDK detecta e aplica automaticamente seu CSS personalizado.
Passo 5: Teste e valide seu tema
Antes de enviar para produção, teste seu tema completamente:
- Variedade de dispositivos: Teste em diferentes tamanhos de tela (telefone, tablet, dobrável)
- Modos claro e escuro: Verifique se as cores funcionam em ambos os temas
- Acessibilidade: Verifique se as taxas de contraste atendem às diretrizes WCAG (4,5:1 para texto normal, 3:1 para texto grande)
- Casos extremos: Teste com títulos de artigos longos, vários anexos e estados de erro
Problemas comuns a serem observados:
- Cores não sendo aplicadas: Certifique-se de que você está definindo as cores antes de inicializar o SDK
- Modo escuro não funcionando: Verifique se você tem objetos de cores claras e escuras definidos
- CSS não carregando: Verifique se seu arquivo CSS está no local correto e incluído na sua compilação
Alternativa: Temas Zendesk de terceiros
Se o tema personalizado do SDK parecer exagerado, os temas pré-construídos de mercados como Premium Plus, Diziana ou Grow-Shine oferecem outro caminho. Estes variam de US$ 30 a US$ 389 e fornecem designs profissionais sem trabalho de desenvolvimento.
A desvantagem? Temas de terceiros personalizam principalmente a central de ajuda baseada na web, não a interface do usuário do SDK móvel. Você ainda precisará do tema do SDK para a experiência de suporte no aplicativo. Eles são mais adequados para equipes que desejam uma central de ajuda refinada sem construir um tema personalizado do zero.
Personalização de suporte mais simples com eesel AI
Aqui está a realidade: o tema do SDK leva tempo, requer manutenção contínua e precisa do envolvimento do desenvolvedor para cada atualização da marca. Se você deseja suporte de marca sem a complexidade, o eesel AI oferece uma abordagem diferente.
Em vez de aplicar temas a um SDK, o eesel AI funciona em conjunto com sua central de ajuda existente (incluindo Zendesk) para fornecer suporte com tecnologia de IA. Ele aprende a voz da sua marca a partir de tickets anteriores e artigos da central de ajuda, para que as respostas correspondam naturalmente ao seu tom. Nenhum código necessário, nenhum SDK para aplicar temas, nenhuma manutenção quando você reformular a marca.
O preço também é direto: você paga pelas interações, não pelos assentos, e pode começar com a IA redigindo respostas antes de deixá-la lidar com as conversas de forma autônoma. Para equipes que desejam ótimas experiências de suporte sem a sobrecarga de desenvolvimento, vale a pena considerar junto com o tema tradicional do SDK.
Solução de problemas comuns de tema
Mesmo com documentação clara, as coisas às vezes não funcionam como esperado. Aqui estão as correções para os problemas mais comuns:
Cores não sendo aplicadas: Certifique-se de que você está configurando as cores antes de chamar Zendesk.initialize(). O SDK lê as configurações de tema no momento da inicialização.
Modo escuro parece errado: Verifique se você definiu userLightColors e userDarkColors. Se você definir apenas um, o SDK usa os padrões para o outro.
Alterações de CSS não aparecendo: No iOS, certifique-se de que seu arquivo CSS esteja incluído no destino do pacote do aplicativo. No Android, verifique se ele está na pasta assets, não em res.
Problemas de herança de tema: Se estiver estendendo temas do SDK, use os nomes de tema pai exatos: ZendeskSdkTheme.Light, ZendeskSdkTheme.Dark ou ZendeskSdkTheme.Light.DarkActionBar.
Quando reconstruir vs reiniciar: Alterações de código (cores, temas) exigem uma reconstrução. Alterações de arquivo CSS geralmente precisam apenas de uma reinicialização do aplicativo. Em caso de dúvida, reconstrua.
Compartilhe esta postagem
Article by
