Widget

The KVKBase widget adds instant company lookup auto-complete to any HTML form. Just add a single script tag — no framework required.

Installation

Add the widget script to your page, pointing it at your KVK input field:

<script
  src="https://widget.kvkbase.nl/v1/widget.js"
  data-apikey="YOUR_API_KEY"
  data-target="#kvk-input"
  data-autofill="true"
></script>

Data attributes

Attribute	Required	Default	Description
`data-apikey`	Yes	—	Your KVKBase API key
`data-target`	Yes	—	CSS selector for the KVK input field
`data-autofill`	No	`false`	Auto-fill related fields (name, address)
`data-name-target`	No	—	Selector for company name field
`data-address-target`	No	—	Selector for address field
`data-city-target`	No	—	Selector for city field
`data-postal-target`	No	—	Selector for postal code field
`data-vat-target`	No	—	Selector for VAT number field
`data-theme`	No	`light`	Widget theme: `light` or `dark`
`data-lang`	No	`nl`	Language: `nl` or `en`

CSS customization

Override the widget styles using CSS custom properties:

:root {
  --kvkbase-primary: #2563eb;
  --kvkbase-bg: #ffffff;
  --kvkbase-text: #0f172a;
  --kvkbase-border: #e2e8f0;
  --kvkbase-radius: 8px;
  --kvkbase-font: "Inter", sans-serif;
  --kvkbase-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --kvkbase-item-hover-bg: #f8fafc;
  --kvkbase-max-height: 300px;
}

Events

The widget dispatches custom events on the target element that you can listen to:

`kvkbase:found`

Fired when a company is successfully selected from the dropdown.

document.querySelector("#kvk-input").addEventListener("kvkbase:found", (e) => {
  console.log("Company found:", e.detail);
  // e.detail contains the full company object:
  // { kvkNumber, name, address, vatNumber, vatValid, ... }
});

`kvkbase:error`

Fired when a lookup fails (network error, invalid KVK number, etc.).

document.querySelector("#kvk-input").addEventListener("kvkbase:error", (e) => {
  console.error("Lookup failed:", e.detail.message);
  // e.detail: { code: "NOT_FOUND", message: "..." }
});

Full working example

A complete HTML form with the widget and autofill:

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <title>Checkout</title>
</head>
<body>
  <form>
    <label>KVK Nummer</label>
    <input type="text" id="kvk-input" placeholder="12345678">

    <label>Bedrijfsnaam</label>
    <input type="text" id="company-name" readonly>

    <label>Adres</label>
    <input type="text" id="address" readonly>

    <label>Stad</label>
    <input type="text" id="city" readonly>

    <label>Postcode</label>
    <input type="text" id="postal" readonly>

    <label>BTW Nummer</label>
    <input type="text" id="vat" readonly>
  </form>

  <script
    src="https://widget.kvkbase.nl/v1/widget.js"
    data-apikey="YOUR_API_KEY"
    data-target="#kvk-input"
    data-autofill="true"
    data-name-target="#company-name"
    data-address-target="#address"
    data-city-target="#city"
    data-postal-target="#postal"
    data-vat-target="#vat"
  ></script>
</body>
</html>