Personalización

Personalización del componente SelphID Widget.

El Widget SelphID es fácilmente personalizable a través de variables CSS y algunas propiedades.

---

Personalización de estilos

Los Widgets Selphi y SelphID se pueden personalizar con las siguientes variables CSS aplicadas a la etiqueta facephi-sdk-provider. Consulta la lista completa de variables CSS en la página de Personalización CSS del SDK Provider.

---

Configuración de textos

Los textos por defecto del componente Widget pueden ser reemplazados con el uso de un archivo JSON de idioma personalizado, referenciado en la propiedad language:

<facephi-selphid-widget
  language="/assets/i18n/custom-strings.json"
  ...
></facephi-selphid-json>

Traducciones por defecto: Inglés (selphid-en.json), Español (selphid-es.json), Portugués (selphid-pt.json) (guardar como archivo).

4KB

selphid-en.json

Open

5KB

selphid-es.json

Open

5KB

selphid-pt.json

Open

Sobrescritura parcial

Para sobrescribir solo algunas cadenas de texto y mantener el resto con los valores por defecto, usaremos el siguiente formato:

{
  "es": {
    "START": "INICIO",
    "Initializing": "Cargando..."
  }
}

El id principal del objeto de traducciones puede ser "en", "es" o "pt". Otros valores no serán soportados y el widget usará las traducciones por defecto (Español).

Sobrescritura total

Para sobrescribir todos los textos en el widget, usa el siguiente formato:

{
  "Logo": "Logo de la Compañía",
  "Initializing": "Cargando...",
  "START": "COMENZAR",
  (...)
}

Si falta una cadena de texto, el widget no cargará ningún texto en ese lugar.

---

Personalización de recursos gráficos

Las animaciones utilizadas en el Widget SelphID pueden ser reemplazadas con el uso de las propiedades logo, loadingAnimation y tutorialAnimations.

// Ejemplo en JSX
<facephi-selphid-widget
  logo="/assets/images/logo.png"
  loadingAnimation="/assets/images/loading.gif"
  tutorialAnimations={ ["/assets/images/tutorial1.gif", "/assets/images/tutorial2.gif", "/assets/images/tutorial3.gif"] }
  ...
></facephi-selphid-widget>

Nota: Configura --wrapper-display-logo a "block" para mostrar el logo en la sección superior del widget.

Nota: El valor de tutorialAnimations debe estar en formato de array de strings (string[]). Usa JSX, variables de tu framework o lógica de JavaScript para implementar su valor.

---

🎨 Ejemplos de personalización del componente SelphID

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