Skip to main content
The Verilock Widget is a no-code, embeddable component that launches the full verification flow directly on your website. Add a script tag, configure with data attributes, and you’re live.

​
Installation

Add the Verilock Widget script to your page: 
<script src="https://cdn.verilock.io/widget/v1/verilock.js" async></script>
The script is lightweight (~18 KB gzipped) and loads asynchronously. It has no external dependencies.

​
Display Modes

The widget supports three display modes:
ModeDescriptionBest For
modalOpens in a centered overlay with a backdropMost websites, CTAs
inlineRenders directly inside a container elementEmbedded flows, single-page apps
popupOpens in a new browser windowSituations where modals are blocked

​
Quick Start: Auto-Init with Data Attributes

The simplest integration uses HTML data attributes with no JavaScript required: 
<button
  data-verilock="trigger"
  data-verilock-key="your_publishable_key"
  data-verilock-mode="modal"
  data-verilock-redirect="https://yourapp.com/verified"
>
  Verify Identity
</button>

<script src="https://cdn.verilock.io/widget/v1/verilock.js" async></script>

​
Inline Mode

<div
  data-verilock="container"
  data-verilock-key="your_publishable_key"
  data-verilock-mode="inline"
  data-verilock-redirect="https://yourapp.com/verified"
  style="width: 100%; max-width: 480px; height: 600px;"
></div>

<script src="https://cdn.verilock.io/widget/v1/verilock.js" async></script>

<button
  data-verilock="trigger"
  data-verilock-key="your_publishable_key"
  data-verilock-mode="popup"
  data-verilock-redirect="https://yourapp.com/verified"
>
  Verify Identity
</button>

<script src="https://cdn.verilock.io/widget/v1/verilock.js" async></script>

​
Data Attributes Reference

AttributeRequiredDescription
data-verilockYestrigger (buttons) or container (inline divs)
data-verilock-keyYesYour publishable API key (starts with pk_)
data-verilock-modeNomodal (default), inline, or popup
data-verilock-redirectNoURL to redirect after completion
data-verilock-external-idNoYour internal user ID to attach to the session
data-verilock-localeNoLanguage code: en, es, fr, de, pt
data-verilock-themeNolight (default), dark, or auto
data-verilock-stepsNoComma-separated steps: document,selfie,address

​
JavaScript API

For full control, initialize the widget programmatically: 
const widget = Verilock.create({
  key: 'your_publishable_key',
  mode: 'modal',
  locale: 'en',
  theme: 'dark',
  externalId: 'user_12345',
  steps: ['document', 'selfie'],
  redirectUrl: 'https://yourapp.com/verified',
});

// Open the widget
widget.open();

// Close the widget
widget.close();

// Destroy the widget and clean up
widget.destroy();

​
Configuration Options

OptionTypeDefaultDescription
keystring—Publishable API key (required)
modestringmodalmodal, inline, or popup
containerstring|Element—CSS selector or DOM element (required for inline mode)
localestringenUI language
themestringlightlight, dark, or auto
externalIdstring—Your internal user/reference ID
stepsarray['document', 'selfie']Verification steps to run
redirectUrlstring—Post-completion redirect URL
metadataobject—Custom key-value pairs attached to the session

​
Inline Mode Example

<div id="verilock-container" style="width: 480px; height: 600px;"></div>

<script>
  const widget = Verilock.create({
    key: 'your_publishable_key',
    mode: 'inline',
    container: '#verilock-container',
    theme: 'dark',
    steps: ['document', 'selfie', 'address'],
  });
</script>

​
Events & Callbacks

Subscribe to lifecycle events to react to verification state changes: 
const widget = Verilock.create({
  key: 'your_publishable_key',
  mode: 'modal',

  onReady: () => {
    console.log('Widget loaded and ready');
  },

  onOpen: () => {
    console.log('Widget opened');
  },

  onClose: () => {
    console.log('Widget closed by user');
  },

  onComplete: (data) => {
    console.log('Verification complete', data.sessionId);
    console.log('Status:', data.status);
    // data.sessionId - The created session ID
    // data.status    - "completed", "approved", "declined"
  },

  onError: (error) => {
    console.error('Widget error', error.code, error.message);
  },

  onStepChange: (step) => {
    console.log('User moved to step:', step.name);
    // step.name  - "document", "selfie", "address", "video"
    // step.index - 0-based step index
  },
});

​
Event Reference

EventCallbackPayloadTrigger
ReadyonReady—Widget is loaded and initialized
OpenonOpen—Widget becomes visible
CloseonClose—User closes the widget
CompleteonComplete{ sessionId, status }Verification flow finished
ErroronError{ code, message }An error occurred
Step ChangeonStepChange{ name, index }User moves to the next step

​
Full Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Identity Verification</title>
  <script src="https://cdn.verilock.io/widget/v1/verilock.js" async></script>
</head>
<body>

  <h1>Verify Your Identity</h1>
  <button id="verify-btn">Start Verification</button>
  <p id="status"></p>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const statusEl = document.getElementById('status');

      const widget = Verilock.create({
        key: 'pk_live_your_publishable_key',
        mode: 'modal',
        theme: 'auto',
        steps: ['document', 'selfie'],
        metadata: {
          plan: 'premium',
          signup_source: 'website',
        },

        onComplete: (data) => {
          statusEl.textContent = `Verification ${data.status} (${data.sessionId})`;
        },

        onError: (error) => {
          statusEl.textContent = `Error: ${error.message}`;
        },
      });

      document.getElementById('verify-btn').addEventListener('click', () => {
        widget.open();
      });
    });
  </script>

</body>
</html>

​
Customization

​
Theme Overrides

Override default widget styles with CSS custom properties: 
:root {
  --verilock-primary: #6D28D9;
  --verilock-primary-hover: #5B21B6;
  --verilock-border-radius: 12px;
  --verilock-font-family: 'Inter', sans-serif;
  --verilock-backdrop-color: rgba(0, 0, 0, 0.6);
}

​
Content Security Policy

If your site uses a Content Security Policy, add the following directives: 
script-src https://cdn.verilock.io;
frame-src https://verify.verilock.io;
connect-src https://verilock.io;
Use your publishable key (pk_...) in the widget. Never expose your secret API key in client-side code.