Personalización fluida de la interfaz de usuario: SDK de JavaScript de Didit y Tailwind CSS (ES)

La consistencia de marca es claveMantener una experiencia de marca unificada en todos los puntos de contacto, incluida la verificación de identidad, genera confianza y lealtad en el usuario. Las opciones de integración flexibles de Didit lo hacen posible.

SDK de JavaScript para controlEl SDK de JavaScript de Didit ofrece control programático total sobre el flujo de verificación, lo que permite una personalización profunda y una integración perfecta en marcos web modernos como React, Vue y Angular.

Tailwind CSS para un estilo rápidoAprovecha el enfoque "utility-first" de Tailwind CSS para estilizar rápida y eficientemente los componentes de UI de Didit, asegurando una combinación perfecta con tu sistema de diseño existente sin anulaciones complejas.

Solución de marca blanca de DiditMás allá del estilo directo, Didit proporciona capacidades integrales de marca blanca dentro de su Consola de Negocios, permitiendo una amplia personalización de marca, incluyendo dominios personalizados, colores y logotipos, aplicados sin esfuerzo a tus flujos de trabajo.

La importancia de una experiencia de usuario fluida en la verificación de identidad

En el panorama digital actual, la experiencia del usuario (UX) es primordial. Cuando los usuarios interactúan con tu aplicación, cada punto de contacto contribuye a su percepción general de tu marca. Esto incluye procesos críticos como la verificación de identidad. Un flujo de verificación torpe y que no coincide con la marca puede interrumpir el viaje del usuario, provocar el abandono y erosionar la confianza. Por el contrario, un proceso de verificación perfectamente integrado y bellamente diseñado mejora la profesionalidad y refuerza la confianza del usuario.

Muchas soluciones de verificación de identidad ofrecen interfaces de usuario genéricas y únicas que chocan con las pautas de marca cuidadosamente elaboradas de una empresa. Esto obliga a las empresas a elegir entre una seguridad sólida y una experiencia de usuario consistente. Didit comprende este desafío y proporciona herramientas poderosas, como su SDK de JavaScript y amplias opciones de marca blanca, para garantizar que no tengas que comprometerte. Al permitir una personalización profunda, Didit asegura que tu proceso de verificación de identidad se sienta como una parte integral de tu aplicación, no como una interrupción externa y discordante.

Integración del SDK de JavaScript de Didit para una flexibilidad máxima

El SDK de JavaScript de Didit está diseñado para desarrolladores que buscan el máximo control y flexibilidad. Es el método de integración recomendado para aplicaciones de producción debido a sus características completas, que incluyen gestión de sesiones, "callbacks" de eventos y soporte para marcos populares como React, Vue, Angular, NextJS, Nuxt y Svelte, así como JavaScript puro. A diferencia de las incrustaciones de "iframe" o las redirecciones más simples, el SDK de JavaScript te permite gestionar programáticamente el flujo de verificación y manejar eventos directamente dentro de tu aplicación.

La integración básica es sencilla:

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);
    // Handle successful verification, e.g., redirect user, update UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Handle errors appropriately
  },
  onCancel: () => {
    console.log('User cancelled verification');
    // Handle user cancellation
  }
});

Este SDK te permite controlar si la verificación aparece como un modal o en línea, dándote un control granular sobre la interacción del usuario. Al aprovechar este SDK, obtienes la capacidad de envolver los componentes de Didit dentro de la estructura de tu propia aplicación, haciéndolos susceptibles a un estilo personalizado.

Estilizando componentes de Didit con Tailwind CSS

Tailwind CSS se ha convertido en un favorito entre los desarrolladores por su enfoque "utility-first", que permite un rápido desarrollo de UI y diseños altamente consistentes. Al integrar el SDK de JavaScript de Didit, puedes aplicar tus estilos Tailwind CSS a los elementos contenedores que alojan la UI de Didit, asegurando una apariencia y sensación cohesivas. Si bien los componentes centrales de Didit están diseñados para ser robustos y funcionales, su presentación puede verse influenciada por la estructura DOM circundante y los estilos globales de tu aplicación.

