> 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 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 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 top section of the Widget.
{% endhint %}

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

***