Personalização da UI Sem Complicações: SDK JavaScript da Didit e Tailwind CSS (PT-BR)

Consistência da Marca é FundamentalManter uma experiência de marca unificada em todos os pontos de contato, incluindo a verificação de identidade, constrói a confiança e a lealdade do usuário. As opções de integração flexíveis da Didit tornam isso possível.

SDK JavaScript para ControleO SDK JavaScript da Didit oferece controle programático total sobre o fluxo de verificação, permitindo personalização profunda e integração perfeita em frameworks web modernos como React, Vue e Angular.

Tailwind CSS para Estilização RápidaAproveite a abordagem utility-first do Tailwind CSS para estilizar de forma rápida e eficiente os componentes da UI da Didit, garantindo uma correspondência perfeita com seu sistema de design existente sem substituições complexas.

Solução White-Label da DiditAlém da estilização direta, a Didit oferece recursos abrangentes de white-label dentro de seu Console de Negócios, permitindo uma extensa personalização da marca, incluindo domínios personalizados, cores e logotipos, aplicados sem esforço aos seus fluxos de trabalho.

A Importância de uma Experiência de Usuário Sem Interrupções na Verificação de Identidade

No cenário digital atual, a experiência do usuário (UX) é primordial. Quando os usuários interagem com seu aplicativo, cada ponto de contato contribui para a percepção geral da sua marca. Isso inclui processos críticos como a verificação de identidade. Um fluxo de verificação desajeitado e fora da marca pode interromper a jornada do usuário, levar ao abandono e corroer a confiança. Por outro lado, um processo de verificação perfeitamente integrado e com a marca reforça o profissionalismo e a confiança do usuário.

Muitas soluções de verificação de identidade oferecem UIs genéricas e padronizadas que entram em conflito com as diretrizes de marca cuidadosamente elaboradas de uma empresa. Isso força as empresas a escolher entre segurança robusta e uma experiência de usuário consistente. A Didit entende esse desafio e fornece ferramentas poderosas, como seu SDK JavaScript e amplas opções de white-label, para garantir que você não precise se comprometer. Ao permitir uma personalização profunda, a Didit garante que seu processo de verificação de identidade pareça uma parte integrante de sua aplicação, e não uma interrupção externa e desagradável.

Integrando o SDK JavaScript da Didit para Máxima Flexibilidade

O SDK JavaScript da Didit foi projetado para desenvolvedores que buscam controle e flexibilidade máximos. É o método de integração recomendado para aplicações de produção devido aos seus recursos abrangentes, incluindo gerenciamento de sessão, callbacks de eventos e suporte para frameworks populares como React, Vue, Angular, NextJS, Nuxt e Svelte, bem como Vanilla JS. Ao contrário de embeds de iframe ou redirecionamentos mais simples, o SDK JavaScript permite que você gerencie programaticamente o fluxo de verificação e lide com eventos diretamente dentro de sua aplicação.

A integração básica é simples:

import DiditSdk from '@didit-protocol/sdk-web';

DiditSdk.init({
  session_token: 'YOUR_BACKEND_GENERATED_TOKEN',
  onSuccess: (session) => {
    console.log('Verification completed:', session.sessionId, session.status);
    // Lida com a verificação bem-sucedida, por exemplo, redireciona o usuário, atualiza a UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Lida com os erros adequadamente
  },
  onCancel: () => {
    console.log('Usuário cancelou a verificação');
    // Lida com o cancelamento do usuário
  }
});

Este SDK permite controlar se a verificação aparece como um modal ou inline, dando a você controle granular sobre a interação do usuário. Ao aproveitar este SDK, você ganha a capacidade de envolver os componentes da Didit dentro da estrutura de sua própria aplicação, tornando-os passíveis de estilização personalizada.

Estilizando Componentes Didit com Tailwind CSS

O Tailwind CSS tornou-se um favorito entre os desenvolvedores por sua abordagem utility-first, permitindo o desenvolvimento rápido de UI e designs altamente consistentes. Ao integrar o SDK JavaScript da Didit, você pode aplicar seus estilos Tailwind CSS aos elementos do contêiner que hospedam a UI da Didit, garantindo uma aparência e sensação coesas. Embora os componentes principais da Didit sejam projetados para serem robustos e funcionais, sua apresentação pode ser influenciada pela estrutura DOM circundante e pelos estilos globais de sua aplicação.

