Customization

Customization of the SelphID Widget component.

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.

---

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).

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

---

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.

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

Configure --wrapper-display-logo to "block" to display the logo in the top section of the Widget.

The value of tutorialAnimations must be in string array format (string[]). Use JSX, framework variables, or JavaScript logic to implement its value.

---