Personnalisation UI fluide : SDK JavaScript Didit et Tailwind CSS (FR)

La cohérence de marque est essentielleMaintenir une expérience de marque unifiée sur tous les points de contact, y compris la vérification d'identité, renforce la confiance et la fidélité des utilisateurs. Les options d'intégration flexibles de Didit rendent cela possible.

SDK JavaScript pour le contrôleLe SDK JavaScript de Didit offre un contrôle programmatique complet sur le flux de vérification, permettant une personnalisation approfondie et une intégration transparente dans les frameworks web modernes comme React, Vue et Angular.

Tailwind CSS pour un style rapideTirez parti de l'approche "utility-first" de Tailwind CSS pour styliser rapidement et efficacement les composants d'interface utilisateur de Didit, assurant une correspondance parfaite avec votre système de conception existant sans surcharges complexes.

La solution "marque blanche" de DiditAu-delà du style direct, Didit offre des capacités complètes de "marque blanche" au sein de sa console d'entreprise, permettant une personnalisation étendue de la marque, y compris les domaines personnalisés, les couleurs et les logos, appliqués sans effort à vos flux de travail.

L'importance d'une expérience utilisateur fluide dans la vérification d'identité

Dans le paysage numérique actuel, l'expérience utilisateur (UX) est primordiale. Lorsque les utilisateurs interagissent avec votre application, chaque point de contact contribue à leur perception globale de votre marque. Cela inclut les processus critiques comme la vérification d'identité. Un flux de vérification maladroit et non conforme à la marque peut perturber le parcours utilisateur, entraîner l'abandon et éroder la confiance. Inversement, un processus de vérification parfaitement intégré et magnifiquement marqué améliore le professionnalisme et renforce la confiance des utilisateurs.

De nombreuses solutions de vérification d'identité offrent des interfaces utilisateur génériques et "taille unique" qui entrent en conflit avec les directives de marque soigneusement élaborées d'une entreprise. Cela oblige les entreprises à choisir entre une sécurité robuste et une expérience utilisateur cohérente. Didit comprend ce défi et fournit des outils puissants, comme son SDK JavaScript et ses options "marque blanche" étendues, pour vous assurer que vous n'avez pas à faire de compromis. En permettant une personnalisation approfondie, Didit garantit que votre processus de vérification d'identité fait partie intégrante de votre application, et non une interruption externe et discordante.

Intégration du SDK JavaScript de Didit pour une flexibilité ultime

Le SDK JavaScript de Didit est conçu pour les développeurs recherchant un contrôle et une flexibilité maximum. C'est la méthode d'intégration recommandée pour les applications de production en raison de ses fonctionnalités complètes, y compris la gestion de session, les rappels d'événements et le support des frameworks populaires comme React, Vue, Angular, NextJS, Nuxt et Svelte, ainsi que du JS "vanilla". Contrairement aux intégrations plus simples via iframe ou aux redirections, le SDK JavaScript vous permet de gérer programmatiquement le flux de vérification et de gérer les événements directement au sein de votre application.

L'intégration de base est simple :

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);
    // Gérer la vérification réussie, par exemple, rediriger l'utilisateur, mettre à jour l'interface utilisateur
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Gérer les erreurs de manière appropriée
  },
  onCancel: () => {
    console.log('User cancelled verification');
    // Gérer l'annulation par l'utilisateur
  }
});

Ce SDK vous permet de contrôler si la vérification apparaît comme une modale ou en ligne, vous donnant un contrôle granulaire sur l'interaction de l'utilisateur. En tirant parti de ce SDK, vous obtenez la possibilité d'envelopper les composants de Didit dans la structure de votre propre application, les rendant ainsi adaptables à un style personnalisé.

Styliser les composants Didit avec Tailwind CSS

Tailwind CSS est devenu un favori des développeurs pour son approche "utility-first", permettant un développement rapide de l'interface utilisateur et des conceptions très cohérentes. Lors de l'intégration du SDK JavaScript de Didit, vous pouvez appliquer vos styles Tailwind CSS aux éléments conteneurs qui hébergent l'interface utilisateur de Didit, garantissant un aspect et une sensation cohérents. Bien que les composants principaux de Didit soient conçus pour être robustes et fonctionnels, leur présentation peut être influencée par la structure DOM environnante et les styles globaux de votre application.