Por exemplo, se o SDK da Didit renderiza um modal ou um componente inline dentro de uma div específica, você pode aplicar classes Tailwind a essa div para controlar seu tamanho, espaçamento e até mesmo alguns aspectos de sua aparência. Para uma personalização mais profunda dos elementos internos do fluxo de verificação (como botões, campos de entrada e texto), a Didit oferece amplos recursos de white-labeling por meio de seu Business Console, o que geralmente é uma abordagem mais eficaz e sustentável do que tentar substituir estilos diretamente.

No entanto, para elementos wrapper ou UI personalizada que você constrói em torno do SDK da Didit, o Tailwind CSS é ideal. Imagine que você deseja apresentar o fluxo de verificação dentro de um componente de cartão específico de sua aplicação:

<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center">Verifique sua Identidade</h2>
    <!-- O SDK Didit renderizará sua UI aqui -->
    <div id="didit-verification-container"></div>
  </div>
</div>

Neste exemplo, toda a estilização externa (fundo, aparência do cartão, estilos de texto) é tratada pelo Tailwind. O SDK da Didit seria então inicializado para renderizar dentro de #didit-verification-container, herdando alguns estilos contextuais e garantindo que seja visualmente consistente com a aplicação circundante. Para os elementos dentro do fluxo da Didit, os recursos de white-label da Didit fornecem a personalização definitiva.

Solução Abrangente de White-Labeling da Didit

Embora a manipulação direta de CSS possa lidar com alguns aspectos, o método primário e mais poderoso da Didit para personalização da UI é seu recurso de white-labeling integrado, acessível via Didit Business Console. Isso vai muito além do que você poderia conseguir com simples substituições de CSS, fornecendo uma solução robusta para uma experiência verdadeiramente de marca. Com os recursos de white-label da Didit, você pode:

• Personalizar Cores: Controle botões, texto, painéis e planos de fundo para combinar com a paleta de sua marca.
• Definir Tipografia: Aplique as fontes de sua marca para uma aparência consistente.
• Fazer Upload de Logotipos: Integre seus logotipos quadrados e retangulares diretamente no fluxo de verificação.
• Ajustar Layout: Ajuste os raios das bordas para painéis e botões.
• Configurar Tela de Login: Decida se deseja mostrar ou pular a tela de login inicial.
• Usar Domínios Personalizados: Hospede o fluxo de verificação em seu próprio domínio (por exemplo, verificar.suaempresa.com) em vez de verificar.didit.me, garantindo uma jornada de usuário completamente transparente sem qualquer marca externa.

Este nível de personalização é aplicado diretamente em seus fluxos de trabalho da Didit, o que significa que, uma vez configurado no Business Console, todas as sessões de verificação iniciadas através desse fluxo de trabalho refletirão automaticamente sua marca. Isso é particularmente eficaz para produtos Didit como Verificação de ID, Liveness Passiva e Ativa e Estimativa de Idade, garantindo que cada etapa da interação do usuário com esses recursos se alinhe perfeitamente com sua marca.

Como a Didit Ajuda

A Didit se destaca como a plataforma de identidade nativa de IA e focada no desenvolvedor que capacita as empresas a personalizar totalmente sua experiência de verificação de identidade. Com nossa arquitetura modular, você obtém verificações de identidade plug-and-play que se integram perfeitamente aos seus sistemas existentes. Nosso SDK JavaScript oferece o controle programático necessário para integração profunda com frameworks web modernos, enquanto nossos abrangentes recursos de white-label no Business Console permitem uma extensa personalização da marca – de cores e fontes a domínios personalizados. Isso garante uma experiência de usuário consistente e confiável em todos os produtos Didit, incluindo nossa robusta Verificação de ID (OCR, MRZ, códigos de barras), detecção de Liveness Passiva e Ativa para prevenção de fraudes e Estimativa de Idade que preserva a privacidade. A Didit oferece KYC Core Gratuito e um modelo de pagamento por verificação bem-sucedida sem taxas de instalação, tornando a verificação de identidade avançada acessível e eficiente.

Pronto para Começar?

Pronto para ver a Didit em ação? Obtenha uma demonstração gratuita hoje.

Comece a verificar identidades gratuitamente com o nível gratuito da Didit.