Avvio rapido

Questo mette un flusso di importazione funzionante sulla tua pagina. Ti serve l’accesso ai pacchetti pubblicati e un endpoint del motore self-hosted (o pilota) con una chiave di licenza firmata.

1. Installa il pacchetto

npm install @capitality-io/mildport-widget

2. Definisci il custom element

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

await defineImportSuiteElement('mildport-import');

3. Inseriscilo e puntalo al tuo schema

Il default raccomandato è un catalogo target gestito dal server: lo schema vive nell’editor no-code di Mildport (elaborato dalla tua specifica API se preferisci), con versioning e rollback, e le modifiche allo schema si pubblicano senza un nuovo rilascio dell’host. L’embed rimane con tre attributi:

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

Alternativa: schema come codice

Preferisci lo schema versionato e type-checked con la tua app — o hai bisogno di campi calcolati per utente a runtime? Passa targets dal codice host invece di catalog-key (derivali da schemi Zod con @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: 'Contatto',
      fields: [
        { key: 'contact.email', label: 'Email', columnType: 'email', required: true },
        { key: 'contact.name', label: 'Nome' },
      ],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf'] },
  delivery: { mode: 'browser' },
});

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

Questa è l’intera superficie di integrazione: attributi in entrata, eventi DOM in uscita. Nessun lock-in di SDK, nessun iframe.

Avanti

Il tuo primo import — catalogo, embed, review, webhook firmato.
Cataloghi target — gestisci lo schema nell’editor no-code, elaboralo da una specifica API, versiona e ripristina.
Configura il widget — targets, attributi, modalità di apply.
Eventi e apply — gli eventi del ciclo di vita e come le righe raggiungono la tua app.
Theming — adatta il widget al tuo design system.