> 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/videoid-identificacion-en-video/instalacion.md).

# Installation

## Install the widget component from a package manager

The widget can be installed from a private package registry or a local tgz file.

### Install the widget component through Facephi's private package registry (Recommended)

1. Create a file `.npmrc` with the credentials provided by the Facephi team in the root directory.

```bash
# Facephi npm credentials
registry=https://registry.npmjs.org/
@facephi:registry=https://facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:_password=PASSWORDBASE64
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:username=EMAIL
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:email=EMAIL
//facephicorp.jfrog.io/artifactory/api/npm/sdk-web-fphi/:always-auth=true
```

2. Add the widget package dependency in `package.json` with the desired version.

```json
"dependencies": {
    "@facephi/sdk-video-id": "1.0.0",
    (...)
}
```

> The dependency version may be different. The Facephi team recommends using the latest available version.

### Install the widget component from a local tgz package file

1. Locate the tgz file provided by the Facephi team in the desired location.

```
facephi/
  sdk-video-id-1.0.0.tgz
src/
package.json
...
```

2. Install the package with a package manager.

```bash
npm install ./facephi/sdk-video-id-1.0.0.tgz
```

> The name or version of the tgz file may be different.

***

### Definition of the widget custom component

In order to instantiate the widget component in the DOM, it must be defined.

Once it has been successfully defined, the widget component will be implemented through the tag `<facephi-video-id>` in the DOM.

#### Define the VideoID custom element

The widget component must be defined in order to be implemented.

```javascript
import { defineCustomElements as defineFacephiVideoID } from '@facephi/sdk-video-id/loader';

defineFacephiVideoID(window);
```

#### Compile for ES5

In some cases, the "polyfills" can be applied if required.

```javascript
import { applyPolyfills, defineCustomElements as defineFacephiVideoID } from '@facephi/sdk-video-id/loader';

applyPolyfills().then(() => {
  defineFacephiVideoID(window);
});
```

{% hint style="info" %}
It is recommended to define the VideoID custom element in the file `index.js`.
{% endhint %}

Finally, the widget should be successfully installed in your project.