Getting started

Once the Web SDK is installed, initial configuration is necessary for it to work correctly in your application.

Define the Component

The library provides a loader to define the custom component. It must be called so that the browser interprets it correctly.

import { defineCustomElements as defineFacephiSdkCustomComponent } from '@facephi/sdk-web-wc/loader';

// Asocia los elementos personalizados al objeto window
defineFacephiSdkCustomComponent(window);

It is recommended to add an alias for the SDK custom component definition.

---

Obtain a License

To use the SDK Web, request a License from the Facephi support team. Once obtained, use the ApiKey provided to configure the SDK:

<facephi-sdk-provider apikey={process.env.FACEPHI_SDK_APIKEY}>
  {/* Aquí se colocarán los widgets */}
</facephi-sdk-provider>

Each License (ApiKey) has associated the credentials necessary for the internal use of the different components and functionalities, linked to the domain where it will be used.

---

How is it used?

The SDK Web follows the standard of Web Components, using a provider component called <facephi-sdk-provider>. This provider wraps all the logic of the SDK and provides the essential functionality needed for the widgets to work correctly.

It is mandatory to include the <facephi-sdk-provider> in your application. Without it, the widgets will not work correctly. This provider acts as the base layer for integrating the SDK into your application.

---

Integration Example

To get started, wrap the <facephi-sdk-provider> around your application or the widgets you want to use. Below is an example of widget Integration Selphid inside the provider:

import { Language, TypeFamily } from '@facephi/sdk-web-wc';

<facephi-sdk-provider
  apikey={process.env.FACEPHI_SDK_APIKEY}
  type={TypeFamily.onboarding}
  language={Language.en}
>
  <facephi-selphid-widget />
</facephi-sdk-provider>

This structure ensures that the SelphID Widget works correctly with all the required functionality provided by the SDK provider.

You can find all the configuration information for the SDK Provider Component in this section.

For more complete Integration examples, see the programming examples page.

---

Next steps

• Configure the Components and modules according to your needs.

• Explore the Integration examples.

• Review the specific sections of each module such as Selphi, SelphID or Video Recording.