> 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/ejemplos-de-integracion/uso-basico.md).

# Basic use

The following guide shows an example of Integration in a TypeScript + VITE environment. This same process can be carried out in current frameworks with the differences required by the environment (Syntax, component definitions, etc.).

This example is based on a basic Integration. It is possible to change the behavior of the Flow with the required configurations or changes.

In this Integration, the SDK Provider, SelphID Widget, Selphi Widget and Tracking (included in SDK Provider) components will be used.

***

### Component installation

Install the SDK Web library:

```bash
npm install @facephi/sdk-web-wc@latest
```

{% hint style="info" %}
Do not forget to prepare the file `.npmrc` with the credentials for the download.
{% endhint %}

Define the custom elements:

```javascript
// main.ts
import '@facephi/sdk-web-wc';
import { defineCustomElements as defineFacephiSDKCustomElements } from '@facephi/sdk-web-wc/loader';

defineFacephiSDKCustomElements(window);
```

***

### Integration and configuration of the SDK Provider

Integrate the SDK Provider and configure it:

{% code title="App.tsx" %}

```tsx
import { Language, TrackingSteps, TypeFamily } from '@facephi/sdk-web-wc';

<section className="facephi-sdk-provider">
  <facephi-sdk-provider
    apikey={import.meta.env.VITE_LICENSE_KEY}
    steps={`${TrackingSteps.start},${TrackingSteps.selphidWidget},${TrackingSteps.selphiWidget},${TrackingSteps.finish}`}
    type={TypeFamily.onboarding}
    customerId={customerId}
    language={Language.en}
  />
</section>
```

{% endcode %}

SDK Provider logic:

{% code title="facephi-sdk-provider.ts" %}

```typescript
import { initSelphidWidget } from './facephi-selphid-widget';
import { ErrorData } from '@facephi/sdk-web-wc';

(async () => {
	await customElements.whenDefined('facephi-sdk-provider');

	// SDK Provider event handlers
	function handleEmitData(event: CustomEvent<{ operationId: string; sessionId: string; extraData: string }>) {
		const result = event.detail;
		console.log('[FACEPHI SDK PROVIDER] onEmitData', result);
	}

	function handleEmitError(event: CustomEvent<ErrorData>) {
		const result = event.detail;
		console.error('[FACEPHI SDK PROVIDER] onEmitError', result);
	}

	const sdkProvider = document.querySelector('facephi-sdk-provider');
	if (sdkProvider) {
		sdkProvider.addEventListener('emitData', handleEmitData);
		sdkProvider.addEventListener('emitError', handleEmitError);
		
		// Initializes the SelphID Widget
		initSelphidWidget(sdkProvider);
	}
})();
```

{% endcode %}

SelphID Widget logic:

{% code title="facephi-selphid-widget.ts" %}

```typescript
import {
	Language,
	type ExtractionFinishEvent,
} from '@facephi/selphid-web-component';
import { initSelphiWidget } from './facephi-selphi-widget';

export function initSelphidWidget(sdkProvider: HTMLElement) {
	sdkProvider.innerHTML = '';
	const selphidWidget = document.createElement('facephi-selphid-widget');
	selphidWidget.country = 'GB';
	sdkProvider.appendChild(selphidWidget);

	// SELPHID EVENTS
	function handleExtractionFinish(event: CustomEvent<ExtractionFinishEvent>) {
		const result = event.detail.detail;
		Logger.printLog(LoggerType.SELPHID, 'extractionFinish', result);

		// Initialize Selphi
		initSelphiWidget(sdkProvider);
	}
	
	// other events

	if (selphidWidget) {
		selphidWidget.addEventListener('extractionFinish', handleExtractionFinish);
	}
}
```

{% endcode %}

Selphi Widget logic

{% code title="facephi-selphi-widget.ts" %}

```typescript
import {
	Language,
	type ExtractionFinishEvent,
} from '@facephi/selphi-web-component';

export function initSelphiWidget(sdkProvider: HTMLElement) {
	sdkProvider.innerHTML = '';
	const selphiWidget = document.createElement('facephi-selphi-widget');
	selphiWidget.stabilization = true;
	selphiWidget.interactible = true;
	selphiWidget.previewImage = true;
	selphiWidget.timeout = 30000;
	selphiWidget.showLog = false;
	sdkProvider.appendChild(selphiWidget);

	//SELPHI EVENTS
	function handleExtractionFinish(event: CustomEvent<ExtractionFinishEvent>) {
		const result = event.detail.detail;
		console.log('[FACEPHI SELPHI] extractionFinish', result);

		// Finish onboarding process with any logic
		sdkProvider.innerHTML = '<div class="onboarding-finished">ONBOARDING FINISHED</div>';
	}
	
	// Other events

	if (selphiWidget) {
		selphiWidget.addEventListener('extractionFinish', handleExtractionFinish);
	}
}
```

{% endcode %}

{% hint style="info" %}
This is just an approximation. It is possible to use different types of integration or syntax.

In this example, only the *happy path*, so the rest of the events also need to be integrated in real implementations.
{% endhint %}

***

### Integration and configuration of component Flow

This example is an Integration of the *Happy Path* for an Onboarding carried out through SelphID and Selphi.

First, with the instantiation of the SDK Provider, the internal logic will be generated to initialize all services (Loading, Licensing, Tracking Initialization, etc.).

When the Provider emits the event `emitData`, the first widget (SelphID) will be loaded through the logic of `initSelphidWidget(sdkProvider)`.

Once the user has completed the capture process, the SelphID Widget will close while emitting the event `extractionFinish`. In this event, the data will be handled as needed and the next component (Selphi) will be loaded with the method `initSelphiWidget(sdkProvider);`.

Finally, when the user finishes carrying out the facial pattern extraction, the obtained data will be handled as needed and the Flow will be ended by continuing with whatever logic is desired.

#### Flow between components

In more complete environments such as current frameworks, it is possible to use Components, Routers, Stores and all kinds of tools to carry out that Flow.

The Facephi team recommends using Components and routers for a more modular, simple, and fast Integration in the desired framework.

***

### Behavior testing

Once the Integration is finished, it is highly recommended to test in the application development environment that the operation is as expected, taking into account the possible configurations and scenarios that may arise in the Flow of end users.

***