PRO
widget.js

Widget zum automatischen Ausfüllen von Unternehmensdaten

Einbettbares Eingabefeld für Formulare: nach Name oder CUI suchen, Unternehmen auswählen und Kundendaten automatisch ausfüllen.

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

Erkennung

Sucht Unternehmen nach Name im ONRC-Index und akzeptiert eine numerische CUI direkt.

Automatisches Ausfüllen

Füllt gängige Felder anhand der Attribute `name`, `id` oder `data-demoanaf-target` aus.

Mapping

Ermöglicht explizites Mapping mit den Selektoren der Website, die das Widget integriert.

Live-Demo

Das Widget unten füllt das Testformular aus, nachdem ein Unternehmen ausgewählt wurde.

actual widget.js

Widget wird geladen…

Automatische Integration

Gängige Felder wie `company_name`, `cui`, `company_address`, `locality`, `county` werden innerhalb desselben Formulars automatisch erkannt.

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>

Explizites Mapping

Für Checkouts und CRMs mit benutzerdefinierten Feldnamen übergeben Sie die Selektoren 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>

Design- und Detailkonfiguration

Standardmäßig zeigt das Widget nach der Auswahl die Unternehmenskarte. Für kompakte Checkouts lässt `showDetails: false` nur Autovervollständigung + automatisches Ausfüllen übrig. `compact` und `badge` sind optional.

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

Normalisierte Nutzlast

Die Normalisierung ist standardmäßig deaktiviert. Wenn aktiviert, schreibt das Widget ein kanonisches JSON in ein vorhandenes oder neu erstelltes verstecktes Feld im Formular.

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

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

Client-Ereignis

Nach dem Ausfüllen sendet das Widget `demoanaf:prefill` mit dem normalisierten Unternehmen und der Liste der ausgefüllten Felder.

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