> 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/introduccion/primeros-pasos.md).

# Getting started

## Define the Component

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

```js
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 SDK Web, request a **license** from the Facephi support team. Once obtained, use the **ApiKey** provided to configure the SDK:

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

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

***

## How is it used?

SDK Web follows the standard of **Web Components**, using a provider component called `<facephi-sdk-provider>`. This provider wraps all the SDK logic 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** within the provider:

```jsx
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](/docs.facephi-en/sdks/sdk-web/componentes/sdk-provider.md).

For more complete integration examples, see the [programming examples page](/docs.facephi-en/sdks/sdk-web/frameworks-y-samples.md).

***

## Next steps

* Configure the Components and modules according to your needs.
* Explore the [Integration examples](/docs.facephi-en/products/landing/ejemplos-de-integracion.md).
* Review the specific sections of each module such as [Selphi](/docs.facephi-en/sdks/sdk-web/componentes/selphi-biometria-facial.md), [SelphID](/docs.facephi-en/sdks/sdk-web/componentes/selphid-documentos.md) or [Video Recording](/docs.facephi-en/sdks/sdk-web/componentes/video-recording-video-grabacion.md).

<br>