Personalização Completa do Didit SDK: Guia de Branding

No cenário competitivo atual, manter a consistência da marca é crucial, mesmo dentro de integrações de terceiros. O Didit SDK oferece opções extensivas de personalização do SDK, permitindo que você ofereça uma experiência de verificação de identidade com a sua marca de forma integrada aos seus usuários. Este guia fornece uma visão geral completa da personalização do Didit SDK, cobrindo sobreposições CSS, temas e melhores práticas para garantir uma integração totalmente personalizada.

Ponto Chave 1 O Didit SDK foi projetado para uma personalização profunda. Você pode alterar completamente a aparência para corresponder às diretrizes da sua marca.

Ponto Chave 2 A personalização é alcançada principalmente através de sobreposições CSS, fornecendo controle granular sobre os elementos visuais.

Ponto Chave 3 Considere usar uma solução CSS-in-JS para gerenciar temas complexos e manter a consistência em todo o seu aplicativo.

Ponto Chave 4 Testes completos são essenciais após a aplicação de personalizações para garantir uma experiência de usuário suave e consistente.

Entendendo a Arquitetura do Didit SDK para Personalização

O Didit SDK utiliza uma arquitetura modular, fornecendo uma base flexível para o branding do SDK. A lógica central de verificação é separada dos componentes da interface do usuário, permitindo que você modifique a apresentação visual sem alterar a funcionalidade subjacente. A interface do usuário do SDK é construída usando tecnologias web padrão (HTML, CSS, JavaScript), tornando-o fácil de personalizar usando ferramentas familiares. O principal método para a personalização do Didit SDK é através de sobreposições CSS, permitindo que você direcione elementos específicos e aplique seus próprios estilos.

Sobreposições CSS: O Núcleo da Personalização

A maneira mais eficaz de personalizar a aparência do Didit SDK é através de sobreposições CSS. O SDK fornece um conjunto de classes CSS predefinidas que você pode direcionar com seus próprios estilos. Aqui está um resumo de como usar sobreposições CSS:

• Estilos Globais: Use uma folha de estilo global para definir estilos básicos para elementos comuns, como fontes, cores e estilos de botão.
• Sobreposições Específicas: Direcione componentes específicos com estilos mais granulares. Por exemplo, para alterar a cor do botão “Verificar”, você pode usar um seletor como .didit-button--primary.
• Especificidade: Tenha cuidado com a especificidade do CSS. Use seletores mais específicos se seus estilos não estiverem sendo aplicados.

Exemplo:

/* Altere a cor do botão primário */
.didit-button--primary {
  background-color: #SUA_COR_DA_MARCA !important;
  color: white !important;
}

/* Altere a cor da borda do campo de entrada */
.didit-input input {
  border-color: #SUA_COR_DA_MARCA !important;
}

Importante: A flag !important pode ser necessária para substituir os estilos padrão do SDK. No entanto, use-o com cautela, pois pode tornar seu CSS mais difícil de manter. Considere um seletor mais específico como uma primeira abordagem.

Temas Avançados com CSS-in-JS

Para cenários de temas mais complexos, considere usar uma solução CSS-in-JS como Styled Components ou Emotion. Essas bibliotecas permitem que você defina estilos usando JavaScript, tornando mais fácil gerenciar temas e alternar entre eles dinamicamente. CSS-in-JS também pode ajudar no escopo de componentes, evitando conflitos de estilo.

Exemplo (Styled Components):

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

Personalizando o Fluxo e os Componentes do SDK

Além da estilização visual, você também pode personalizar certos aspectos do fluxo do SDK. Por exemplo, você pode:

• Mensagens de Erro Personalizadas: Substitua as mensagens de erro padrão pelas suas próprias mensagens com a sua marca.
• Indicadores de Carregamento Personalizados: Use suas próprias animações de carregamento em vez das animações padrão.
• Renderização de Componentes (com acesso à API): Para personalização avançada, use a API do Didit para controlar a renderização de componentes específicos, permitindo que você crie uma interface do usuário totalmente personalizada em torno da lógica central de verificação.

Como o Didit Ajuda com a Personalização

O Didit simplifica o processo de personalização do Didit SDK fornecendo:

• Documentação Detalhada: Documentação abrangente descrevendo todas as classes CSS disponíveis e opções de personalização.
• Temas de Exemplo: Temas pré-construídos que você pode usar como ponto de partida para suas próprias personalizações.
• Suporte Dedicado: Acesso à nossa equipe de suporte para ajudar com quaisquer desafios de personalização.
• Arquitetura Flexível: O design modular permite personalização profunda sem afetar a funcionalidade principal. A abordagem do Didit prioriza o controle do desenvolvedor.

Pronto para Começar?

Transforme o Didit SDK em uma extensão perfeita da sua marca! Aqui estão alguns recursos para ajudá-lo a começar:

• Documentação do Didit: Explore a referência completa da API e os guias de personalização.
• Centro de Demonstração do Didit: Experimente o SDK e teste diferentes opções de personalização.
• Preços do Didit: Saiba mais sobre nossos planos de preços flexíveis.