Personalización

Personalización del componente SelphID Widget.

Personalización del Selphi Widget

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

---

Personalización de estilos

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

---

Configuración de texto

Los textos predeterminados del componente Widget se pueden reemplazar con el uso de un archivo JSON de idioma personalizado referenciado en la propiedad language:

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

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

8KB

selphi-en.json

Open

8KB

selphi-es.json

Open

8KB

selphi-pt.json

Open

Anulación parcial

Para anular solo algunas cadenas y mantener el resto con los valores predeterminados, 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 compatibles y el widget usará las traducciones predeterminadas (español).

Anulación total

Para anular todos los textos del widget, usa el siguiente formato:

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

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

---

Personalización de recursos gráficos

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

<facephi-selphi-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-selphi-widget>

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

El valor de tutorialAnimations debe estar en formato de array de cadenas (string[]). Usa JSX, variables de frameworks o lógica de JavaScript para implementar su valor.

---

🎨 Ejemplos de personalización del componente Selphi

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