Personnalisation de l'identité visuelle du SDK Didit : Guide complet

Dans le paysage concurrentiel actuel, maintenir une cohérence de marque est essentiel, même au sein des intégrations tierces. Le SDK Didit offre des options de personnalisation du SDK étendues, vous permettant de proposer une expérience de vérification d'identité de marque transparente à vos utilisateurs. Ce guide fournit un aperçu complet de la personnalisation du SDK Didit, couvrant les remplacements CSS, les thèmes et les meilleures pratiques pour garantir une intégration entièrement personnalisée.

Point clé 1 Le SDK Didit est conçu pour une personnalisation approfondie. Vous pouvez modifier complètement l'apparence pour qu'elle corresponde à vos directives de marque.

Point clé 2 La personnalisation est principalement obtenue grâce à des remplacements CSS, offrant un contrôle granulaire sur les éléments visuels.

Point clé 3 Envisagez d'utiliser une solution CSS-in-JS pour gérer des thèmes complexes et maintenir la cohérence dans toute votre application.

Point clé 4 Des tests approfondis sont essentiels après avoir appliqué des personnalisations pour garantir une expérience utilisateur fluide et cohérente.

Comprendre l'architecture du SDK Didit pour la personnalisation

Le SDK Didit utilise une architecture modulaire, offrant une base flexible pour la personnalisation de l'image de marque du SDK. La logique de vérification principale est séparée des composants d'interface utilisateur, vous permettant de modifier la présentation visuelle sans altérer la fonctionnalité sous-jacente. L'interface utilisateur du SDK est construite à l'aide de technologies web standard (HTML, CSS, JavaScript), ce qui la rend facile à personnaliser avec des outils familiers. La méthode principale de personnalisation du SDK est la suivante : les remplacements CSS, qui vous permettent de cibler des éléments spécifiques et d'appliquer vos propres styles.

Remplacements CSS : le cœur de la personnalisation

La façon la plus efficace de personnaliser l'apparence du SDK Didit est d'utiliser des remplacements CSS. Le SDK fournit un ensemble de classes CSS prédéfinies que vous pouvez cibler avec vos propres styles. Voici une explication de la façon d'utiliser les remplacements CSS :

• Styles globaux : Utilisez une feuille de style globale pour définir les styles de base des éléments courants tels que les polices, les couleurs et les styles de bouton.
• Remplacements spécifiques : Cibler des composants spécifiques avec des styles plus granulaires. Par exemple, pour changer la couleur du bouton « Vérifier », vous pouvez utiliser un sélecteur tel que .didit-button--primary.
• Spécificité : Soyez attentif à la spécificité CSS. Utilisez des sélecteurs plus spécifiques si vos styles ne sont pas appliqués.

Exemple :

/* Changer la couleur du bouton principal */
.didit-button--primary {
  background-color: #VOTRE_COULEUR_DE_MARQUE !important;
  color: white !important;
}

/* Changer la couleur de la bordure du champ de saisie */
.didit-input input {
  border-color: #VOTRE_COULEUR_DE_MARQUE !important;
}

Important : Le drapeau !important peut être nécessaire pour remplacer les styles par défaut du SDK. Cependant, utilisez-le avec prudence, car il peut rendre votre CSS plus difficile à maintenir. Essayez d'abord un sélecteur plus spécifique.

Thèmes avancés avec CSS-in-JS

Pour des scénarios de thèmes plus complexes, envisagez d'utiliser une solution CSS-in-JS telle que Styled Components ou Emotion. Ces bibliothèques vous permettent de définir des styles à l'aide de JavaScript, ce qui facilite la gestion des thèmes et leur commutation dynamique. CSS-in-JS peut également aider à la portée des composants, empêchant les conflits de style.

Exemple (Styled Components) :

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

Personnalisation du flux et des composants du SDK

Au-delà de la personnalisation visuelle, vous pouvez également personnaliser certains aspects du flux du SDK. Par exemple, vous pouvez :

• Messages d'erreur personnalisés : Remplacez les messages d'erreur par défaut par vos propres messages de marque.
• Indicateurs de chargement personnalisés : Utilisez vos propres animations de chargement au lieu de celles par défaut.
• Rendu des composants (avec accès API) : Pour une personnalisation avancée, utilisez l'API Didit pour contrôler le rendu de composants spécifiques, ce qui vous permet de créer une interface utilisateur entièrement personnalisée autour de la logique de vérification principale.

Comment Didit facilite la personnalisation

Didit simplifie le processus de personnalisation du SDK Didit en fournissant :

• Documentation détaillée : Documentation complète décrivant toutes les classes CSS disponibles et les options de personnalisation.
• Thèmes d'exemple : Thèmes prédéfinis que vous pouvez utiliser comme point de départ pour vos propres personnalisations.
• Support dédié : Accès à notre équipe de support pour vous aider à résoudre tout problème de personnalisation.
• Architecture flexible : La conception modulaire permet une personnalisation approfondie sans affecter la fonctionnalité principale. L'approche de Didit donne la priorité au contrôle des développeurs.

Prêt à commencer ?

Transformez le SDK Didit en une extension transparente de votre marque ! Voici quelques ressources pour vous aider à démarrer :

• Documentation Didit : Explorez la référence complète de l'API et les guides de personnalisation.
• Centre de démonstration Didit : Expérimentez avec le SDK et testez différentes options de personnalisation.
• Tarification de Didit : Découvrez nos plans de tarification flexibles.