# HTML + Javascript

## 1. Installation

To install the Preventor Broker SDK, add the following script.

```html
<script
    type="module"
    src="https://sdk.preventor.com/pvtidaas/broker/broker.esm.js"
></script>
```

## 2. Setup the SDK

1. Add `pvt-broker` tag into your HTML.

<pre class="language-html"><code class="lang-html"><strong>&#x3C;pvt-broker>&#x3C;/pvt-broker>
</strong></code></pre>

2. Set your configuration

You can find your credentials on the [Preventor platform](https://sandbox.preventor.com/)

<div align="left"><figure><img src="https://337711294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UJMRhM9wVKwM0lY4r2F%2Fuploads%2FVY9LLEyxawoBjTZl79Gz%2Fsettings%20option.png?alt=media&#x26;token=a0741621-230d-472f-b2f0-ee2287b8fc32" alt="" width="303"><figcaption><p>Go to settings / integration keys</p></figcaption></figure></div>

<div align="left"><figure><img src="https://337711294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UJMRhM9wVKwM0lY4r2F%2Fuploads%2FXjABpdqDczewMRlKoYx6%2Fintegration%20keys.png?alt=media&#x26;token=cc23016b-61af-4d9e-9b07-89de92457170" alt="" width="375"><figcaption><p>Integration keys</p></figcaption></figure></div>

You can find the broker ID on the [Preventor platform](https://sandbox.preventor.com/)

<div align="left"><figure><img src="https://337711294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UJMRhM9wVKwM0lY4r2F%2Fuploads%2FrZMWbi3oLSC7WLJ1fXJD%2Fapps.jpg?alt=media&#x26;token=00d048ef-e617-4bbc-8c3f-932ff5b91912" alt="" width="169"><figcaption><p>Go to apps option</p></figcaption></figure></div>

<div align="left"><figure><img src="https://337711294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UJMRhM9wVKwM0lY4r2F%2Fuploads%2F5R3Cia3aFSdm1weqi4HQ%2Fbroker%20management.png?alt=media&#x26;token=304aeebe-bfe7-4b72-8f5b-43495af73eb3" alt="" width="316"><figcaption><p>Go to broker management</p></figcaption></figure></div>

<div align="left"><figure><img src="https://337711294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UJMRhM9wVKwM0lY4r2F%2Fuploads%2FAbKFkuqnKwpmzsweMoS6%2Fbroker%20id.jpg?alt=media&#x26;token=03d955b9-8260-4c7c-ae03-16d20473cd4e" alt=""><figcaption><p>You must pass this Broker ID to your configuration. If don't have any broker, you can create it.</p></figcaption></figure></div>

```javascript
window.PvtBrokerSDK = {
    brokerId: 'YOUR_BROKER_ID',
    credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV',
    },
  };
```

3. Call the `open()` method to open the component

```javascript
const component = document.querySelector('pvt-broker');
component.open();
```

4. `pvt-broker` emits a loaded event when the Preventer Broker SDK finishes downloading. In the example below, the loaded event is utilized to enable a button that opens the Preventer Broker SDK.

```javascript
const component = document.querySelector('pvt-broker');
const button = document.querySelector('button');  
button.addEventListener('click', () => component.open())

component.addEventListener('loaded', () => {
  button.disabled = false;
});
```

5. A complete `HTML`file should look similar to the example below.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Preventor, Remote digital identity platform for brokers</title>
  </head>

  <body>
    <button disabled>Click me</button>
    <pvt-broker></pvt-broker>

    <script
      type="module"
      src="https://sdk.preventor.com/pvtidaas/broker/broker.esm.js"
    ></script>
    <script>
      window.PvtBrokerSDK = {
        brokerId: 'YOUR_BROKER_ID',
        credentials: {
          apiKey: 'YOUR_API_KEY',
          clientSecret: 'YOUR_CLIENT_SECRET',
          tenant: 'YOUR_TENANT',
          banknu: 'YOUR_BANKNU',
          env: 'YOUR_ENV',
        },
      };

      const component = document.querySelector('pvt-broker');
      const button = document.querySelector('button');  
      button.addEventListener('click', () => component.open())

      component.addEventListener('loaded', () => {
        button.disabled = false;
      });
    </script>
  </body>
</html>
```

{% hint style="success" %}
Congratulations, the Preventor Broker SDK has been successfully configured!
{% endhint %}

<figure><img src="https://337711294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9UJMRhM9wVKwM0lY4r2F%2Fuploads%2FJkUPJmtAbwUwPZcaAQL7%2Fbroker-sdk.png?alt=media&#x26;token=4bc93126-10e6-4024-ac27-12a7b6693f62" alt="" width="313"><figcaption><p>Web SDK</p></figcaption></figure>
