JavaScript quick start

Mount the hosted widget with the real embed loader.

Use this path when your app is not React-based or when you want to mount the widget from a plain script tag.

What you need first

Create a verified project and import kit in the dashboard. The kit detail page gives you the real public embed token and a hosted test link.

Plain JavaScript embed

Paste this where the import flow should appear, then replace the example token with your kit embed token. Appearance options match the kit page.

<div id="importflow-widget"></div>
<script src="https://your-importflow-domain.example/embed/v1/importflow.js"></script>
<script>
  const importflowAppearance = {}
  const importflow = window.ImportFlow.mount({
    token: 'if_pub_xxxxxxxxx',
    target: '#importflow-widget',
    ...importflowAppearance,
    onReady(payload) {
      console.log('ImportFlow ready', payload)
    },
    onComplete(summary) {
      console.log('ImportFlow complete', summary)
    },
    onClose(event) {
      console.log('ImportFlow closed', event)
    },
  })

  // Optional cleanup if your app dynamically removes this view:
  // importflow.destroy()
</script>

Callbacks

onReady, onComplete, and onClose let your app respond to the widget lifecycle without owning the import engine.

Appearance contract

Appearance options are passed through hosted widget URLs and generated snippets. Use theme: 'light' | 'dark' | 'system', radius: 'none' | 'sm' | 'md' | 'lg' | 'xl', and strict six-character hex colors without #. System follows the visitor device/browser color mode as the base appearance; manual overrides still apply on top.

Cleanup

If your app dynamically removes the import view, call the returned importflow.destroy() handle to remove the hosted widget frame and message listeners.

Prefer React?

The React drop-in uses this same loader and adds strict cleanup for React remounts.

Read the React quick start