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

# Customization

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

***

### Style customization

The Selphi and SelphID Widgets can be customized with the following CSS variables applied to the tag `facephi-sdk-provider`. See the full list of CSS variables on the page of [SDK Provider CSS Customization](/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 literal configuration, including the default translation templates, in the section on [SDK Web customization](/docs.facephi-en/sdks/sdk-web/personalizacion.md#plantillas-de-literales).

***

### Graphic resource customization

The animations used in the SelphID Widget can be replaced 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
// Example in 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" %}
Note: Configure `--wrapper-display-logo` to `"block"` to display the logo in the upper section of the widget.
{% endhint %}

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

***