> 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/docs.facephi-en/sdks/sdk-web/componentes/selphi-biometria-facial/personalizacion.md).

# Customization

## Customization of the Selphi Widget

The Selphi Widget is easily customizable through CSS variables and some properties.

***

### Style customization

Selphi and SelphID Widgets can be customized with the following CSS variables applied to the tag `facephi-sdk-provider`. Check the full list of CSS variables on the page [Customization of the SDK Provider CSS](/docs.facephi-en/sdks/sdk-web/personalizacion.md).

***

### Text configuration

The component's default texts can be replaced by using a file `JSON` of custom language referenced in the property `language` in the SDK Provider element (`facephi-sdk-provider`).

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

If any string is missing, the widget will not load any text in that place.

See the information regarding the configuration of literals, including the default translation templates, in the section of [SDK Web customization](/docs.facephi-en/sdks/sdk-web/personalizacion.md#plantillas-de-literales).

***

### Customization of graphic resources

The animations used in Selphi Widget can be replaced by using the properties `logo`, `loadingAnimation` and `tutorialAnimations`.

For animations, it is recommended to use the property [`customAnimations` of the SDK provider](/docs.facephi-en/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md).

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

{% hint style="info" %}
Configure `--wrapper-display-logo` to `"block"` to display the logo in the top section of the Widget.
{% endhint %}

{% hint style="info" %}
The value of `tutorialAnimations` must be in string array format (`string[]`). Use JSX, framework variables, or JavaScript logic to implement its value.
{% endhint %}

***