> 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/componentes/selphid-documentos/personalizacion.md).

# Personalización

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](/sdks/sdk-web/personalizacion.md).

***

### Configuración de textos

Los textos predeterminados del componente se pueden reemplazar con el uso de un archivo `JSON` de idioma personalizado referenciado en la propiedad `language` en el elemento SDK Provider (`facephi-sdk-provider`).

```jsx
<facephi-sdk-provider
  language={'/i18n/custom-strings.json'}
  ...
></facephi-sdk-provider>
```

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

Consulta la información referente a la configuración de literales, incluidas las plantillas de traducción por defecto, en la sección de [personalización del SDK Web](/sdks/sdk-web/personalizacion.md#plantillas-de-literales).

***

### 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`.

Para las animaciones es recomendable utilizar la propiedad [`customAnimations` del sdk provider](/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md).

```jsx
// 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>
```

{% hint style="info" %}
Nota: Configura `--wrapper-display-logo` a `"block"` para mostrar el logo en la sección superior del widget.
{% endhint %}

{% hint style="info" %}
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.
{% endhint %}

***