Por ejemplo, si el SDK de Didit renderiza un modal o un componente en línea dentro de un "div" específico, puedes aplicar clases de Tailwind a ese "div" para controlar su tamaño, espaciado e incluso algunos aspectos de su apariencia. Para una personalización más profunda de los elementos internos del flujo de verificación (como botones, campos de entrada y texto), Didit ofrece amplias capacidades de marca blanca a través de su Consola de Negocios, que a menudo es un enfoque más efectivo y mantenible que intentar anular los estilos directamente.

Sin embargo, para los elementos "wrapper" o la UI personalizada que construyes alrededor del SDK de Didit, Tailwind CSS es ideal. Imagina que deseas presentar el flujo de verificación dentro de un componente de tarjeta específico de tu aplicación:

<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">Verify Your Identity</h2>
    <!-- Didit SDK will render its UI here -->
    <div id="didit-verification-container"></div>
  </div>
</div>

En este ejemplo, todo el estilo exterior (fondo, apariencia de la tarjeta, estilos de texto) es manejado por Tailwind. El SDK de Didit se inicializaría para renderizarse dentro de #didit-verification-container, heredando algunos estilos contextuales y asegurando que sea visualmente consistente con la aplicación circundante. Para los elementos dentro del flujo de Didit, las características de marca blanca de Didit proporcionan la personalización definitiva.

Solución integral de marca blanca de Didit

Si bien la manipulación directa de CSS puede manejar algunos aspectos, el método principal y más poderoso de Didit para la personalización de la UI es su función de marca blanca integrada, accesible a través de la Consola de Negocios de Didit. Esto va mucho más allá de lo que podrías lograr con simples anulaciones de CSS, proporcionando una solución robusta para una experiencia verdaderamente personalizada. Con las capacidades de marca blanca de Didit, puedes:

• Personalizar colores: Controla botones, texto, paneles y fondos para que coincidan con la paleta de tu marca.
• Configurar tipografía: Aplica las fuentes de tu marca para una apariencia consistente.
• Cargar logotipos: Integra tus logotipos cuadrados y rectangulares directamente en el flujo de verificación.
• Ajustar el diseño: Ajusta los radios de los bordes para paneles y botones.
• Configurar la pantalla de inicio de sesión: Decide si mostrar u omitir la pantalla de inicio de sesión inicial.
• Usar dominios personalizados: Aloja el flujo de verificación en tu propio dominio (p. ej., verify.yourcompany.com) en lugar de verify.didit.me, asegurando un viaje de usuario completamente fluido sin ninguna marca externa.

Este nivel de personalización se aplica directamente dentro de tus flujos de trabajo de Didit, lo que significa que una vez configurado en la Consola de Negocios, todas las sesiones de verificación iniciadas a través de ese flujo de trabajo reflejarán automáticamente tu marca. Esto es particularmente efectivo para productos de Didit como la verificación de identidad, la detección de vida pasiva y activa, y la estimación de edad, asegurando que cada paso de la interacción del usuario con estas características se alinee perfectamente con tu marca.

Cómo ayuda Didit

Didit se destaca como la plataforma de identidad nativa de IA y "developer-first" que permite a las empresas personalizar completamente su experiencia de verificación de identidad. Con nuestra arquitectura modular, obtienes verificaciones de identidad "plug-and-play" que se integran perfectamente en tus sistemas existentes. Nuestro SDK de JavaScript proporciona el control programático necesario para una integración profunda con marcos web modernos, mientras que nuestras amplias funciones de marca blanca en la Consola de Negocios permiten una personalización de marca extensa, desde colores y fuentes hasta dominios personalizados. Esto garantiza una experiencia de usuario consistente y confiable en todos los productos de Didit, incluida nuestra sólida verificación de identidad (OCR, MRZ, códigos de barras), detección de vida pasiva y activa para la prevención de fraudes y estimación de edad que preserva la privacidad. Didit ofrece KYC Core gratuito y un modelo de pago por verificación exitosa sin tarifas de configuración, lo que hace que la verificación de identidad avanzada sea accesible y eficiente.

¿Listo para empezar?

¿Listo para ver Didit en acción? Obtén una demostración gratuita hoy.

Comienza a verificar identidades gratis con el nivel gratuito de Didit.