Plain HTML

Zero tooling beyond a bundler that can resolve the package. Register the element once, set object properties in JavaScript, listen with addEventListener.

<mildport-import
  api-base-url="https://imports.your-infra.example"
  license-key="SIGNED_TENANT_KEY"
></mildport-import>

<script type="module">
  import { defineImportSuiteElement } from '@capitality-io/mildport-widget';

  await defineImportSuiteElement();

  const el = document.querySelector('mildport-import');
  el.targets = [
    {
      id: 'contact',
      label: 'Contact',
      fields: [{ key: 'person.email', label: 'Email', required: true, columnType: 'email' }],
    },
  ];
  el.addEventListener('import-applied', e => {
    console.log('applied', e.detail.recordId, e.detail.rowCount);
  });
</script>

Rule of thumb: strings → attributes; objects / arrays / functions → properties; results → DOM events.

Next: Configure · Events · all frameworks