Widget

Le widget KVKBase ajoute l'autocomplétion instantanée de recherche d'entreprises à n'importe quel formulaire HTML. Une simple balise script suffit, sans framework.

Démarrage rapide

Ajoutez le script du widget à votre page, en le faisant pointer vers votre champ KVK :

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

Attributs

Attribut	Obligatoire	Par défaut	Description
`data-apikey`	Oui	Aucune	Votre clé API KVKBase
`data-target`	Oui	Aucune	Sélecteur CSS du champ KVK
`data-autofill`	Non	`false`	Remplit automatiquement les champs associés (nom, adresse)
`data-name-target`	Non	Aucune	Sélecteur du champ nom de l'entreprise
`data-address-target`	Non	Aucune	Sélecteur du champ adresse
`data-city-target`	Non	Aucune	Sélecteur du champ ville
`data-postal-target`	Non	Aucune	Sélecteur du champ code postal
`data-vat-target`	Non	Aucune	Sélecteur du champ numéro de TVA
`data-theme`	Non	`light`	Thème du widget : `light` ou `dark`
`data-lang`	Non	`nl`	Langue : `nl`, `en` ou `fr`

Style

Personnalisez le style du widget avec des propriétés CSS personnalisées :

: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;
}

Événements

Le widget déclenche des événements personnalisés sur l'élément cible, que vous pouvez écouter :

`kvkbase:found`

Déclenché lorsqu'une entreprise est sélectionnée avec succès dans la liste déroulante.

document.querySelector("#kvk-input").addEventListener("kvkbase:found", (e) => {
  console.log("Company found:", e.detail);
  // e.detail contient l'objet entreprise complet :
  // { kvkNumber, name, address, vatNumber, vatValid, ... }
});

`kvkbase:error`

Déclenché lorsqu'une recherche échoue (erreur réseau, numéro KVK invalide, etc.).

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

Exemple complet

Un formulaire HTML complet avec le widget et le remplissage automatique :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Paiement</title>
</head>
<body>
  <form>
    <label>Numéro KVK</label>
    <input type="text" id="kvk-input" placeholder="12345678">

    <label>Nom de l'entreprise</label>
    <input type="text" id="company-name" readonly>

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

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

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

    <label>Numéro de TVA</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-lang="fr"
    data-name-target="#company-name"
    data-address-target="#address"
    data-city-target="#city"
    data-postal-target="#postal"
    data-vat-target="#vat"
  ></script>
</body>
</html>