Browser Widget

The browser widget handles the camera permission, frame capture, and base64 encoding entirely client-side. Drop-in: one script tag, one container element, one callback. Your backend still calls Lorica with the captured frames — the widget only handles frontend capture.

Install

<script src="https://cdn.loricaapi.com/widget.js" async></script>

Mount

<div id="lorica-capture"></div>

<script>
  const widget = LoricaWidget.mount({
    container: '#lorica-capture',
    mode: 'dual_frame',  // 'passive' | 'dual_frame' | 'active'
    onCapture: async (frames) => {
      // Send frames to YOUR backend, which calls Lorica
      const r = await fetch('/api/withdrawal', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, amount, asset, frames }),
      });
      const result = await r.json();
      if (result.ok) showSuccess();
      else showFailure(result.error);
    },
    onError: (err) => console.error('Capture failed', err),
  });
</script>

Configuration

Customizing the look

The widget accepts a CSS-variable theme override on the container:

#lorica-capture {
  --lorica-widget-accent: #C8A14A;
  --lorica-widget-bg: #0A0A0A;
  --lorica-widget-text: #F4F1EA;
  --lorica-widget-radius: 8px;
}