Ves al contingut principal
Didit recapta 7,5M $ per construir la infraestructura per a identitat i frau
Didit
Torna al blog
Blog · 7 de març del 2026

Personalització de la IU amb Didit: SDK de JavaScript i Tailwind CSS (CA-1)

Descobreix com integrar i personalitzar fàcilment els fluxos de verificació d'identitat de Didit a la teva aplicació web utilitzant el SDK de JavaScript i Tailwind CSS per a una experiència d'usuari ininterrompuda.

Per DiditActualitzat el
seamless-ui-customization-didits-javascript-sdk-and-tailwind-css.png

La consistència de marca és clauMantenir una experiència de marca unificada en tots els punts de contacte, inclosa la verificació d'identitat, genera confiança i lleialtat en l'usuari. Les opcions d'integració flexibles de Didit ho fan possible.

SDK de JavaScript per al controlEl SDK de JavaScript de Didit ofereix un control programàtic complet sobre el flux de verificació, permetent una personalització profunda i una integració perfecta en marcs web moderns com React, Vue i Angular.

Tailwind CSS per a un estil ràpidAprofita l'enfocament "utility-first" de Tailwind CSS per estilitzar de manera ràpida i eficient els components de la IU de Didit, assegurant una concordança perfecta amb el teu sistema de disseny existent sense anul·lacions complexes.

Solució de marca blanca de DiditMés enllà de l'estil directe, Didit proporciona capacitats integrals de marca blanca dins de la seva Consola de Negocis, permetent una àmplia personalització de la marca, inclosos dominis personalitzats, colors i logotips, aplicats sense esforç als teus fluxos de treball.

La importància d'una experiència d'usuari fluida en la verificació d'identitat

En el panorama digital actual, l'experiència d'usuari (UX) és primordial. Quan els usuaris interactuen amb la teva aplicació, cada punt de contacte contribueix a la seva percepció general de la teva marca. Això inclou processos crítics com la verificació d'identitat. Un flux de verificació mal coordinat i que no s'ajusta a la marca pot interrompre el viatge de l'usuari, provocar l'abandonament i erosionar la confiança. Per contra, un procés de verificació perfectament integrat i amb una marca ben definida millora el professionalisme i reforça la confiança de l'usuari.

Moltes solucions de verificació d'identitat ofereixen interfícies d'usuari genèriques i estandarditzades que xoquen amb les directrius de marca curosament elaborades d'una empresa. Això obliga les empreses a triar entre una seguretat robusta i una experiència d'usuari coherent. Didit entén aquest repte i proporciona eines potents, com el seu SDK de JavaScript i les àmplies opcions de marca blanca, per garantir que no hagis de comprometre't. En permetre una personalització profunda, Didit assegura que el teu procés de verificació d'identitat se senti com una part integral de la teva aplicació, no com una interrupció externa i discordant.

Integració del SDK de JavaScript de Didit per a una flexibilitat màxima

El SDK de JavaScript de Didit està dissenyat per a desenvolupadors que busquen el màxim control i flexibilitat. És el mètode d'integració recomanat per a aplicacions de producció a causa de les seves característiques completes, inclosa la gestió de sessions, les devolucions de trucada d'esdeveniments i el suport per a marcs populars com React, Vue, Angular, NextJS, Nuxt i Svelte, així com JavaScript pur. A diferència de les incrustacions o redireccions d'iframe més senzilles, el SDK de JavaScript et permet gestionar programàticament el flux de verificació i gestionar els esdeveniments directament dins de la teva aplicació.

La integració bàsica és senzilla:

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
  }
});

Aquest SDK et permet controlar si la verificació apareix com a modal o en línia, donant-te un control granular sobre la interacció de l'usuari. Aprofitant aquest SDK, obtens la capacitat d'embolcallar els components de Didit dins de l'estructura de la teva pròpia aplicació, fent-los adaptables a l'estil personalitzat.

Estilització dels components de Didit amb Tailwind CSS

Tailwind CSS s'ha convertit en un favorit entre els desenvolupadors pel seu enfocament "utility-first", que permet un desenvolupament ràpid de la IU i dissenys altament coherents. Quan integres el SDK de JavaScript de Didit, pots aplicar els teus estils de Tailwind CSS als elements contenidors que allotgen la IU de Didit, assegurant un aspecte i una sensació cohesius. Tot i que els components bàsics de Didit estan dissenyats per ser robustos i funcionals, la seva presentació pot estar influenciada per l'estructura DOM circumdant i els estils globals de la teva aplicació.

