Schnellstart

So bekommen Sie einen funktionierenden Import-Ablauf auf Ihre Seite. Sie benötigen Zugriff auf die veröffentlichten Pakete und einen selbstgehosteten (oder Pilot-)Engine-Endpunkt mit einem signierten Lizenzschlüssel.

1. Paket installieren

npm install @capitality-io/mildport-widget

2. Custom Element definieren

import { defineImportSuiteElement } from '@capitality-io/mildport-widget';

await defineImportSuiteElement('mildport-import');

3. Einbauen und auf Ihr Schema zeigen

Die empfohlene Standardkonfiguration ist ein server-verwalteter Ziel-Katalog: Das Schema lebt im No-Code-Editor von Mildport (auf Wunsch aus Ihrer API-Spezifikation erstellt), versioniert mit Rollback, und Schema-Änderungen werden ohne ein Host-Release veröffentlicht. Das Embed benötigt nur drei Attribute:

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

const el = document.querySelector('mildport-import')!;
el.addEventListener('import-applied', e => sync(e.detail));

Alternative: Schema als Code

Bevorzugen Sie ein Schema, das mit Ihrer App versioniert und typgeprüft wird — oder müssen Felder zur Laufzeit pro Nutzer berechnet werden? Übergeben Sie targets aus dem Host-Code anstelle von catalog-key (ableiten aus Zod-Schemas mit @capitality-io/mildport-zod):

import { mountImportFlow } from '@capitality-io/mildport-widget';

const el = document.querySelector('mildport-import')!;

mountImportFlow(el, {
  id: 'my-import',
  version: 'v1',
  targets: [
    {
      id: 'contact',
      label: 'Kontakt',
      fields: [
        { key: 'contact.email', label: 'E-Mail', columnType: 'email', required: true },
        { key: 'contact.name', label: 'Name' },
      ],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf'] },
  delivery: { mode: 'browser' },
});

el.addEventListener('import-applied', e => sync(e.detail));

Das ist die gesamte Integrationsfläche: Attribute rein, DOM-Events raus. Kein SDK-Lock-in, kein iframe.

Weiter

Ihr erster Import — Katalog, Embed, Review, signierter Webhook.
Ziel-Kataloge — Schema im No-Code-Editor verwalten, aus einer API-Spezifikation erstellen, versionieren und zurückrollen.
Widget konfigurieren — targets, Attribute, Apply-Modi.
Events & Apply — die Lifecycle-Events und wie Zeilen Ihre App erreichen.
Theming — das Widget an Ihr Designsystem anpassen.