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

# Integración

Esta guía ofrece instrucciones detalladas paso a paso para instalar e integrar el SDK Loader en tu aplicación. Para una visión general de los conceptos y requisitos previos, consulta la guía de [Inicio rápido](/productos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/inicio-rapido.md).

## Instalación

> **Nota**: Antes de continuar, asegúrate de cumplir los [requisitos previos](/productos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/inicio-rapido.md) y de tener listo tu token de autenticación.

### Configurar el registro NPM

El paquete del SDK Loader está alojado en un repositorio NPM privado. Crea un archivo `.npmrc` en la raíz de tu proyecto con la siguiente configuración:

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

> Sustituye `[YOUR_TOKEN]`, `[YOUR_USERNAME]` y `[YOUR_EMAIL]` por las credenciales proporcionadas por Facephi.

### Instalar el paquete

Instala el SDK Loader con tu gestor de paquetes preferido:

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

> **Nota**: También se pueden utilizar otros gestores como Bun o Yarn.

***

## Pasos de integración

{% stepper %}
{% step %}

### Crear un elemento contenedor

Añade un elemento contenedor en tu HTML o componente donde se renderizará el SDK:

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

{% endstep %}

{% step %}

### Inicializar el SDK

Importa y llama a `loadSdk` con tu configuración:

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

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

{% endstep %}

{% step %}

### Gestionar eventos del SDK

Escucha los eventos emitidos por el SDK:

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

Para más opciones de configuración del SDK, consulta la sección [Configuración del SDK](/productos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/configuracion-del-sdk.md) más abajo.
{% endstep %}
{% endstepper %}

***

## Ejemplo completo (React + Vite)

Aquí tienes un ejemplo completo de una integración básica con React y 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>
  );
}
```

***

## Servidor de desarrollo

Ejecuta el servidor de desarrollo:

```bash
npm run dev
```

Navega a `http://localhost:3000/`. La aplicación se recargará automáticamente si modificas alguno de los archivos fuente.

***

## Build

Genera el build del proyecto para producción:

```bash
npm run build
```

Los artefactos del build se guardarán en el directorio `dist/`.

***

## Integraciones por framework

El SDK Loader puede integrarse en cualquier framework moderno. Para guías específicas por framework:

* [**Integración con Next.js**](/productos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/integrations/nextjs.md): Consideraciones de renderizado en servidor y ejemplos con App Router / Pages Router.

***

## Siguientes pasos

* Consulta la [Configuración del SDK](/productos/idv-suite/flujos-and-integraciones/configuracion-tecnica-del-cliente/solucion-web/sdk-loader-idv/configuracion-del-sdk.md) para opciones de configuración avanzada
* Visita los [Ejemplos de programación del SDK Facephi](https://github.com/facephi/sdk-web-examples) para más ejemplos de implementación