PRO
widget.js

Company autofill widget

Embeddable input for forms: search by name or CUI, select the company and fill in the customer's fields.

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

Discovery

Search companies by name through the ONRC index and accepts a numeric CUI directly.

Autofill

Fills common fields by `name`, `id` or `data-demoanaf-target` attributes.

Mapping

Allows explicit mapping using the selectors of the site integrating the widget.

Live demo

The widget below fills in the test form after a company is selected.

actual widget.js

Loading widget…

Auto integration

Common fields such as `company_name`, `cui`, `company_address`, `locality`, `county` are detected automatically within the same form.

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>

Explicit mapping

For checkouts and CRMs with custom field names, pass the selectors 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>

Appearance and detail config

By default the widget shows the company card after selection. For compact checkouts, `showDetails: false` leaves only autocomplete + autofill. `compact` and `badge` are 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'
  }
});

Normalised payload

Normalisation is disabled by default. When enabled, the widget writes a canonical JSON into an existing or newly created hidden field in the form.

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

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

Client event

After prefill, the widget emits `demoanaf:prefill` with the normalised company and the list of filled fields.

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