Personalización Total del SDK de Didit: Guía de Branding

En el competitivo mercado actual, mantener la coherencia de la marca es fundamental, incluso dentro de las integraciones de terceros. El SDK de Didit ofrece amplias opciones de personalización del SDK, permitiéndote ofrecer una experiencia de verificación de identidad con marca perfecta a tus usuarios. Esta guía proporciona una descripción completa de la personalización del SDK de Didit, que abarca overrides de CSS, tematización y mejores prácticas para garantizar una integración totalmente marcada.

Punto Clave 1 El SDK de Didit está diseñado para una personalización profunda. Puedes alterar por completo la apariencia para que coincida con las directrices de tu marca.

Punto Clave 2 La personalización se logra principalmente a través de overrides de CSS, proporcionando un control granular sobre los elementos visuales.

Punto Clave 3 Considera utilizar una solución CSS-in-JS para gestionar temas complejos y mantener la coherencia en toda tu aplicación.

Punto Clave 4 Las pruebas exhaustivas son esenciales después de aplicar las personalizaciones para garantizar una experiencia de usuario fluida y consistente.

Comprendiendo la Arquitectura del SDK de Didit para la Personalización

El SDK de Didit utiliza una arquitectura modular, que proporciona una base flexible para el branding del SDK. La lógica de verificación principal está separada de los componentes de la interfaz de usuario, lo que te permite modificar la presentación visual sin alterar la funcionalidad subyacente. La interfaz de usuario del SDK está construida utilizando tecnologías web estándar (HTML, CSS, JavaScript), lo que facilita su personalización con herramientas conocidas. El método principal para la personalización del SDK de Didit es a través de overrides de CSS, lo que te permite apuntar a elementos específicos y aplicar tus propios estilos.

Overrides de CSS: La Base de la Personalización

La forma más eficaz de personalizar la apariencia del SDK de Didit es a través de overrides de CSS. El SDK proporciona un conjunto de clases CSS predefinidas que puedes apuntar con tus propios estilos. Aquí tienes un desglose de cómo utilizar los overrides de CSS:

• Estilos Globales: Utiliza una hoja de estilo global para definir estilos base para elementos comunes como fuentes, colores y estilos de botones.
• Overrides Específicos: Apunta a componentes específicos con estilos más granulares. Por ejemplo, para cambiar el color del botón “Verificar”, podrías usar un selector como .didit-button--primary.
• Especificidad: Ten en cuenta la especificidad de CSS. Utiliza selectores más específicos si tus estilos no se aplican.

Ejemplo:

/* Cambiar el color del botón primario */
.didit-button--primary {
  background-color: #TU_COLOR_DE_MARCA !important;
  color: white !important;
}

/* Cambiar el color del borde del campo de entrada */
.didit-input input {
  border-color: #TU_COLOR_DE_MARCA !important;
}

Importante: La bandera !important puede ser necesaria para anular los estilos predeterminados del SDK. Sin embargo, utilízala con precaución, ya que puede hacer que tu CSS sea más difícil de mantener. Considera un selector más específico como primer enfoque.

Tematización Avanzada con CSS-in-JS

Para escenarios de tematización más complejos, considera utilizar una solución CSS-in-JS como Styled Components o Emotion. Estas bibliotecas te permiten definir estilos utilizando JavaScript, lo que facilita la gestión de temas y el cambio dinámico entre ellos. CSS-in-JS también puede ayudar con el alcance de los componentes, evitando conflictos de estilo.

Ejemplo (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;
`;

Personalizando el Flujo y los Componentes del SDK

Más allá del estilo visual, también puedes personalizar ciertos aspectos del flujo del SDK. Por ejemplo, puedes:

• Mensajes de Error Personalizados: Reemplaza los mensajes de error predeterminados con tus propios mensajes de marca.
• Indicadores de Carga Personalizados: Utiliza tus propias animaciones de carga en lugar de las predeterminadas.
• Renderizado de Componentes (con acceso a la API): Para una personalización avanzada, utiliza la API de Didit para controlar el renderizado de componentes específicos, lo que te permite construir una interfaz de usuario completamente personalizada en torno a la lógica de verificación principal.

Cómo Didit Ayuda con la Personalización

Didit simplifica el proceso de personalización del SDK de Didit proporcionando:

• Documentación Detallada: Documentación completa que describe todas las clases CSS disponibles y las opciones de personalización.
• Temas de Ejemplo: Temas preconstruidos que puedes utilizar como punto de partida para tus propias personalizaciones.
• Soporte Dedicado: Acceso a nuestro equipo de soporte para ayudarte con cualquier desafío de personalización.
• Arquitectura Flexible: El diseño modular permite una personalización profunda sin afectar la funcionalidad principal. El enfoque de Didit prioriza el control del desarrollador.

¿Listo para Empezar?

¡Transforma el SDK de Didit en una extensión perfecta de tu marca! Aquí tienes algunos recursos para ayudarte a empezar:

• Documentación de Didit: Explora la referencia completa de la API y las guías de personalización.
• Centro de Demostración de Didit: Experimenta con el SDK y prueba diferentes opciones de personalización.
• Precios de Didit: Aprende sobre nuestros planes de precios flexibles.