Customization

Customization of the SelphID Widget component.

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.

---

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

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

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

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.

---