PRO
widget.js

Widget di compilazione automatica aziende

Input incorporabile per moduli: cerca per nome o CUI, seleziona l'azienda e compila i campi del cliente.

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

Scoperta

Cerca aziende per nome attraverso l'indice ONRC e accetta direttamente un CUI numerico.

Compilazione automatica

Compila i campi comuni tramite attributi `name`, `id` o `data-demoanaf-target`.

Mapping

Consente la mappatura esplicita usando i selettori del sito che integra il widget.

Demo live

Il widget qui sotto compila il modulo di test dopo la selezione di un'azienda.

actual widget.js

Caricamento widget…

Integrazione automatica

I campi comuni come `company_name`, `cui`, `company_address`, `locality`, `county` vengono rilevati automaticamente all'interno dello stesso modulo.

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>

Mapping esplicito

Per checkout e CRM con nomi di campo personalizzati, passa i selettori in `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>

Configurazione aspetto e dettagli

Per impostazione predefinita il widget mostra la scheda azienda dopo la selezione. Per checkout compatti, `showDetails: false` lascia solo il completamento automatico + la compilazione. `compact` e `badge` sono 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 normalizzato

La normalizzazione è disabilitata per impostazione predefinita. Quando abilitata, il widget scrive un JSON canonico in un campo nascosto esistente o appena creato nel modulo.

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

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

Evento client

Dopo la precompilazione, il widget emette `demoanaf:prefill` con l'azienda normalizzata e l'elenco dei campi compilati.

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