Web SDK Slots

The .<jumio-sdk> element supports slots that you can use to customize the customer journey The end-user experience for uploading required credentials. Customers can integrate the Jumio Web Client and/or SDKs into their apps, or implement the customer journey themselves and use Jumio APIs to upload credentials and initiate transactions.. Slots are custom html elements with a named "slot" attribute. These slot elements are embedded within the <jumio-sdk> tags, as shown in the examples below. Currently these slots are supported:

Logging
Navigation
Theme

Logging

Two custom elements are available for configuring the logging behavior of the Web SDK:

<jumio-sdk-logger-console slot="logger" data-enabled="true"></jumio-sdk-logger-console>

Adding and enabling the console logger will enable end-user events to be accessed from the browser console. This is often useful for debugging purposes. For example, the data-enabled attribute may be set to true when your application is deployed to a development or staging environment, and then set to false when deployed to production.
<jumio-sdk-logger-datadog slot="logger" data-enabled="true" data-config='{"applicationId": "123"}'></jumio-sdk-logger-datadog>

The DataDog logger is deployed by default so events are available to Jumio Support. If your organization has a DataDog application and you want events to be logged to your application instead of Jumio's, add this element and provide your own application Id as value for the data-config attribute. This element may also be used to disable DataDog logging altogether by setting the data-enabled attribute to false. Be aware that doing so will limit the ability of Jumio Support to assist with end-user issues.

Either or both may be embedded in the <jumio-sdk> element to enable the logging.

Example: Logger Slot

<jumio-sdk dc="..." token="...">
  <!--
  Enabling the console logger.
  This logger is disabled by default
  -->
  <jumio-sdk-logger-console slot="logger" data-enabled="true"></jumio-sdk-logger-console>

  <!--
  Enabling the datadog logger explicitly and overriding its configuration.
  This logger is enabled and pre-configured by default to log events to the Jumio application.
  -->
  <jumio-sdk-logger-datadog
    slot="logger"
    data-enabled="true"
    data-config='{"applicationId": "123"}'
  ></jumio-sdk-logger-datadog>
</jumio-sdk>

Navigation

The Jumio SDK supports either:

A browser-based navigation system leveraging the browser's History API (default).
```
<jumio-sdk dc="..." token="...">
  
  <jumio-sdk-navigation-config-browser slot="navigation"></jumio-sdk-navigation-config-browser>
</jumio-sdk>
```
With this setup, Jumio SDK navigation is tightly integrated with the browser's history. Consequently, every transition between different steps in the application gets reflected in the browser's URL. This allows users to utilize the browser's forward and backward arrows for navigating between different states of the Jumio SDK.
An in-memory navigation system.
```
<jumio-sdk dc="..." token="...">
  
  <jumio-sdk-navigation-config-memory slot="navigation"></jumio-sdk-navigation-config-memory>
</jumio-sdk>
```
This configuration establishes an in-memory navigation system within the Jumio SDK. As the user transitions between different steps in the SDK, the navigation actions do not affect the browser's history.

Theme

Jumio SDK allows customization of its visual aesthetic through theme configuration. You can specifically set the color scheme of the SDK to light, dark, or auto, thereby tailoring the Jumio SDK to seamlessly integrate into your application's user interface or the user's preferences. For more details on browser color preferences, refer to this MDN Web Docs guide.

Automatic Mode (auto): The default theme configuration is to simply use the theme preferences in the browser or operating system.

Light Mode (light): Setting the color scheme to light explicitly displays Jumio SDK in light colors, irrespective of the browser color scheme preferences.

<jumio-sdk dc="..." token="...">
  <!-- Setting the Light theme -->
  <x-ds-color-scheme-config slot="theme" data-color="light"></x-ds-color-scheme-config>
</jumio-sdk>

Dark Mode (dark): Choosing dark as the color scheme will present Jumio SDK in dark colors, overriding the color preferences of the browser.

<jumio-sdk dc="..." token="...">
  <!-- Setting the Dark theme -->
  <x-ds-color-scheme-config slot="theme" data-color="dark"></x-ds-color-scheme-config>
</jumio-sdk>