Personalización

Personalización del SDK Web.

El SDK Provider es fácilmente personalizable a través de variables CSS y sus propiedades.

Personalización de estilos

Los componentes SDK Provider, Selphi y SelphID pueden ser personalizados con las siguientes variables CSS aplicadas a la etiqueta facephi-sdk-provider:

Ejemplo:

facephi-sdk-provider {
  --wrapper-color-primary: #3f2eff;
  --wrapper-color-secondary: #ffffff;
  --wrapper-color-hover: rgb(106, 93, 250);
}

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.

Variables de Color

Variables CSS

Widget

Valor por defecto

Descripción

--wrapper-color-background

Selphi, SelphID, FileUploader

#FFFFFF

Color de fondo del widget principal.

--wrapper-color-primary

Selphi, SelphID, FileUploader

#3167FC

Color de los elementos primarios de los widgets.

--wrapper-color-secondary

Selphi, SelphID

#FFFFFF

Color de los elementos secundarios de los widgets.

--wrapper-color-hover

Selphi, SelphID, FileUploader

#2B50B6

Color aplicado al efecto hover sobre botones.

--wrapper-color-primary-text

Selphi, SelphID, FileUploader

#2B303C

Color del texto principal de los widgets.

--wrapper-color-secondary-text

Selphi, SelphID, FileUploader

#1D2C4D

Color del texto secundario de los widgets.

--wrapper-color-progress-bar

Selphi

#3167FC

Color de la barra de progreso durante la extracción.

--wrapper-color-progress-bar-background

Selphi

transparent

Color de fondo de la barra de progreso alrededor de la transmisión de la cámara.

--wrapper-color-capture-success

Selphi, SelphID

07A13A / #0F8837

Color del borde cuando se captura.

--wrapper-color-capture-fail

Selphi, SelphID, FileUploader

EB184C / #DD3631

Color del borde cuando falla la captura del documento. / Colores del texto y de la barra de progreso cuando la extracción no se realiza correctamente.

--wrapper-color-capture-warning

Selphi

#EB6A00

Color de fallo en intento prueba de vida cuando Liveness esta activado.

--wrapper-color-liveness-arrow

Selphi

#5FC982

Color de la flecha de dirección cuando Livennes está activado.

--wrapper-color-diagnostic-primary

SelphID

#EAEEF6

Color de fondo del texto informativo.

--wrapper-color-diagnostic-secondary

SelphID

#17223B

Color de fondo del texto informativo si cameraOverflow está habilitado.

--wrapper-color-background-camera

SelphID

#10192B

Color de fondo de la transmisión de vídeo en Capture View.

--wrapper-color-background-preview-image

SelphID

#FFFFFF

Color de fondo de la imagen de vista previa.

--wrapper-color-camera-overflow

SelphID

#10192b85

Color de fondo del widget en la vista Capture si cameraOverflow está habilitado.

--wrapper-color-camera-overflow-filter

SelphID

#00000030

Filtro de fondo del widget en la vista Capture si cameraOverflow está habilitado.

--wrapper-color-error-icon

Selphi, SelphID

#F24C45

Color del icono de error principal en Error-view.

--wrapper-color-browser-icon-background

Selphi, SelphID

transparent

Color de fondo del icono del navegador en la vista BrowserError.

--wrapper-color-debug-error-message

Selphi, SelphID

#FF0000

Color del mensaje de UnknownInternalError-view cuando debug es activado.

--wrapper-color-loading-camera-background

Selphi

#000000

Color de fondo de la cámara antes de que se cargue completamente en DOM.

Variables de Texto

Variables CSS

Widget

Valor por defecto

Descripción

--wrapper-primary-font

Selphi, SelphID, FileUploader

"Poppins-Regular"

Fuente aplicada en los textos principales de los widgets.

--wrapper-primary-font-weight

Selphi, SelphID

400

Grosor de fuente aplicado a la fuente principal.

--wrapper-secondary-font

Selphi, SelphID, FileUploader

"Poppins-Semibold"

Fuente aplicada en los textos secundarios de los widgets.

--wrapper-secondary-font-weight

Selphi, SelphID, FileUploader

600

Grosor de fuente aplicado a la fuente secundaria.

--wrapper-text-font-size

Selphi, SelphID

1em

Tamaño de la fuente del texto de los widgets.

--wrapper-title-font-size

Selphi, SelphID

1.4em

Tamaño de la fuente del texto del título de los widgets.

--wrapper-title-font-size-mobile

SelphID

1.125em

Tamaño de la fuente del título del texto en el widget en resoluciones móviles.

--wrapper-line-height

Selphi, SelphID

1.3125em / 1.75em

Altura de la línea de texto de los widgets.