Par exemple, si le SDK de Didit rend une modale ou un composant en ligne dans une div spécifique, vous pouvez appliquer des classes Tailwind à cette div pour contrôler sa taille, son espacement et même certains aspects de son apparence. Pour une personnalisation plus approfondie des éléments internes du flux de vérification (comme les boutons, les champs de saisie et le texte), Didit propose des capacités "marque blanche" étendues via sa console d'entreprise, ce qui est souvent une approche plus efficace et plus facile à maintenir que d'essayer de remplacer les styles directement.

Cependant, pour les éléments "wrapper" ou l'interface utilisateur personnalisée que vous construisez autour du SDK Didit, Tailwind CSS est idéal. Imaginez que vous souhaitez présenter le flux de vérification dans un composant de carte spécifique de votre application :

<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">Vérifiez votre identité</h2>
    <!-- Le SDK Didit rendra son interface utilisateur ici -->
    <div id="didit-verification-container"></div>
  </div>
</div>

Dans cet exemple, tout le style extérieur (arrière-plan, apparence de la carte, styles de texte) est géré par Tailwind. Le SDK Didit serait ensuite initialisé pour être rendu dans #didit-verification-container, héritant de certains styles contextuels et garantissant qu'il est visuellement cohérent avec l'application environnante. Pour les éléments à l'intérieur du flux Didit, les fonctionnalités "marque blanche" de Didit offrent la personnalisation définitive.

La solution complète "marque blanche" de Didit

Bien que la manipulation directe du CSS puisse gérer certains aspects, la méthode principale et la plus puissante de Didit pour la personnalisation de l'interface utilisateur est sa fonctionnalité "marque blanche" intégrée, accessible via la console d'entreprise Didit. Cela va bien au-delà de ce que vous pourriez réaliser avec de simples remplacements CSS, offrant une solution robuste pour une expérience véritablement "brandée". Avec les capacités "marque blanche" de Didit, vous pouvez :

• Personnaliser les couleurs : Contrôlez les boutons, le texte, les panneaux et les arrière-plans pour correspondre à la palette de votre marque.
• Définir la typographie : Appliquez les polices de votre marque pour un look cohérent.
• Télécharger des logos : Intégrez vos logos carrés et rectangulaires directement dans le flux de vérification.
• Ajuster la mise en page : Affinez les rayons de bordure pour les panneaux et les boutons.
• Configurer l'écran de connexion : Décidez d'afficher ou de sauter l'écran de connexion initial.
• Utiliser des domaines personnalisés : Hébergez le flux de vérification sur votre propre domaine (par exemple, verify.yourcompany.com) au lieu de verify.didit.me, assurant un parcours utilisateur complètement fluide sans aucune marque externe.

Ce niveau de personnalisation est appliqué directement dans vos workflows Didit, ce qui signifie qu'une fois configurées dans la console d'entreprise, toutes les sessions de vérification initiées via ce workflow refléteront automatiquement votre marque. Ceci est particulièrement efficace pour les produits Didit comme la vérification d'identité, la détection de vivacité passive et active, et l'estimation de l'âge, garantissant que chaque étape de l'interaction de l'utilisateur avec ces fonctionnalités s'aligne parfaitement avec votre marque.

Comment Didit vous aide

Didit se distingue comme la plateforme d'identité native de l'IA, axée sur les développeurs, qui permet aux entreprises de personnaliser entièrement leur expérience de vérification d'identité. Grâce à notre architecture modulaire, vous obtenez des vérifications d'identité "plug-and-play" qui s'intègrent de manière transparente à vos systèmes existants. Notre SDK JavaScript fournit le contrôle programmatique nécessaire pour une intégration approfondie avec les frameworks web modernes, tandis que nos fonctionnalités "marque blanche" complètes dans la console d'entreprise permettent une personnalisation étendue de la marque – des couleurs et polices aux domaines personnalisés. Cela garantit une expérience utilisateur cohérente et fiable sur tous les produits Didit, y compris notre robuste vérification d'identité (OCR, MRZ, codes-barres), la détection de vivacité passive et active pour la prévention de la fraude, et l'estimation de l'âge respectueuse de la vie privée. Didit propose un KYC "Core" gratuit et un modèle de paiement par vérification réussie sans frais d'installation, rendant la vérification d'identité avancée accessible et efficace.

Prêt à commencer ?

Prêt à voir Didit en action ? Obtenez une démo gratuite dès aujourd'hui.

Commencez à vérifier les identités gratuitement avec le niveau gratuit de Didit.