Boomi EmbedKit (@boomi/embedkit) is a white-label embeddable plugin that lets you surface Boomi-powered experiences — Integrations, Connections, Scheduling, Data Mapping, and AI Agents — directly inside your own application. It runs inside a Shadow DOM so its styles are fully isolated from your host app, and it ships its own React/ReactDOM bundle so no dependencies are required on the host page.

This is the official Boomi EmbedKit. If you fork or change this code, you should not use the name Boomi for your version.

EmbedKit supports three integration paths depending on your stack:

EmbedKit uses a nonce → JWT exchange pattern. Your server authenticates the user, calls the EmbedKit Server to get a short-lived nonce, and passes it to the client. The plugin exchanges the nonce for a JWT and handles all token refresh automatically. The CDN path uses a public token + per-project allow-listed origins instead of a server-side session.

npm install @boomi/embedkit
# or
yarn add @boomi/embedkit

import BoomiPlugin, { RenderComponent } from '@boomi/embedkit';
import uiConfig from './boomi.config';

// After your server returns a nonce:
BoomiPlugin({
  serverBase: 'https://your-embedkit-server.com/api/v1',
  tenantId: 'YOUR_BOOMI_PARENT_ACCOUNT_ID',
  nonce: nonceFromServer,
  boomiConfig: uiConfig,
});

// Render a component into <div id="boomi" />
RenderComponent({
  hostId: 'boomi',
  component: 'Integrations',
  props: { componentKey: 'integrationsMain' },
});

For embedding Boomi AI Agents on any existing website — no npm, no build pipeline required.

1. Create a project in the EmbedKit Admin Console, configure your agent and origins, and copy the generated public token.

2. Add to your HTML:

<!-- EmbedKit stylesheet -->
<link rel="stylesheet" href="https://cdn.boomi.space/cdn/embedkit-cdn.css" />

<!-- Configure the embed -->
<script>
  window.BoomiEmbed = {
    publicToken: "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    agentId:     "project_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    mountId:     "boomi-agent",
    serverBase:  "https://api.boomi.space/api/v1"
  };
</script>

<!-- Load the bundle (React + ReactDOM bundled in) -->
<script src="https://cdn.boomi.space/embedkit-cdn.umd.cjs" async></script>

<!-- Mount target -->
<div id="boomi-agent"></div>

The CDN supports three presentation modes, configured in the Admin Console:

For the full CDN setup walkthrough including CORS configuration, the Admin Console, all agent UI options, platform-specific examples (WordPress, Salesforce), and troubleshooting, see CDN Configuration.

EmbedKit ships three built-in themes (boomi, light, dark) and supports fully custom themes via CSS variables in boomi.config.js.

// boomi.config.js
export default {
  theme: {
    defaultTheme: 'boomi',   // 'light' | 'dark' | 'boomi' | '<your-custom>'
    allowThemes: true,
  },
  cssVarsByTheme: {
    'my-brand': {
      '--boomi-root-bg-color': '#0f172a',
      '--boomi-btn-primary-bg': '#2563eb',
      '--boomi-btn-primary-fg': '#ffffff',
    },
  },
};

Full theming reference (all CSS tokens, built-in themes, runtime switching) is in Getting Started.

Working examples are available in the embedkit-examples repository, including React and vanilla JS implementations.

You can also open the React example directly on StackBlitz: Boomi EmbedKit React Example

See Release Notes for version history.