> 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/componentes/guia-rapida.md).

# Quick guide

The SDK Provider is a custom component that includes a collection of widgets for use. Those widgets are also custom components.

***

## SDK Web Components

With the integration of Facephi SDK Web, you can achieve a fully customizable Onboarding or Authentication application through the components the library offers.

In the following example, we see a brief implementation of an Onboarding Flow, where the user will start the flow by capturing their Identity document with SelphID and will finish with capturing the facial pattern in Selphi with minimal configuration.

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

<facephi-sdk-provider
  apikey={process.env.FACEPHI_SDK_APIKEY}
  type={TypeFamily.onboarding}
  steps={`${TrackingSteps.start},${TrackingSteps.selphidWidget},${TrackingSteps.selphiWidget},${TrackingSteps.finish}`}
  customerId={uniqueUserId}
  onEmitData={(event) => {
    console.log('Facephi SDK Provider:', event.detail);
    startSelphID();
  }}
/>
```

If you need to mount the widgets dynamically (without JSX), assign the properties in JavaScript:

```typescript
const sdkProvider = document.querySelector('facephi-sdk-provider');

function startSelphID() {
  const selphidWidget = document.createElement('facephi-selphid-widget');
  selphidWidget.disableTutorial = true;
  selphidWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi SelPhID Widget', event.detail);
    startSelphi();
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphidWidget);
}

function startSelphi() {
  const selphiWidget = document.createElement('facephi-selphi-widget');
  selphiWidget.disableTutorial = true;
  selphiWidget.addEventListener('extractionFinish', (event) => {
    console.log('Facephi Selphi Widget', event.detail);
    sdkProvider.innerHTML = 'Onboarding completed';
  });
  sdkProvider.innerHTML = '';
  sdkProvider.appendChild(selphiWidget);
}
```

{% hint style="info" %}
Facephi recommends using tools such as frameworks and routers for a simpler and more modular implementation.

In a real implementation, it is recommended to take the rest of the widget events into account.
{% endhint %}

***

## TypeScript

All Facephi components are typed to be used in TypeScript environments (whether pure TypeScript or integrated into frameworks).

This configuration will be useful during the library implementation. These types will work in any framework, but their use may differ depending on the environment.

#### Usage example

This is a simple usage example for a pure TS environment. The types offered by the different components can be used in any framework with TS integration. This will provide fixes and autocomplete features in the IDE.

```typescript
const facephiSdkProvider: HTMLFacephiSdkProviderElement = document.createElement('facephi-sdk-provider');
facephiSdkProvider.apikey = process.env.FACEPHI_SDK_APIKEY;
facephiSdkProvider.addEventListener('emitData', handleEmitData);
```

> Help types in an IDE might not be displayed in some HTML sections in frameworks. To take advantage of these features, it is recommended to implement the configuration of the various components in the code section.

***

## Integration in frameworks

The Facephi development team recommends integrating the library into frameworks to enhance and simplify its implementation.

Some advantages are:

* Ease of integration and syntax.
* Native use of TypeScript and a test environment.
* Componentization of the library products to offer modularity.
* Use of tools such as *routers*.

For more information about integrations in frameworks, you can consult the section [Frameworks and Samples](/docs.facephi-en/sdks/sdk-web/frameworks-y-samples.md).

***

## Compatibility with iframes

SDK Web is compatible with the use of iframes.

It is only necessary to activate focus in the iframe container when you are going to use the Facephi components. This can be achieved in several ways, such as:

* By having the user interact within the iframe before the SDK Web loads, using a button or link.
* Programmatically when the iframe loads (useful if the user is not going to interact with the application).<br>

  ```typescript
  const iframe = document.getElementById('my-iframe');
  iframe.addEventListener('load', () => {
      iframe.focus();
  });
  ```

{% hint style="info" %}
**Note**: This process may be necessary especially if services of *antispoofing* (Prevention of identity spoofing).
{% endhint %}

***

## How to use

The widgets must be contained by the SDK Provider component and executed one by one in order.

This logic can be implemented in several ways:

* **Vanilla implementation**: A vanilla implementation of the different products using HTML and JavaScript code. This option is the least recommended.
* **Framework components**: Using a framework to implement the products as custom components.
* **Component routers**: Using a router to load a specific component (product) according to a parameter in the URL.
* **Combined methods**: Implement the Facephi products using all the methods above. The Facephi team recommends using a framework to implement the widget as custom components that will be loaded with a router.