Integration

This guide provides detailed step-by-step instructions for installing and integrating the SDK Loader into your application. For an overview of the concepts and prerequisites, see the Quick Start.

Installation

Note: Before continuing, make sure you meet the prerequisites and have your authentication token ready.

Configure 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:

@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:

npm install @facephi/sdk-loader

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

---

Integration steps

1

Create a container element

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

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

2

Initialize the SDK

Import and call loadSdk with your configuration:

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

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

3

Manage SDK events

Listen to the events emitted by the SDK:

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

For more SDK configuration options, see the section SDK Configuration below.

---

Complete example (React + Vite)

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

App.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 || '';

      // Load the SDK using the sdk-loader package
      // sdk-loader will load @facephi/sdk-web-wc from the CDN
      // and will create the facephi-sdk-provider element
      const sdkElement = await loadSdk({
        apiKey,
        containerId: 'sdk-container',
      });

      if (sdkElement) {
        // Listen to SDK events
        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:

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:

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:

• Integration with Next.js: Server-side rendering considerations and examples with App Router / Pages Router.

---

Next steps

• Check the SDK Configuration for advanced configuration options

• Visit the Facephi SDK programming examples for more implementation examples