Per exemple, si el SDK de Didit renderitza un modal o un component en línia dins d'un div específic, pots aplicar classes de Tailwind a aquest div per controlar la seva mida, espaiat i fins i tot alguns aspectes de la seva aparença. Per a una personalització més profunda dels elements interns del flux de verificació (com ara botons, camps d'entrada i text), Didit ofereix àmplies capacitats de marca blanca a través de la seva Consola de Negocis, que sovint és un enfocament més eficaç i mantenible que intentar anul·lar els estils directament.

No obstant això, per als elements "wrapper" o la IU personalitzada que construeixes al voltant del SDK de Didit, Tailwind CSS és ideal. Imagina que vols presentar el flux de verificació dins d'un component de targeta específic de la teva aplicació:

<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 aquest exemple, tot l'estil exterior (fons, aparença de la targeta, estils de text) es gestiona amb Tailwind. El SDK de Didit s'inicialitzaria llavors per renderitzar-se dins de #didit-verification-container, heretant alguns estils contextuals i assegurant que sigui visualment coherent amb l'aplicació circumdant. Per als elements dins del flux de Didit, les característiques de marca blanca de Didit proporcionen la personalització definitiva.

La solució integral de marca blanca de Didit

Tot i que la manipulació directa de CSS pot gestionar alguns aspectes, el mètode principal i més potent de Didit per a la personalització de la IU és la seva característica de marca blanca integrada, accessible a través de la Consola de Negocis de Didit. Això va molt més enllà del que es podria aconseguir amb simples anul·lacions de CSS, proporcionant una solució robusta per a una experiència veritablement de marca. Amb les capacitats de marca blanca de Didit, pots:

  • Personalitzar colors: Controlar botons, text, panells i fons per coincidir amb la paleta de la teva marca.
  • Establir tipografia: Aplicar les fonts de la teva marca per a un aspecte coherent.
  • Carregar logotips: Integrar els teus logotips quadrats i rectangulars directament al flux de verificació.
  • Ajustar el disseny: Ajustar els radis de les vores per a panells i botons.
  • Configurar la pantalla d'inici de sessió: Decidir si es mostra o s'omet la pantalla d'inici de sessió inicial.
  • Utilitzar dominis personalitzats: Allotjar el flux de verificació al teu propi domini (per exemple, verify.yourcompany.com) en lloc de verify.didit.me, assegurant un viatge d'usuari completament fluid sense cap marca externa.

Aquest nivell de personalització s'aplica directament als teus fluxos de treball de Didit, el que significa que un cop configurat a la Consola de Negocis, totes les sessions de verificació iniciades a través d'aquest flux de treball reflectiran automàticament la teva marca. Això és particularment efectiu per als productes de Didit com la verificació d'identitat, la detecció de vida passiva i activa, i l'estimació d'edat, assegurant que cada pas de la interacció de l'usuari amb aquestes característiques s'alinea perfectament amb la teva marca.

Com t'ajuda Didit

Didit destaca com la plataforma d'identitat nativa d'IA i orientada al desenvolupador que permet a les empreses personalitzar completament la seva experiència de verificació d'identitat. Amb la nostra arquitectura modular, obtens comprovacions d'identitat "plug-and-play" que s'integren perfectament als teus sistemes existents. El nostre SDK de JavaScript proporciona el control programàtic necessari per a una integració profunda amb marcs web moderns, mentre que les nostres funcions integrals de marca blanca a la Consola de Negocis permeten una àmplia personalització de la marca, des de colors i fonts fins a dominis personalitzats. Això garanteix una experiència d'usuari coherent i fiable en tots els productes de Didit, inclosa la nostra robusta verificació d'identitat (OCR, MRZ, codis de barres), detecció de vida passiva i activa per a la prevenció del frau, i estimació d'edat que respecta la privadesa. Didit ofereix KYC Core gratuït i un model de pagament per comprovació reeixida sense despeses de configuració, fent que la verificació d'identitat avançada sigui accessible i eficient.

A punt per començar?

Vols veure Didit en acció? Demana una demostració gratuïta avui mateix.

Comença a verificar identitats de forma gratuïta amb el nivell gratuït de Didit.

Infraestructura per a identitat i frau.

Una API per a KYC, KYB, monitorització de transaccions i anàlisi de carteres. Integra-la en 5 minuts.

Demana a una IA que resumeixi aquesta pàgina
Personalització UI amb Didit: SDK JS i Tailwind CSS.