Personalização de UI Integrada: SDK JavaScript da Didit e Tailwind CSS (PT-PT)

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

SDK JavaScript para ControloO SDK JavaScript da Didit oferece controlo programático total sobre o fluxo de verificação, permitindo uma 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 rápida e eficientemente os componentes da UI da Didit, garantindo uma correspondência perfeita com o seu sistema de design existente sem substituições complexas.

Solução White-Label da DiditPara além da estilização direta, a Didit oferece capacidades abrangentes de white-label na sua Consola de Negócios, permitindo uma personalização extensiva da marca, incluindo domínios personalizados, cores e logótipos, aplicados sem esforço aos seus fluxos de trabalho.

A Importância de uma Experiência de Utilizador Sem Descontinuidades na Verificação de Identidade

No panorama digital atual, a experiência do utilizador (UX) é primordial. Quando os utilizadores interagem com a sua aplicação, cada ponto de contacto contribui para a sua perceçã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 utilizador, levar ao abandono e corroer a confiança. Por outro lado, um processo de verificação perfeitamente integrado e com uma marca bem definida melhora o profissionalismo e reforça a confiança do utilizador.

Muitas soluções de verificação de identidade oferecem UIs genéricas e "one-size-fits-all" que colidem 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 utilizador consistente. A Didit compreende este desafio e fornece ferramentas poderosas, como o seu SDK JavaScript e opções abrangentes de white-label, para garantir que não tenha de comprometer. Ao permitir uma personalização profunda, a Didit garante que o seu processo de verificação de identidade pareça uma parte integrante da sua aplicação, e não uma interrupção externa e dissonante.

Integrar o SDK JavaScript da Didit para Flexibilidade Máxima

O SDK JavaScript da Didit foi concebido para programadores que procuram o máximo controlo e flexibilidade. É o método de integração recomendado para aplicações de produção devido às suas funcionalidades abrangentes, incluindo gestão de sessões, "callbacks" de eventos e suporte para frameworks populares como React, Vue, Angular, NextJS, Nuxt e Svelte, bem como JS "vanilla". Ao contrário de "iframes" ou redirecionamentos mais simples, o SDK JavaScript permite-lhe gerir programaticamente o fluxo de verificação e lidar com eventos diretamente na 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);
    // Lidar com a verificação bem-sucedida, por exemplo, redirecionar o utilizador, atualizar a UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Lidar com erros de forma apropriada
  },
  onCancel: () => {
    console.log('User cancelled verification');
    // Lidar com o cancelamento do utilizador
  }
});

Este SDK permite-lhe controlar se a verificação aparece como um modal ou inline, dando-lhe controlo granular sobre a interação do utilizador. Ao aproveitar este SDK, ganha a capacidade de envolver os componentes da Didit dentro da estrutura da sua própria aplicação, tornando-os adaptáveis a estilos personalizados.

Estilizar Componentes Didit com Tailwind CSS

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

Por exemplo, se o SDK da Didit renderiza um modal ou um componente inline dentro de uma "div" específica, pode aplicar classes Tailwind a essa "div" para controlar o seu tamanho, espaçamento e até alguns aspetos da 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 amplas capacidades de "white-label" através da sua Consola de Negócios, o que é frequentemente uma abordagem mais eficaz e sustentável do que tentar substituir estilos diretamente.

No entanto, para elementos invólucro ou UI personalizada que construir em torno do SDK Didit, o Tailwind CSS é ideal. Imagine que deseja apresentar o fluxo de verificação dentro de um componente de cartão específico da 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 a Sua Identidade</h2>
    <!-- O SDK Didit irá renderizar a 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 é visualmente consistente com a aplicação circundante. Para os elementos dentro do fluxo Didit, as funcionalidades de "white-label" da Didit fornecem a personalização definitiva.

A Solução Abrangente de White-Labeling da Didit

Embora a manipulação direta de CSS possa lidar com alguns aspetos, o método principal e mais poderoso da Didit para personalização da UI é a sua funcionalidade de "white-label" incorporada, acessível através da Consola de Negócios Didit. Isso vai muito além do que poderia ser alcançado com simples substituições de CSS, fornecendo uma solução robusta para uma experiência verdadeiramente personalizada. Com as capacidades de "white-label" da Didit, pode:

• Personalizar Cores: Controlar botões, texto, painéis e fundos para corresponder à sua paleta de marca.
• Definir Tipografia: Aplicar as fontes da sua marca para uma aparência consistente.
• Carregar Logótipos: Integrar os seus logótipos quadrados e retangulares diretamente no fluxo de verificação.
• Ajustar Layout: Afinar os raios de bordo para painéis e botões.
• Configurar Ecrã de Início de Sessão: Decidir se mostra ou ignora o ecrã de início de sessão inicial.
• Usar Domínios Personalizados: Alojamento do fluxo de verificação no seu próprio domínio (por exemplo, verificar.suaempresa.com) em vez de verificar.didit.me, garantindo uma jornada do utilizador completamente integrada sem qualquer marca externa.

Este nível de personalização é aplicado diretamente nos seus fluxos de trabalho Didit, o que significa que, uma vez configurado na Consola de Negócios, todas as sessões de verificação iniciadas através desse fluxo de trabalho refletirão automaticamente a sua marca. Isso é particularmente eficaz para produtos Didit como Verificação de Identidade, Deteção de Vida Passiva e Ativa, e Estimativa de Idade, garantindo que cada passo da interação do utilizador com estas funcionalidades se alinhe perfeitamente com a sua marca.

Como a Didit Ajuda

A Didit destaca-se como a plataforma de identidade nativa de IA e "developer-first" que capacita as empresas a personalizar totalmente a sua experiência de verificação de identidade. Com a nossa arquitetura modular, obtém verificações de identidade "plug-and-play" que se integram perfeitamente nos seus sistemas existentes. O nosso SDK JavaScript fornece o controlo programático necessário para uma integração profunda com "frameworks" web modernos, enquanto as nossas funcionalidades abrangentes de "white-label" na Consola de Negócios permitem uma personalização extensiva da marca — desde cores e fontes até domínios personalizados. Isso garante uma experiência de utilizador consistente e fiável em todos os produtos Didit, incluindo a nossa robusta Verificação de Identidade (OCR, MRZ, códigos de barras), deteção de Vida Passiva e Ativa para prevenção de fraude, 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 configuraçã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.