Démarrage rapide

Ceci met un flux d’import fonctionnel sur votre page. Vous avez besoin d’un accès aux paquets publiés et d’un endpoint de moteur auto-hébergé (ou pilote) avec une clé de licence signée.

1. Installer le paquet

npm install @capitality-io/mildport-widget

2. Définir le custom element

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

await defineImportSuiteElement('mildport-import');

3. L’intégrer et le pointer vers votre schéma

La valeur par défaut recommandée est un catalogue de cibles géré par le serveur : le schéma vit dans l’éditeur no-code de Mildport (élaboré à partir de votre spec API si vous le souhaitez), versionné avec rollback, et les modifications de schéma se publient sans nouvelle release de l’hôte. L’embed ne nécessite que trois attributs :

<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 : schéma comme code

Vous préférez le schéma versionné et typé avec votre app — ou vous avez besoin de champs calculés par utilisateur à l’exécution ? Passez targets depuis le code hôte plutôt que catalog-key (dérivez-les de schémas Zod avec @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: 'Contact',
      fields: [
        { key: 'contact.email', label: 'E-mail', columnType: 'email', required: true },
        { key: 'contact.name', label: 'Nom' },
      ],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf'] },
  delivery: { mode: 'browser' },
});

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

C’est toute la surface d’intégration : attributs en entrée, événements DOM en sortie. Aucun verrouillage SDK, aucune iframe.

Suite

Votre premier import — catalogue, embed, revue, webhook signé.
Catalogues de cibles — gérez le schéma dans l’éditeur no-code, élaborez-le à partir d’une spec API, versionnez et revenez en arrière.
Configurer le widget — targets, attributs, modes d’application.
Événements et application — les événements de cycle de vie et comment les lignes arrivent à votre app.
Thématisation — adapter le widget à votre design system.