> 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/products/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/integracion.md).

# Integration

This guide provides detailed step-by-step instructions to install and integrate the SDK Loader into your application. For an overview of the concepts and prerequisites, see the guide to [Quick Start](/docs.facephi-en/products/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/inicio-rapido.md).

## Installation

> **Note**: Before continuing, make sure you meet the [prerequisites](/docs.facephi-en/products/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/inicio-rapido.md) and have your authentication token ready.

### Set up the NPM registry

The SDK Loader package is hosted in a private NPM repository. Create a file `.npmrc` in the root of your project with the following configuration:

```plaintext
@facephi:registry=https://facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:_password=[YOUR_TOKEN]
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:username=[YOUR_USERNAME]
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:email=[YOUR_EMAIL]
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:always-auth=true
```

> Replace `[YOUR_TOKEN]`, `[YOUR_USERNAME]` and `[YOUR_EMAIL]` with the credentials provided by Facephi.

### Install the package

Install the SDK Loader with your preferred package manager:

```bash
npm install @facephi/sdk-loader
```

> **Note**: Other managers such as Bun or Yarn can also be used.

***

## Integration steps

{% stepper %}
{% step %}

### Create a container element

Add a container element in your HTML or component where the SDK will be rendered:

```html
<div id="sdk-container"></div>
```

{% endstep %}

{% step %}

### Initialize the SDK

Import and call `loadSdk` with your configuration:

```typescript
import { loadSdk } from '@facephi/sdk-loader';

const sdkElement = await loadSdk({
  apiKey: 'YOUR_APIKEY',
  containerId: 'sdk-container',
});
```

{% endstep %}

{% step %}

### Manage SDK events

Listen to the events emitted by the SDK:

```typescript
if (sdkElement) {
  sdkElement.addEventListener('emitIDVIntegration', (event) => {
    console.log('emitIDVIntegration:', event);
  });
}
```

For more SDK configuration options, see the section [SDK Configuration](/docs.facephi-en/products/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/configuracion-del-sdk.md) below.
{% endstep %}
{% endstepper %}

***

## Complete example (React + Vite)

Here is a complete example of a basic integration with React and Vite:

**App.tsx:**

```tsx
import { useEffect } from 'react';
import { loadSdk } from '@facephi/sdk-loader';

export default function App() {
  useEffect(() => {
    const initializeSdk = async () => {
      const apiKey = import.meta.env.VITE_API_KEY || '';

      // Cargar el SDK usando el paquete sdk-loader
      // El sdk-loader cargará @facephi/sdk-web-wc desde la CDN
      // y creará el elemento facephi-sdk-provider
      const sdkElement = await loadSdk({
        apiKey,
        containerId: 'sdk-container',
      });

      if (sdkElement) {
        // Escuchar eventos del SDK
        sdkElement.addEventListener('emitIDVIntegration', (event) => {
          console.log('emitIDVIntegration:', event);
        });
      }
    };

    initializeSdk();
  }, []);

  return (
    <main className="main">
      <section className="sdk-section">
        <div id="sdk-container" />
      </section>
    </main>
  );
}
```

***

## Development server

Run the development server:

```bash
npm run dev
```

Go to `http://localhost:3000/`. The application will automatically reload if you modify any of the source files.

***

## Build

Generate the project build for production:

```bash
npm run build
```

The build artifacts will be saved in the `dist/`.

***

## Framework integrations

The SDK Loader can be integrated into any modern framework. For framework-specific guides:

* [**Next.js integration**](/docs.facephi-en/products/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/integrations/nextjs.md): Server-side rendering considerations and examples with App Router / Pages Router.

***

## Next steps

* See the [SDK Configuration](/docs.facephi-en/products/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/configuracion-del-sdk.md) for advanced configuration options
* Visit the [Facephi SDK programming examples](https://github.com/facephi/sdk-web-examples) for more implementation examples