Widget Integration V2

The VerifiMe V2 widget is a drop-in verification UI served from a versioned CDN. Each release is immutable and published with a SHA-384 hash for integrity verification.

Try it live: use the Widget Demo to test the full invite and widget flow against staging or production.

Integration Options

IIFE loads via a plain <script> tag with no bundler required. ESM is used as a <script type="module"> CDN include or downloaded for local bundling. Independently of format, Latest is a mutable alias that always serves the current build, while Versioned pins an exact version with a Subresource Integrity hash so the browser verifies the file before executing it. Versioned requires a pinned URL (SRI is incompatible with mutable aliases) and crossorigin="anonymous".

Loading widget versions...

Widget API

Add a container element to your page:

<div id="verifime-widget"></div>

When using the ESM build as a local bundle, import the default export:

import VerifimeWidget from "./verifime-widget.esm.js";

Then initialise the widget:

const instance = VerifimeWidget(selector, trackingReference, options);

On unmount:

instance.destroy();

Return value: { destroy() } stops the status poller and removes the widget from the DOM. Always call this on unmount to prevent the status poller running in the background after the widget is removed.

Framework usage

useEffect(() => {
  if (!window.VerifimeWidget) return;

  const instance = window.VerifimeWidget(
    "#verifime-widget",
    trackingReference,
    {
      onSuccess: () => console.log("completed"),
      onError: (err) => console.error(err),
    }
  );

  return () => instance?.destroy();
}, [trackingReference]);

return <div id="verifime-widget" />;

<template>
  <div id="verifime-widget"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";

const props = defineProps({ trackingReference: String });

let instance;

onMounted(() => {
  instance = window.VerifimeWidget("#verifime-widget", props.trackingReference, {
    onSuccess: () => console.log("completed"),
    onError: (err) => console.error(err),
  });
});

onUnmounted(() => {
  instance?.destroy();
});
</script>

import { Component, Input, OnInit, OnDestroy } from "@angular/core";

@Component({
  selector: "app-verification",
  template: `<div id="verifime-widget"></div>`,
})
export class VerificationComponent implements OnInit, OnDestroy {
  @Input() trackingReference!: string;
  private widgetInstance: { destroy(): void } | null = null;

  ngOnInit(): void {
    this.widgetInstance = (window as any).VerifimeWidget(
      "#verifime-widget",
      this.trackingReference,
      {
        onSuccess: () => console.log("completed"),
        onError: (err: any) => console.error(err),
      }
    );
  }

  ngOnDestroy(): void {
    this.widgetInstance?.destroy();
  }
}

const instance = VerifimeWidget("#verifime-widget", trackingReference, {
  onSuccess: () => console.log("completed"),
  onError: (err) => console.error(err),
});

// On teardown (page navigation, SPA route change, component unmount):
instance.destroy();

CSP Requirements

If your page uses a Content-Security-Policy header, the required directives depend on the assetMode option and the environment you are integrating against.

Use assetMode: 'url' if your policy forbids data: URIs. The font-src domain is the same as script-src, so no new domain needs whitelisting.

Pass cspNonce to use nonce-based style-src instead of 'unsafe-inline'. The nonce is applied to all style elements the widget injects.

Strict CSP example

For integrators whose policy forbids data: URIs, use assetMode: 'url' together with cspNonce:

VerifimeWidget("#verifime-widget", trackingReference, {
  cspNonce: "your-nonce-here",
  assetMode: "url",
});

Set the following Content-Security-Policy header value:

script-src https://widget.verifime.com; style-src 'nonce-your-nonce-here'; font-src https://widget.verifime.com; img-src https://qr-code.prod.verifime.com; connect-src https://api.prod.verifime.com

script-src https://widget.verifime.com; style-src 'nonce-your-nonce-here'; font-src https://widget.verifime.com; img-src https://qr-code.dev.verifime.com; connect-src https://api.stage.verifime.com

Widget Behaviour

The widget polls the tracking status API using exponential backoff (starting at 1s, capping at 10s), pauses when the browser tab is hidden, and resumes on visibility. Polling stops after 30 minutes; if no terminal status is reached by then, onError is called with code: "TIMEOUT". The widget updates its display accordingly:

Callbacks

onSuccess() is called when the customer completes data entry (Phase 1). It does not confirm that identity verification or risk assessment is complete. Those are asynchronous processes confirmed via webhook.

onError(err) is called on technical errors such as network failures, API errors, or polling timeout. The err object contains a code and message:

Versioning Policy

Versioned files are immutable. Once published they never change.

Migration from V1

The API signature is identical. Two changes are required:

1. Update the script URL:

   Before (V1)	After (V2)
   widget.static.prod.verifime.com/widgets/verifime-widget.min.js	widget.verifime.com/widget/production/latest/verifime-widget.iife.js
   widget.static.stage.verifime.com/widgets/verifime-widget.min.js	widget.verifime.com/widget/staging/latest/verifime-widget.iife.js

2. Call destroy() on cleanup: V2 returns an instance object. Store it and call instance.destroy() before re-initialising or on component unmount. V1 had no return value and no cleanup mechanism.