# Integration and Usage

{% hint style="warning" %}
Before getting started, please make sure to:

* implement the API as specified 
* check web component compatibility [here](https://caniuse.com/?search=Custom%20Elements)​
  {% endhint %}

{% hint style="info" %}
​Please check out the [front-end JavaScript SDK](https://docs.ont.io/decentralized-identity-and-data/ontid/ont-login/front-end-javascript-sdk) is you want to build a custom UI.
{% endhint %}

## Example Apps <a href="#example-apps" id="example-apps"></a>

* ​[vue](https://github.com/ontology-tech/ontlogin-sdk-ui/tree/main/examples/vue)​
* ​[pure HTML](https://github.com/ontology-tech/ontlogin-sdk-ui/tree/main/examples/html)​

## Integration and Usage <a href="#integration-and-usage" id="integration-and-usage"></a>

via NPM [package](https://npmjs.com/package/ontlogin-ui)​

```
npm i ontlogin-ui
```

```
import "ontlogin-ui";
```

```javascript
<ont-login
  url_of_get_challenge="server/requestChallenge"
  url_of_submit_response="server/submitChallenge"
/>
```

via [js bundle](https://github.com/ontology-tech/ontlogin-sdk-ui/blob/main/dist/ontloginui.min.js)​

```javascript
<ont-login
  id="ontlogin"
  url_of_get_challenge="server/requestChallenge"
  url_of_submit_response="server/submitChallenge"
/>
<script src="ontloginui.min.js"></script>
<script>
  // add event listener to custom event
  const target = document.querySelector("#ontlogin");
  target.addEventListener("success", (e) => {
    console.log(e.detail);
  });
  target.addEventListener("error", (e) => {
    console.log(e.detail);
  });
  target.addEventListener("cancel", (e) => {
    console.log(e.detail);
  });
</script>
```