Быстрый старт

Это добавит рабочий процесс импорта на вашу страницу. Вам нужен доступ к опубликованным пакетам и endpoint самостоятельно размещаемого (или пилотного) движка с подписанным ключом лицензии.

1. Установите пакет

npm install @capitality-io/mildport-widget

2. Определите пользовательский элемент

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

await defineImportSuiteElement('mildport-import');

3. Вставьте его и укажите на вашу схему

Рекомендуемое решение по умолчанию — каталог целей, управляемый сервером: схема хранится в no-code редакторе Mildport (при желании составленная из вашей спецификации API), с версионированием и откатом, и изменения схемы публикуются без нового релиза хоста. Элемент embed остаётся с тремя атрибутами:

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

Альтернатива: схема как код

Предпочитаете схему, версионированную и проверяемую по типам вместе с вашим приложением, — или вам нужны поля, вычисляемые по каждому пользователю во время выполнения? Передавайте targets из кода хоста вместо catalog-key (создавайте их из Zod-схем с помощью @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: 'Контакт',
      fields: [
        { key: 'contact.email', label: 'Эл. почта', columnType: 'email', required: true },
        { key: 'contact.name', label: 'Имя' },
      ],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf'] },
  delivery: { mode: 'browser' },
});

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

Это вся поверхность интеграции: атрибуты на вход, DOM-события на выход. Никакой привязки к SDK, никаких iframe.

Дальше

Первый импорт — каталог, встраивание, проверка, подписанный webhook.
Каталоги целей — управляйте схемой в no-code редакторе, составьте её из спецификации API, версионируйте и откатывайте.
Настройка виджета — targets, атрибуты, режимы применения.
События и применение — события жизненного цикла и как строки попадают в ваше приложение.
Тематизация — адаптируйте виджет под вашу дизайн-систему.