--wrapper-vertical-align

Selphi, SelphID

center

Alineación vertical del texto en su contenedor respectivo.

--wrapper-text-align

Selphi, SelphID

center

Alineación horizontal del texto en su contenedor respectivo.

Variables varias

Variables CSS

Widget

Valor por defecto

Descripción

--wrapper-document-border-width

SelphID

0.225em

Ancho del borde de la transmisión de vídeo en el widget.

--wrapper-diagnostic-border-width

SelphID

0.175em

Ancho del borde del widget del mensaje informativo.

--wrapper-progress-bar-width

Selphi

0.5em

Ancho de la barra de progreso.

--wrapper-border-radius

Selphi, SelphID

0.5em

Radio del borde de los botónes.

--wrapper-error-icon-max-width

Selphi, SelphID

unset

Ancho máximo del icono de Error-view.

Color de animación de carga

Variables CSS

Widget

Valor por defecto

Descripción

--wrapper-color-loading

Selphi, SelphID

#1D2C4D

Color principal de la animación de carga predeterminada.

Colores de animación de tutorial

Variables CSS

Widget

Valor por defecto

Descripción

--wrapper-color-tutorial-background

Selphi, SelphID

#3167FC

Color de fondo en las animaciones predeterminadas del tutorial.

--wrapper-color-tutorial-success

SelphID

#07A13A

Color de la capa de éxito en las animaciones predeterminadas del tutorial.

--wrapper-color-tutorial-progress

Selphi

#5FC982

Color de la barra de progreso en las animaciones predeterminadas del tutorial.

--wrapper-color-tutorial-tshirt

Selphi

#3167FC

Color de la camiseta en las animaciones predeterminadas del tutorial.

--wrapper-color-tutorial-earrings

Selphi

#F4A485

Color de los pendientes y las gafas de sol en las animaciones predeterminadas del tutorial.

Alternar logo

Variables CSS

Widget

Valor por defecto

Descripción

--wrapper-display-logo

Selphi, SelphID

none

Utiliza el valor del Block para mostrar el logotipo o none para ocultarlo.

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:

<facephi-sdk-provider language={Language.en}></facephi-sdk-provider>

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:

// Directorio local
<facephi-sdk-provider  language="/public/assets/kr.json"></facephi-sdk-provider>
// CDN
<facephi-sdk-provider  language="https://your-cdn.com/assets/kr.json"></facephi-sdk-provider>

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

Cada obeto permitirá la edición total o parcial de los textos utilizados dentro de sus componentes.

Estructura de ejemplo:

{
  "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:

{
  "sdk": "en",
  "selphi": "pt"
}

2. Sobreescrituras de Traducción Parciales: Esto proporciona una forma de sobreescribir literales específicos para un widget/idioma.

{
  "sdk": "en",
  "selphi": {
    "en": {
      "Initializing...": "Espera un segundo..."
    }
  },
  "selphid": {
    "en": {
      "Initializing...": "Espera un segundo..."
    }
  }
}

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.

3. Añadir un Nuevo Idioma: Para definir un idioma completamente nuevo, proporciona todos los literales requeridos para el/los widget(s) correspondiente(s).

{
  "sdk": {
    "Literal 1": "Traducción para literal 1",
    "Literal 2": "Traducción para literal 2",
    "...": "..."
  }
}

Ejemplo para Coreano:

{
  "sdk": {
    "The process has been completed": "프로세스가 완료되었습니다",
    "Ready": "안녕, 친구",
    // ... todos los demás literales
  }
}

Al añadir un nuevo idioma, debes proporcionar todos los literales requeridos para cada widget afectado.

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:

{
  "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.

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 (guardar como archivo):

8KB

sdk-provider-literals.json

Open

Dentro del objeto se configuran el resto de componentes internos:

Video Grabación.
File Uploader.

Literales de Selphi (guardar como archivo):

5KB

sdk-selphi-literals.json

Open

Literales de SelphID (guardar como archivo):

3KB

sdk-selphid-literals.json

Open

Ejemplos de Casos de Uso

Cambiar Componente a Inglés

<facephi-sdk-provider  language={Language.en}></facephi-sdk-provider>

Añadir Coreano Usando un JSON de CDN

<facephi-sdk-provider  language="https://your-cdn.com/assets/kr.json"></facephi-sdk-provider>

Donde kr.json es:

{
  "sdk": {
    // ... Traducciones coreanas para todos los literales del SDK
  }
}

Combinar Diferentes Escenarios

{
  "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.

🎨 Ejemplos de personalización del SDK Web

Incluir ejemplos prácticos de código o configuraciones...

PreviousCódigos de error NextSelphID (Documentos)

Last updated 13 days ago