Inicio rápido

Esto pone un flujo de importación funcional en tu página. Necesitas acceso a los paquetes publicados y un endpoint de motor autoalojado (o piloto) con una clave de licencia firmada.

Acceso

Los paquetes se publican en GitHub Packages (npm.pkg.github.com, scope @capitality-io, restringido). Un simple npm install contra el registro público no funcionará — el acceso viene con un piloto o una licencia. Escribe a [email protected].

1. Instalar el paquete

npm install @capitality-io/mildport-widget

2. Definir el custom element

main.ts

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

await defineImportSuiteElement('mildport-import');

3. Colócalo y apúntalo a tu esquema

El predeterminado recomendado es un catálogo de targets gestionado por el servidor: el esquema vive en el editor no-code de Mildport (elaborado a partir de tu especificación API si lo prefieres), con versiones y rollback, y los cambios de esquema se publican sin un nuevo despliegue del host. El embed se mantiene con tres atributos:

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

wire-it-up.ts

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

Alternativa: esquema como código

¿Prefieres el esquema versionado y comprobado con tipos junto a tu app, o necesitas campos calculados por usuario en tiempo de ejecución? Pasa targets desde el código del host en lugar de catalog-key (derívelos de esquemas Zod con @capitality-io/mildport-zod):

wire-it-up.ts

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

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

mountImportFlow(el, {
  id: 'my-import',
  version: 'v1',
  targets: [
    {
      id: 'contact',
      label: 'Contacto',
      fields: [
        { key: 'contact.email', label: 'Correo electrónico', columnType: 'email', required: true },
        { key: 'contact.name', label: 'Nombre' },
      ],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf'] },
  delivery: { mode: 'browser' },
});

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

Esa es toda la superficie de integración: atributos de entrada, eventos DOM de salida. Sin bloqueo de SDK, sin iframe.

Siguiente

• Tu primer import — catálogo, embed, revisión, webhook firmado.
• Catálogos de targets — gestiona el esquema en el editor no-code, elabora desde una especificación API, versiona y revierte.
• Configurar el widget — targets, atributos, modos de aplicación.
• Eventos y aplicación — los eventos del ciclo de vida y cómo llegan las filas a tu app.
• Tematización — adapta el widget a tu sistema de diseño.