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

# Primeros pasos

## Definir el Componente

La biblioteca proporciona un **loader** para definir el componente personalizado. Este debe ser llamado para que el navegador lo interprete correctamente.

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

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

Se recomienda añadir un alias para la definición del componente personalizado del SDK.

***

## Obtener una Licencia

Para utilizar el SDK Web, solicita una **licencia** al equipo de soporte de Facephi. Una vez obtenida, utiliza la **ApiKey** proporcionada para configurar el SDK:

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

> Cada licencia (ApiKey) tiene asociada las credenciales necesarias para el uso de los diferentes componentes y funcionalidades de manera interna, vinculados al dominio en el que se usará.

***

## ¿Cómo se usa?

El SDK Web sigue el estándar de **Web Components**, utilizando un componente proveedor llamado `<facephi-sdk-provider>`. Este proveedor envuelve toda la lógica del SDK y proporciona la funcionalidad esencial necesaria para que los widgets funcionen correctamente.

Es **obligatorio** incluir el `<facephi-sdk-provider>` en tu aplicación. Sin él, los widgets **no funcionarán correctamente**. Este proveedor actúa como la capa base para integrar el SDK en tu aplicación.

***

### Ejemplo de Integración

Para comenzar, envuelve el `<facephi-sdk-provider>` alrededor de tu aplicación o de los widgets que deseas usar. A continuación, un ejemplo de integración del widget **Selphid** dentro del proveedor:

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

Esta estructura asegura que el widget SelphID funcione correctamente con toda la funcionalidad requerida proporcionada por el proveedor del SDK.

Toda la información de configuración del Componente SDK Provider la podrás encontrar en [esta sección](/sdks/sdk-web/componentes/sdk-provider.md).

Para ejemplos más completos de integración, consulta la [página de ejemplos de programación](/sdks/sdk-web/frameworks-y-samples.md).

***

## Próximos pasos

* Configura los Componentes y módulos según tus necesidades.
* Explora los [Ejemplos de integración](/productos/landing/ejemplos-de-integracion.md).
* Revisa los apartados específicos de cada módulo como [Selphi](/sdks/sdk-web/componentes/selphi-biometria-facial.md), [SelphID](/sdks/sdk-web/componentes/selphid-documentos.md) o [Video Recording](/sdks/sdk-web/componentes/video-recording-video-grabacion.md).

<br>