Personalização da Marca do SDK Didit: Guia Completo

No panorama competitivo atual, manter a consistência da marca é crucial, mesmo dentro de integrações de terceiros. O SDK Didit oferece extensas opções de personalização do SDK, permitindo-lhe fornecer uma experiência de verificação de identidade com a sua marca, perfeita para os seus utilizadores. Este guia fornece uma visão geral abrangente da personalização da marca do SDK Didit, abrangendo sobreposições CSS, temáticas e melhores práticas para garantir uma integração totalmente com a sua marca.

Conclusão Principal 1 O SDK Didit foi concebido para uma personalização profunda. Pode alterar completamente a aparência para corresponder às diretrizes da sua marca.

Conclusão Principal 2 A personalização da marca é alcançada principalmente através de sobreposições CSS, fornecendo controlo granular sobre os elementos visuais.

Conclusão Principal 3 Considere usar uma solução CSS-in-JS para gerir temas complexos e manter a consistência em toda a sua aplicação.

Conclusão Principal 4 Testes rigorosos são essenciais após a aplicação de personalizações para garantir uma experiência de utilizador suave e consistente.

Compreender a Arquitetura do SDK Didit para Personalização

O SDK Didit utiliza uma arquitetura modular, fornecendo uma base flexível para a personalização da marca do SDK. A lógica principal de verificação é separada dos componentes da IU, permitindo-lhe modificar a apresentação visual sem alterar a funcionalidade subjacente. A IU do SDK é construída utilizando tecnologias web padrão (HTML, CSS, JavaScript), tornando mais fácil a personalização utilizando ferramentas familiares. O principal método de personalização da marca do SDK é através de sobreposições CSS, permitindo-lhe segmentar elementos específicos e aplicar os seus próprios estilos.

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

A forma mais eficaz de personalizar a aparência do SDK Didit é através de sobreposições CSS. O SDK fornece um conjunto de classes CSS predefinidas que pode segmentar com os seus próprios estilos. Eis uma descrição de como utilizar as sobreposições CSS:

• Estilos Globais: Utilize uma folha de estilos global para definir estilos base para elementos comuns como fontes, cores e estilos de botões.
• Sobreposições Específicas: Segmente componentes específicos com estilos mais granulares. Por exemplo, para alterar a cor do botão “Verificar”, pode utilizar um seletor como .didit-button--primary.
• Especificidade: Tenha cuidado com a especificidade do CSS. Utilize seletores mais específicos se os seus estilos não estiverem a ser aplicados.

Exemplo:

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

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

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

Tematização Avançada com CSS-in-JS

Para cenários de tematização mais complexos, considere usar uma solução CSS-in-JS como Styled Components ou Emotion. Estas bibliotecas permitem-lhe definir estilos utilizando JavaScript, tornando mais fácil gerir temas e alternar entre eles dinamicamente. O CSS-in-JS também pode ajudar com o escopo dos 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;
`;

Personalizar o Fluxo e os Componentes do SDK

Para além da estilização visual, também pode personalizar certos aspetos do fluxo do SDK. Por exemplo, pode:

• Mensagens de Erro Personalizadas: Substitua as mensagens de erro predefinidas pelas suas próprias mensagens com a sua marca.
• Indicadores de Carregamento Personalizados: Utilize as suas próprias animações de carregamento em vez das predefinidas.
• Renderização de Componentes (com acesso à API): Para uma personalização avançada, utilize a API Didit para controlar a renderização de componentes específicos, permitindo-lhe construir uma IU totalmente personalizada em torno da lógica principal de verificação.

Como a Didit Ajuda com a Personalização da Marca

A Didit simplifica o processo de personalização da marca do SDK Didit fornecendo:

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

Pronto para Começar?

Transforme o SDK Didit numa extensão perfeita da sua marca! Aqui estão alguns recursos para o ajudar a começar:

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