Add the “Verify with Konnect ID” button

The Konnect ID button is the recognisable way to start a verification from your own site. It calls your backend, which creates a session with your API key, and then sends the user to the hosted flow. Your API key never reaches the browser.

1. Create a backend routeA POST endpoint on your server that calls /api/session/init (see Getting started) and returns { "verificationUrl": "..." }.
2. Add the script and the elementInclude konnect-button.js from your Konnect ID host and add an element with data-konnect-button. The button renders in a shadow root, so your CSS cannot break it.
3. Choose label, language and themedata-label is verify (default), continue or signin; data-lang is en, fr or ar (right-to-left is automatic); data-theme is light or dark; data-size is s, m or l.

<div data-konnect-button
     data-session-url="/api/konnect/session"
     data-label="verify"
     data-lang="en"
     data-theme="light"
     data-size="m"></div>
<script src="https://YOUR-KONNECT-HOST/konnect-button.js" defer></script>

app.post('/api/konnect/session', async (req, res) => {
  const r = await fetch(`${process.env.KONNECT_URL}/api/session/init`, {
    method: 'POST',
    headers: { 'x-api-key': process.env.KONNECT_API_KEY, 'content-type': 'application/json' },
    body: JSON.stringify({ clientId: 'my-site', flow: 'KYC', applicationId: req.user.id, webhook: process.env.KONNECT_WEBHOOK }),
  });
  const { verificationUrl } = await r.json();
  res.json({ verificationUrl });
});

React

import { KonnectIdButton } from '@/components/ui/KonnectIdButton';

<KonnectIdButton
  variant="verify"
  onVerify={async () => {
    const { verificationUrl } = await (await fetch('/api/konnect/session', { method: 'POST' })).json();
    window.location.assign(verificationUrl);
  }}
/>

Events and behaviour

• konnect:start, konnect:ready (detail: { verificationUrl }) and konnect:error bubble from the element.
• data-mode="popup" opens the flow in a window instead of redirecting (camera permission needs HTTPS).
• The button shows a loading state, and “Try again” if your route fails. It is a real <button> with aria-busy and a live region.
• Brand rules: do not restyle, recolour or translate “Konnect ID”; keep at least one layer-height of clear space around it.