PRO
widget.js

Céges automatikus kitöltő widget

Beágyazható beviteli mező űrlapokhoz: keressen névvel vagy CUI-val, válassza ki a céget, és töltse ki az ügyfél mezőit.

https://demoanaf.ro/widget.js
Vanilla JS, Shadow DOM, React nélkül

Felfedezés

Cégkeresés névvel az ONRC-indexen keresztül, és numerikus CUI közvetlen elfogadása.

Automatikus kitöltés

Általános mezőket tölt ki `name`, `id` vagy `data-demoanaf-target` attribútumok alapján.

Leképezés

Explicit leképezést tesz lehetővé a widgetet integráló oldal szelektorainak használatával.

Élő demo

Az alábbi widget kitölti a tesztűrlapot a cég kiválasztása után.

actual widget.js

Widget betöltése…

Automatikus integráció

Az általános mezők, mint a `company_name`, `cui`, `company_address`, `locality`, `county`, automatikusan felismerhetők ugyanazon az űrlapon belül.

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 leképezés

Egyéni mezőnevekkel rendelkező fizetési oldalakhoz és CRM-rendszerekhez adja meg a szelektorokat a `fields` paraméterben.

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>

Megjelenési és részlet konfiguráció

Alapértelmezés szerint a widget megmutatja a cégkártyát kiválasztás után. Kompakt fizetési oldalakhoz a `showDetails: false` beállítás csak az automatikus kiegészítést és kitöltést hagyja meg. A `compact` és `badge` opcionálisan engedélyezhető.

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'
  }
});

Normalizált tartalom

A normalizálás alapértelmezés szerint ki van kapcsolva. Engedélyezéskor a widget kanonikus JSON-t ír egy meglévő vagy újonnan létrehozott rejtett mezőbe az űrlapon.

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

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

Kliens esemény

Kitöltés után a widget `demoanaf:prefill` eseményt bocsát ki a normalizált cégadatokkal és a kitöltött mezők listájával.

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