# Render

Place the new HTML element where you want the component to render inside the **body** of your HTML file:

```markup
<div id="allpass"></div>
```

In order for the verification flow to render correctly, you'll need to pass a valid **accessToken** as an argument to the start function. You can get **accessToken** from our public API. You can find more details in the [Public API](https://redoc.elkyc.com/#tag/Public-Api-Verification-Gateway-Service/operation/ApiVerificationController_createVerificationToken) section of our documentation.

```javascript
const accessToken = 'ACCESS_TOKEN_FROM_PUBLIC_API';

Allpass.start(accessToken);
```

{% hint style="danger" %}
Make sure you're using your public **App Key** and **Secret API Key** from *Integration Page*
{% endhint %}

## Example

GitHub repository with sample - <https://github.com/elkyc/allpass-web-sdk>

{% code title="index.html" %}

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="favicon.ico">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div id="header">
        <h1>My Test Application</h1>
    </div>
    <div id="container">
        <div>
            <h3>Content</h3>
            <img id="loader" alt="loader" style="display: none" src="loader.gif"/>
            <button id="start">Start Verification</button>
        </div>
        <div id="allpass"></div>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
    <script src="integration.js" async></script>
</div>
</body>
</html>
```

{% endcode %}

{% code title="integration.js" %}

```javascript
const accessToken = 'ACCESS_TOKEN_FROM_PUBLIC_API';

(() => {
  const allpassId = 'allpass';
  /** UI actions */
  const setElmsDisplay = (hide, show) => {
    document.getElementById(hide).style.display = 'none';
    document.getElementById(show).style.display = 'block';
  }
  const finishUI = () => {
    setTimeout(() => {
      setElmsDisplay(allpassId, 'start');
      window.Allpass.close();
    }, 10000);
  };

  /** event handlers */
  const onLoad = (e) => {
    console.log('onLoad', e);
    setElmsDisplay('loader', allpassId);
  };
  const onRestart = (e) => {
    console.log('onRestart', e);
    setElmsDisplay('start', 'loader');
  };
  const onStart = (e) => {
    console.log('onStart', e);
  };
  const onPassStep = (e) => {
    console.log('onPassStep', e);
  };
  const onComplete = (e) => {
    console.log('onComplete', e);
    finishUI();
  };
  const onError = (e) => {
    console.log('onError', e);
    finishUI();
  };

  /** initialize Allpass SDK */
  const init = () => {
    window.Allpass.init({
      onLoad,
      onRestart,
      onStart,
      onPassStep,
      onComplete,
      onError,
    }).restart();
  };

  /** create Allpass library */
  const script = document.createElement('script');
  script.src = 'https://unpkg.com/@allpass/web-sdk';
  script.async = true;
  script.onload = () => init();
  document.body.appendChild(script);

  /** start verification process */
  document.getElementById('start').onclick = async () => {
    setElmsDisplay('start', 'loader');
    await window.Allpass.start(accessToken);
  };
})();
```

{% endcode %}
