PRO
widget.js

Widget de saisie automatique d'entreprise

Champ intégrable pour formulaires : recherchez par nom ou CUI, sélectionnez l'entreprise et remplissez les champs du client.

https://demoanaf.ro/widget.js
Vanilla JS, Shadow DOM, sans React

Découverte

Recherche des entreprises par nom via l'index ONRC et accepte un CUI numérique directement.

Saisie automatique

Remplit les champs courants par attributs `name`, `id` ou `data-demoanaf-target`.

Correspondance

Permet une correspondance explicite en utilisant les sélecteurs du site intégrant le widget.

Démo en direct

Le widget ci-dessous remplit le formulaire de test après la sélection d'une entreprise.

actual widget.js

Chargement du widget…

Intégration automatique

Les champs courants tels que `company_name`, `cui`, `company_address`, `locality`, `county` sont détectés automatiquement dans le même formulaire.

JavaScript
<form>
  <div data-demoanaf-cui></div>

  <input name="company_name" />
  <input name="cui" />
  <input name="registration_number" />
  <input name="company_address" />
  <input name="locality" />
  <input name="county" />
</form>
<script src="https://demoanaf.ro/widget.js" async></script>

Correspondance explicite

Pour les tunnels de paiement et CRM avec des noms de champs personnalisés, passez les sélecteurs dans `fields`.

JavaScript
<div id="demoanaf-company"></div>

<input id="billing-company" />
<input id="billing-cui" />
<input id="billing-address" />

<script src="https://demoanaf.ro/widget.js"></script>
<script>
  DemoANAF.init('#demoanaf-company', {
    fields: {
      name: '#billing-company',
      cui: '#billing-cui',
      address: '#billing-address'
    }
  });
</script>

Configuration de l'apparence et des détails

Par défaut, le widget affiche la carte entreprise après sélection. Pour les tunnels de paiement compacts, `showDetails: false` laisse uniquement la saisie automatique. `compact` et `badge` sont opt-in.

JavaScript
DemoANAF.init('#demoanaf-company', {
  showDetails: false,
  compact: true,
  placeholder: 'Caută firma pentru facturare...',
  badge: {
    enabled: true,
    text: 'Firmă verificată'
  },
  styles: {
    primary: '#003B73',
    primarySoft: '#E6EEF5',
    background: '#ffffff',
    text: '#111827',
    border: '#d1d5db',
    focusBorder: '#003B73',
    radius: '8px'
  }
});

Payload normalisé

La normalisation est désactivée par défaut. Quand elle est activée, le widget écrit un JSON canonique dans un champ caché existant ou nouvellement créé dans le formulaire.

JavaScript
DemoANAF.init('#demoanaf-company', {
  normalize: {
    enabled: true,
    name: 'demoanaf_company_json'
  }
});

// Creează sau completează:
// <input type="hidden" name="demoanaf_company_json">

Événement client

Après le remplissage, le widget émet `demoanaf:prefill` avec l'entreprise normalisée et la liste des champs remplis.

JavaScript
document
  .querySelector('#demoanaf-company')
  .addEventListener('demoanaf:prefill', (event) => {
    console.log(event.detail.company);
  });