> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/sdks/sdk-web/personalizacion.md). # Personalización ## Personalización de assets visuales Las animaciones del SDK Web pueden configurarse con la propiedad `customAnimations` en el ``. Con esta propiedad se pueden reemplazar una o varias animaciones de los componentes ofrecidos por el SDK Web: * SDK Provider * SelphID * Selphi * FileUploader * QRWidget Para más información consulta la [documentación de la propiedad customAnimations](/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md). **Ejemplo:** ```jsx // Ejemplo de configuración const customAnimations = { sdkProvider: { loading: "/assets/anim/custom-loading.gif", }, selphi: { loading: "/assets/anim/custom-loading.gif", }, selphid: { loading: "/assets/anim/custom-loading.gif", } }; // HTML (...) ``` {% hint style="info" %} **Nota**: En caso de configurar una animación mediante esta propiedad y la prop directa (Por ejemplo: `customAnimations.sdkProvider.loading` y `loadingAnimation`), prevalecerá el valor configurado en `customAnimations`. {% endhint %} ## Personalización de estilos Los componentes SDK Provider y los ofrecidos por éste, como Selphi y SelphID, pueden ser personalizados con las siguientes variables CSS aplicadas a la etiqueta `facephi-sdk-provider`: **Ejemplo**: {% hint style="info" %} La configuración CSS debe estar configurada con la encapsulación correcta (global, scoped, ...). En caso de integraciones de componentes, se recomienda añadir la configuración CSS de `facephi-sdk-provider` y su configuración dentro de la etiqueta de componente `:host`. Además, una configuración CSS global del componente también funcionará de la misma manera. {% endhint %} | Variable CSS | Descripción | Valor por defecto | Componentes | | ------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | | **Variables de color** | | | | | `--backgroundColor` | Color de fondo principal del contenedor | `transparent` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--color-state-loading` | Color de animación de carga del Provider | `#243760` | Loading Ellipsis | | `--color-background-primary` | Color de fondo de elementos principales (zona de soltar, desplegables, áreas de contenido) | `#ffffff` | File Uploader, Choose Document, QR Widget | | `--color-background-hover` | Color de fondo al pasar el ratón sobre elementos interactivos | `#cedafc` | File Uploader, Choose Document | | `--color-background-disabled` | Color de fondo de elementos deshabilitados | `#eaeef6` | File Uploader, Choose Document, QR Widget | | `--color-text-primary` | Color de texto principal | `#1d2c4d` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--color-text-secondary` | Color de texto secundario y placeholders | `#526080` | File Uploader, Choose Document | | `--color-text-disabled` | Color de texto de elementos deshabilitados | `#afb8cc` | File Uploader, Choose Document, QR Widget | | `--color-text-on-primary` | Color de texto sobre fondos de color primario | `#ffffff` | File Uploader, Choose Document, QR Widget, Tip Widget | | `--color-border-primary` | Color del borde de los elementos | `#ccd4e5` | File Uploader, Choose Document | | `--color-state-error` | Color para estados de error | `#dd3631` | File Uploader | | `--color-state-success` | Color para estados de éxito | `#0f8837` | File Uploader | | `--color-icon-primary` | Color primario para iconos | `#243760` | File Uploader, Error View | | `--color-icon-secondary` | Color secundario para iconos | `#7d879c` | File Uploader | | `--primaryColor` | Color de fondo de elementos seleccionados | `transparent` | Choose Document | | `--secondaryColor` | Color primario de botones y elementos activos | `#3167fc` | File Uploader, Choose Document, QR Widget, Tip Widget | | `--tertiaryColor` | Color de hover y foco de botones | `#2b50b6` | File Uploader, Choose Document, QR Widget, Tip Widget | | **Colores de animación del tutorial** | | | | | `--color-tutorial-computer-bg` | Color de fondo de la pantalla del ordenador en animaciones del tutorial | `#4c7cfc` | Lottie Widget (tutoriales Selphi, SelphID) | | `--color-tutorial-tshirt` | Color de la ropa del avatar en las animaciones del tutorial | `#1d2c4d` | Lottie Widget (tutoriales QR, Selphi, SelphID) | | `--color-tutorial-avatar-bg` | Color de fondo del avatar en animaciones del tutorial | `#d5dae9` | Lottie Widget (tutoriales QR, Selphi) | | `--color-tutorial-scan-line` | Color de la línea de escaneo en la animación del tutorial QR | `#5fc982` | Lottie Widget (tutorial QR) | | `--color-tutorial-earrings` | Color de pendientes y accesorios en animaciones del tutorial | `#f4a485` | Lottie Widget (tutorial QR) | | `--color-tutorial-check` | Color del check de éxito en el tutorial Selphi | `#07a13a` | Lottie Widget (tutorial Selphi) | | `--color-tutorial-progress` | Color de la barra de progreso circular en el tutorial Selphi | `#5fc982` | Lottie Widget (tutorial Selphi) | | `--color-tutorial-capture` | Color de éxito de captura en el tutorial móvil | `#07a13a` | Lottie Widget (tutorial móvil SelphID) | | `--color-tutorial-device-bg` | Color de fondo de la pantalla del dispositivo en el tutorial SelphID | `#2b50b6` | Lottie Widget (tutorial escritorio SelphID) | | **Variables de tipografía** | | | | | `--wrapper-primary-font` | Familia de fuentes principal de los componentes | `'Verdana', sans-serif` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--title-font` | Fuente del título principal | `"Poppins-Semibold"` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--text-font` | Fuente del texto principal | `"Poppins-Regular"` | File Uploader, Choose Document, QR Widget, Desktop View, Error View, Finish Widget, Loading Ellipsis, Tip Widget | | `--wrapper-font-family` | Familia de fuentes del componente de arrastrar y soltar | `'Verdana', sans-serif` | File Uploader (drag-drop) | | `--wrapper-text-font-size` | Tamaño de fuente del texto | `1em` | File Uploader | | `--secondary-font-weight` | Peso de fuente de títulos secundarios | `600` | File Uploader | | `--primary-font-weight` | Peso de fuente del texto principal | `400` | File Uploader | | **Variables de diseño** | | | | | `--wrapper-border-radius` | Radio del borde de los elementos | `0.5em` | File Uploader | | `--height-field` | Altura de los campos del formulario | `40px` | Choose Document | **Ejemplo**: ```css facephi-sdk-provider { --color-text-primary: #000000; --secondaryColor: #ff6600; --tertiaryColor: #cc5200; } ``` > **Nota**: La configuración CSS debe aplicarse con la encapsulación correcta (global, scoped, ...). En integraciones con componentes, se recomienda añadir la configuración CSS de `facephi-sdk-provider` y sus variables dentro de la etiqueta del componente `:host`. Además, una configuración CSS global del componente funcionará del mismo modo. *** #### Variables de Selphi Estas variables controlan el estilo del componente Selphi para la captura facial. Todas las variables se aplican a la etiqueta `facephi-sdk-provider`. | Variable CSS | Descripción | Valor por defecto | | ------------------------------------------- | ------------------------------------------------------------------------------ | -------------------- | | **Variables de color** | | | | `--wrapper-color-background` | Color de fondo principal del widget | `#FFFFFF` | | `--wrapper-color-primary` | Color de elementos principales | `#3167FC` | | `--wrapper-color-secondary` | Color de elementos secundarios | `#FFFFFF` | | `--wrapper-color-hover` | Color del efecto hover | `#2B50B6` | | `--wrapper-color-primary-text` | Color del texto principal | `#1D2C4D` | | `--wrapper-color-secondary-text` | Color del texto secundario | `#1D2C4D` | | `--wrapper-color-progress-bar` | Color de la barra de progreso durante la extracción | `#3167FC` | | `--wrapper-color-progress-bar-background` | Color de fondo de la barra de progreso alrededor del stream de cámara | `transparent` | | `--wrapper-color-capture-success` | Color del borde cuando la cara se captura correctamente | `#60C782` | | `--wrapper-color-capture-fail` | Color del texto y la barra de progreso cuando falla la extracción | `#F24B45` | | `--wrapper-color-capture-warning` | Color del fallo en la prueba de actividad durante el reto de liveness activo | `#EB6A00` | | `--wrapper-color-liveness-arrow` | Color de la flecha direccional durante la comprobación de actividad | `#5FC982` | | `--wrapper-color-icon` | Color de los iconos en el componente | `#243760` | | `--wrapper-color-error-icon` | Color principal del icono de error en la vista de error | `#DD3631` | | `--wrapper-color-browser-icon-background` | Color de fondo del icono del navegador en la vista BrowserError | `transparent` | | `--wrapper-color-debug-error-message` | Color del mensaje de error interno cuando la depuración está activada | `#DD3631` | | `--wrapper-color-loading-camera-background` | Color de fondo de la cámara antes de cargarse por completo en el DOM | `#000000` | | `--wrapper-color-loading` | Color principal de la animación de carga por defecto | `#1D2C4D` | | **Colores de animación del tutorial** | | | | `--wrapper-color-tutorial-background` | Color de fondo en las animaciones del tutorial por defecto | `#EAEEF6` | | `--wrapper-color-tutorial-progress` | Color de la barra de progreso en las animaciones del tutorial por defecto | `#5FC982` | | `--wrapper-color-tutorial-tshirt` | Color de la camiseta en las animaciones del tutorial por defecto | `#3167FC` | | `--wrapper-color-tutorial-earrings` | Color de pendientes y gafas de sol en las animaciones del tutorial por defecto | `#F4A485` | | `--wrapper-color-tutorial-border-error` | Color del borde de error en las animaciones del tutorial por defecto | `#F24B45` | | `--wrapper-color-tutorial-glow-error` | Color del glow/relleno de error en las animaciones del tutorial por defecto | `#F24B45` | | **Variables de tipografía** | | | | `--wrapper-primary-font` | Fuente del texto principal | `"Poppins-Regular"` | | `--wrapper-primary-font-weight` | Peso de la fuente principal | `400` | | `--wrapper-secondary-font` | Fuente del texto secundario | `"Poppins-Semibold"` | | `--wrapper-secondary-font-weight` | Peso de la fuente secundaria | `600` | | `--wrapper-text-font-size` | Tamaño de fuente del texto del widget | `1em` | | `--wrapper-title-font-size` | Tamaño de fuente del título del widget | `1.4em` | | `--wrapper-line-height` | Altura de línea del texto | `1.3125em` | | `--wrapper-vertical-align` | Alineación vertical del texto en el contenedor | `center` | | `--wrapper-text-align` | Alineación horizontal del texto en el contenedor | `center` | | **Variables de diseño** | | | | `--wrapper-progress-bar-width` | Ancho de la barra de progreso | `0.5em` | | `--wrapper-border-radius` | Radio del borde de los botones | `0.5em` | | `--wrapper-error-icon-max-width` | Ancho máximo del icono de la vista de error | `unset` | | **Visibilidad del logo** | | | | `--wrapper-display-logo` | Mostrar u ocultar el logo (usar `block` para mostrar o `none` para ocultar) | `none` | **Ejemplo**: ```css facephi-sdk-provider { --wrapper-color-primary: #3f2eff; --wrapper-color-secondary: #ffffff; --wrapper-color-hover: rgb(106, 93, 250); } ``` *** #### Variables de SelphID Estas variables controlan el estilo del componente SelphID para la captura de documentos. Todas las variables se aplican a la etiqueta `facephi-sdk-provider`. | Variable CSS | Descripción | Valor por defecto | | ------------------------------------------ | -------------------------------------------------------------------------------------------------- | -------------------- | | **Variables de color** | | | | `--wrapper-color-background` | Color de fondo principal del widget | `#FFFFFF` | | `--wrapper-color-primary` | Color de elementos principales | `#3167FC` | | `--wrapper-color-secondary` | Color de elementos secundarios | `#FFFFFF` | | `--wrapper-color-hover` | Color del efecto hover | `#2B50B6` | | `--wrapper-color-primary-text` | Color del texto principal | `#1D2C4D` | | `--wrapper-color-secondary-text` | Color del texto secundario | `#1D2C4D` | | `--wrapper-color-capture-success` | Color del borde cuando el documento se captura correctamente | `#07A13A` | | `--wrapper-color-capture-fail` | Color del texto, barra de progreso y borde del documento cuando falla la extracción | `#F24B45` | | `--wrapper-color-capture-neutral` | Color del borde del documento en su estado neutro (por defecto, el color primario) | `#3167FC` | | `--wrapper-color-diagnostic-primary` | Color de fondo del texto informativo | `#EAEEF6` | | `--wrapper-color-diagnostic-secondary` | Color de fondo del texto informativo cuando cameraOverflow está activado | `#243760` | | `--wrapper-color-background-camera` | Color de fondo del stream de vídeo en la vista de captura | `#10192B` | | `--wrapper-color-background-preview-image` | Color de fondo de la imagen de vista previa | `#FFFFFF` | | `--wrapper-color-camera-overflow` | Color de fondo del widget en la vista de captura de documento cuando cameraOverflow está activado | `#10192b85` | | `--wrapper-color-camera-overflow-filter` | Filtro de fondo del widget en la vista de captura de documento cuando cameraOverflow está activado | `#00000030` | | `--wrapper-color-icon` | Color de los iconos en el componente | `#243760` | | `--wrapper-color-error-icon` | Color principal del icono de error en la vista de error | `#DD3631` | | `--wrapper-color-browser-icon-background` | Color de fondo del icono del navegador en la vista BrowserError | `transparent` | | `--wrapper-color-debug-error-message` | Color del mensaje de error interno cuando la depuración está activada | `#DD3631` | | `--wrapper-color-loading` | Color principal de la animación de carga por defecto | `#1D2C4D` | | **Colores de animación del tutorial** | | | | `--wrapper-color-tutorial-background` | Color de fondo en las animaciones del tutorial por defecto | `#3167FC` | | `--wrapper-color-tutorial-success` | Color de la capa de éxito en las animaciones del tutorial por defecto | `#5BBF7E` | | **Variables de tipografía** | | | | `--wrapper-primary-font` | Fuente del texto principal | `"Poppins-Regular"` | | `--wrapper-primary-font-weight` | Peso de la fuente principal | `400` | | `--wrapper-secondary-font` | Fuente del texto secundario | `"Poppins-Semibold"` | | `--wrapper-secondary-font-weight` | Peso de la fuente secundaria | `600` | | `--wrapper-text-font-size` | Tamaño de fuente del texto del widget | `1em` | | `--wrapper-title-font-size` | Tamaño de fuente del título del widget | `1.4em` | | `--wrapper-title-font-size-mobile` | Tamaño de fuente del título del widget en resoluciones móviles | `1.125em` | | `--wrapper-line-height` | Altura de línea del texto | `1.75em` | | `--wrapper-vertical-align` | Alineación vertical del texto en el contenedor | `center` | | `--wrapper-text-align` | Alineación horizontal del texto en el contenedor | `center` | | **Variables de diseño** | | | | `--wrapper-document-border-width` | Ancho del borde de la transmisión de vídeo | `0.225em` | | `--wrapper-diagnostic-border-width` | Ancho del borde del mensaje informativo | `0.175em` | | `--wrapper-border-radius` | Radio del borde de los botones | `0.5em` | | `--wrapper-error-icon-max-width` | Ancho máximo del icono de la vista de error | `unset` | | **Visibilidad del logo** | | | | `--wrapper-display-logo` | Mostrar u ocultar el logo (usar `block` para mostrar o `none` para ocultar) | `none` | **Ejemplo**: ```css facephi-sdk-provider { --wrapper-color-primary: #3f2eff; --wrapper-color-capture-success: #00aa00; --wrapper-color-diagnostic-primary: #f0f0f0; } ``` *** ## Personalización del modo oscuro Los componentes del SDK Provider pueden adaptarse fácilmente a temas de modo oscuro sobrescribiendo las variables CSS con los valores de color adecuados. A continuación se muestran ejemplos de configuración mínima para cada categoría de componentes. ### Modo oscuro para los componentes del SDK Aplica estas variables para personalizar File Uploader, Choose Document, QR Widget y el resto de componentes principales del SDK en modo oscuro: ```css facephi-sdk-provider { /* Componentes del SDK */ --backgroundColor: #1D2C4D; --color-background-primary: #17223B; --color-background-hover: #0E1B3D; --color-background-disabled: #243760; --color-text-primary: #ffffff; --color-text-secondary: #ffffff; --color-text-disabled: #6b7a90; --color-text-on-primary: #10192B; --color-border-primary: #3d4a6c; --color-state-error: #e85550; --color-state-success: #2d9d5f; --secondaryColor: #5b8def; --tertiaryColor: #4a6bc9; /* Animaciones del tutorial */ --color-tutorial-computer-bg: #4c7cfc; --color-tutorial-avatar-bg: #2B50B6; --color-tutorial-check: #2d9d5f; --color-tutorial-progress: #5fc982; --color-tutorial-capture: #2d9d5f; --color-tutorial-device-bg: #2B50B6; --color-tutorial-scan-line: #5fc982; --color-tutorial-earrings: #f4a485; /* Selphi y SelphID */ --wrapper-color-background: #1D2C4D; --wrapper-color-primary: #5b8def; --wrapper-color-secondary: #1D2C4D; --wrapper-color-hover: #4a6bc9; --wrapper-color-primary-text: #ffffff; --wrapper-color-secondary-text: #ffffff; --wrapper-color-progress-bar: #5b8def; --wrapper-color-loading: #ffffff; --wrapper-color-tutorial-background: #526080; --wrapper-color-tutorial-success: #2d9d5f; --wrapper-color-diagnostic-primary: #243760; } ``` {% hint style="info" %} **Consejo**: Puedes combinar estas variables de modo oscuro con una media query CSS para cambiar de tema automáticamente según las preferencias del usuario: {% endhint %} ```css @media (prefers-color-scheme: dark) { facephi-sdk-provider { /* Aplica aquí las variables de modo oscuro */ } } ``` *** ## Propiedad de Idioma La propiedad de idioma en este componente SDK provider proporciona un enfoque sólido y flexible para la selección de idioma y la internacionalización. Admite traducciones predefinidas para Español (por defecto), Inglés y Portugués, y también se puede extender con archivos de traducción personalizados. Esta propiedad acepta tres tipos: un enum `Language` incorporado, un string (como URL a un JSON de traducción) o un objeto para configuración personalizada. Idiomas por defecto: * `es`: Textos en español (valor por defecto). * `en`: Textos en inglés. * `pt`: Textos en portugués. Tipo de propiedad: `Language | string | object` ### Tipos Soportados y Uso **1. Enum Language** Utiliza el enum predefinido para los idiomas soportados por defecto. Uso: ```jsx ``` **2. String (URL a JSON de Traducción)** Pasa un string a la propiedad de idioma para obtener un archivo JSON que contenga traducciones completas o parciales para uno o más widgets dentro del componente SDK provider. Ejemplos: ```jsx // Directorio local // CDN ``` Esquema JSON: El nivel raíz debe ser un objeto que contenga una o más de las siguientes claves de widget: * `sdk` * `selphi` * `selphid` {% hint style="info" %} La configuración de los siguientes componentes se realizan dentro del elemento `sdk`: * **FileUploader** (Subida de ficheros). * **VideoProvider** (Servicio de Video Grabación). {% endhint %} Cada objeto permitirá la edición total o parcial de los textos utilizados dentro de sus componentes. Estructura de ejemplo: ```json { "sdk": { ... }, "selphi": { ... }, "selphid": { ... }, } ``` > Nota: Si ninguna de estas cuatro claves está presente, el componente SDK provider volverá al idioma por defecto: español. Estructura JSON – Opciones **1. Selección de Idioma por Defecto: Especifica un idioma existente para un widget:** ```json { "sdk": "en", "selphi": "pt" } ``` **2. Sobreescrituras de Traducción Parciales: Esto proporciona una forma de sobreescribir literales específicos para un widget/idioma.** ```json { "sdk": "en", "selphi": { "en": { "Initializing...": "Espera un segundo..." } }, "selphid": { "en": { "Initializing...": "Espera un segundo..." } } } ``` {% hint style="info" %} El literal sobreescrito debe coincidir exactamente con una clave de traducción existente. Consulta la sección de Literales de Widget para una lista completa. {% endhint %} **3. Añadir un Nuevo Idioma: Para definir un idioma completamente nuevo, proporciona todos los literales requeridos para el/los widget(s) correspondiente(s).** ```json { "sdk": { "Literal 1": "Traducción para literal 1", "Literal 2": "Traducción para literal 2", "...": "..." } } ``` Ejemplo para Coreano: ```json { "sdk": { "The process has been completed": "프로세스가 완료되었습니다", "Ready": "안녕, 친구", // ... todos los demás literales } } ``` {% hint style="warning" %} Al añadir un nuevo idioma, debes proporcionar todos los literales requeridos para cada widget afectado. {% endhint %} **4. Combinación de Opciones: Puedes combinar selecciones de idioma por defecto, sobreescrituras parciales y nuevas definiciones de idioma dentro del mismo objeto o JSON según sea necesario.** Ejemplo: ```json { "sdk": "en", "selphid": { "en": { "Initializing...": "Espera un segundo..." } }, "recruitment": { "Start": "Comencemos", "Finish": "Fin" // ...resto de los literales requeridos para este widget } } ``` **3. Objeto (Asignación Directa)** También puedes pasar directamente un objeto con el mismo esquema que el JSON descrito anteriormente. ```javascript myComponent.language = { sdk: { /* ... */ }, selphi: { /* ... */ } } ``` #### Comportamiento de Reserva (Fallback) * Si la traducción proporcionada (ya sea por URL o por objeto) no contiene ninguna clave raíz válida (sdk, selphi, selphid, recruitment), se utilizará el idioma por defecto: español. * Cualquier literal faltante para un idioma nuevo también volverá a los valores por defecto para ese literal en español. *** ### Plantillas de literales La lista completa de literales de traducción para cada widget, necesarios para crear sobreescrituras completas o parciales, se puede encontrar aquí: **Literales de SDK Provider**: {% columns %} {% column %} **Español** {% file src="/files/ivGntgipumHymEypPGUA" %} {% endcolumn %} {% column %} **Inglés** {% file src="/files/rIeOr5OKHex2ZxqIaADz" %} {% endcolumn %} {% column %} **Portugués** {% file src="/files/CCJ6HY5m5DdE3wI6Vyzg" %} {% endcolumn %} {% column %} **Plantilla** {% file src="/files/PJkMqJCStlVr2Rca3o95" %} {% endcolumn %} {% endcolumns %} {% hint style="info" %} En este objeto/fichero también se configuran los strings de los componentes: * FileUploader * VideoProvider * VideoAssistance {% endhint %} ```typescript // Ejemplo de uso language = { sdk = sdkCustomJson } ``` **Literales de SelphID**: {% columns %} {% column %} Español {% file src="/files/GlTyO29dqQO6jdiq5wdO" %} {% endcolumn %} {% column %} Inglés {% file src="/files/xr7IlXfTFl9OocLV6MNP" %} {% endcolumn %} {% column %} Portugués {% file src="/files/9XUYM0VjTvkDY6btwFJf" %} {% endcolumn %} {% column %} Plantilla {% file src="/files/RcmUvevzXShW7UEUpPQP" %} {% endcolumn %} {% endcolumns %} ```typescript // Ejemplo de uso language = { sdk = { ... }, selphid: selphidCustomJson } ``` **Literales de Selphi**: {% columns %} {% column %} **Español** {% file src="/files/04oBPOMgB2v4mqmeT641" %} {% endcolumn %} {% column %} **inglés** {% file src="/files/qAElx7UyVsIUv6eHhJtR" %} {% endcolumn %} {% column %} **Portugués** {% file src="/files/OkfcYx6NqkviBMJPFlKV" %} {% endcolumn %} {% column %} **Plantilla** {% file src="/files/12xy0KILoykyCOtMUyOY" %} {% endcolumn %} {% endcolumns %} ```typescript // Ejemplo de uso language = { sdk = { ... }, selphi: selphiCustomJson } ``` *** ### Ejemplos de Casos de Uso Cambiar Componente a Inglés ```jsx ``` Añadir Coreano Usando un JSON de CDN ```jsx ``` Donde `kr.json` es: ```json { "sdk": { // ... Traducciones coreanas para todos los literales del SDK } } ``` Combinar Diferentes Escenarios ```json { "sdk": "en", "selphi": { "en": { "Starting camera...": "Preparando la cámara...", "Initializing...": "Espera un segundo..." } }, "recruitment": { // ...conjunto completo de literales chinos requeridos } } ``` #### Notas y Recomendaciones * Al sobreescribir o añadir traducciones, asegúrate de que se proporcionen todos los literales requeridos para el widget deseado para garantizar una experiencia de usuario completa en el nuevo idioma. * Para resultados consistentes, asegúrate de que las claves de los literales coincidan exactamente con las de los paquetes de traducción por defecto. * Si un paquete de traducción o un esquema no coincide con los requisitos, se aplicará la reserva (español). #### Apéndice Consulta la Referencia de Literales de Widget para una lista completa de las claves de traducción para cada widget por separado en su sección de personalización. *** ## Consejos útiles de personalización ### Personalización de animaciones de carga Es posible modificar las animaciones por defecto (cambiar colores) o reemplazarlas por animaciones personalizadas. #### Cambiar el color de las animaciones de carga Para cambiar el color de las animaciones se utilizarán las variables CSS ofrecidas para dicho fin: * SDK Provider (Loading Ellipsis): `--color-state-loading`. * Componentes Selphi y SelphID: `--wrapper-color-loading`. #### Cambiar animación de carga Las animaciones de carga pueden ser reemplazadas mediante la propiedad `loadingAnimation`. Esta propiedad se encuentra disponible para los componentes: * SDK Provider ([link](/sdks/sdk-web/componentes/sdk-provider/propiedades/loadinganimation.md)). * SelphID Widget ([link](/sdks/sdk-web/componentes/selphid-documentos/propiedades/loadinganimation.md)). * Selphi Widget ([link](/sdks/sdk-web/componentes/selphi-biometria-facial/propiedades/loadinganimation.md)). *** ### Ocultar los tiempos de carga Cuando se utiliza una pantalla de carga personalizada en lugar de las predeterminadas que ofrecen los componentes del SDK, es posible ocultar las pantallas de carga con un elemento superpuesto hasta que el primer widget esté completamente cargado. Esto puede controlarse mediante los eventos de "fin de carga" de los widgets. **Ejemplo (JSX):** overlay controlado por estado; se oculta cuando SelphID emite `moduleLoaded`. ```jsx
{showLoadingOverlay && }
let showLoadingOverlay = true; function handleSelphIDLoaded(ev) { let showLoadingOverlay = false; } ``` {% hint style="info" %} **Nota:** La carga del siguiente componente (normalmente Selphi) puede ocultarse del mismo modo, o bien personalizando la animación de carga del widget mediante la propiedad `loadingAnimation`. {% endhint %} {% hint style="warning" %} **Advertencia:** Asegúrese de que esta superposición no cubra posibles componentes, pantallas de error o flujos de error. Este comportamiento es responsabilidad del implementador. {% endhint %}