@boomi/embedkit 1.4.6 → 1.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +158 -14
- package/dist/embedkit-cdn.js +1247 -1244
- package/dist/embedkit-cdn.umd.cjs +47 -47
- package/dist/index.cjs +56 -56
- package/dist/index.js +645 -644
- package/dist/index.umd.cjs +59 -59
- package/package.json +1 -1
- package/license.txt +0 -3
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
BSD-2-Clause License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2026, Boomi. All rights reserved.
|
|
4
4
|
|
|
5
5
|
Redistribution and use in source and binary forms, with or without
|
|
6
6
|
modification, are permitted provided that the following conditions are met:
|
package/README.md
CHANGED
|
@@ -1,31 +1,175 @@
|
|
|
1
1
|
# Boomi EmbedKit
|
|
2
2
|
|
|
3
|
-
**Boomi EmbedKit** is
|
|
3
|
+
**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.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
- **React**
|
|
7
|
-
- **Vanilla JavaScript (ES Modules)**
|
|
8
|
-
- **CommonJS**
|
|
5
|
+
This is the official Boomi EmbedKit. If you fork or change this code, you should not use the name Boomi for your version.
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
### What You Can Embed
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
| Component | Description |
|
|
10
|
+
|-----------|-------------|
|
|
11
|
+
| **Integrations** | List, run, and monitor integration pack instances for a Boomi sub-account |
|
|
12
|
+
| **Connections** | Let users configure and save connection credentials |
|
|
13
|
+
| **Schedules** | View and modify process schedule settings |
|
|
14
|
+
| **Mapping** | Interactive data mapping canvas for field-level transformations |
|
|
15
|
+
| **AI Agents** | Conversational AI agent chat UI backed by your Boomi Agentic flows |
|
|
13
16
|
|
|
14
|
-
|
|
17
|
+
### Integration Methods
|
|
18
|
+
|
|
19
|
+
EmbedKit supports three integration paths depending on your stack:
|
|
15
20
|
|
|
16
|
-
|
|
21
|
+
| Method | Package | Best For |
|
|
22
|
+
|--------|---------|----------|
|
|
23
|
+
| **React** | `@boomi/embedkit` via npm | React applications — use `EmbedKitProvider` + `RenderComponent` |
|
|
24
|
+
| **ES Module / CommonJS** | `@boomi/embedkit` via npm | Vanilla JS, Node-backed apps, any bundler |
|
|
25
|
+
| **CDN (Public Embed)** | Drop-in UMD script via `cdn.boomi.space` | Any existing website — no build tools required |
|
|
26
|
+
|
|
27
|
+
### Authentication
|
|
28
|
+
|
|
29
|
+
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.
|
|
17
30
|
|
|
18
31
|
---
|
|
19
32
|
|
|
20
33
|
## Documentation
|
|
21
34
|
|
|
22
|
-
|
|
35
|
+
| Guide | Description |
|
|
36
|
+
|-------|-------------|
|
|
37
|
+
| [Getting Started](./public-docs/GettingStarted.md) | Installation, server-side setup, client initialization, component rendering, theming |
|
|
38
|
+
| [CDN Configuration](./public-docs/CDNConfiguration.md) | Full CDN (public embed) setup — Admin Console walkthrough, embed types, configuration reference, troubleshooting |
|
|
39
|
+
| [Release Notes](./public-docs/ReleaseNotes.md) | Version history and upgrade notes |
|
|
40
|
+
| [API Reference](./docs-md/README.md) | Full TypeDoc-generated API reference (types, hooks, functions) |
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Installation
|
|
45
|
+
|
|
46
|
+
```sh
|
|
47
|
+
npm install @boomi/embedkit
|
|
48
|
+
# or
|
|
49
|
+
yarn add @boomi/embedkit
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Quick Start — React
|
|
55
|
+
|
|
56
|
+
```jsx
|
|
57
|
+
import BoomiPlugin, { RenderComponent } from '@boomi/embedkit';
|
|
58
|
+
import uiConfig from './boomi.config';
|
|
59
|
+
|
|
60
|
+
// After your server returns a nonce:
|
|
61
|
+
BoomiPlugin({
|
|
62
|
+
serverBase: 'https://your-embedkit-server.com/api/v1',
|
|
63
|
+
tenantId: 'YOUR_BOOMI_PARENT_ACCOUNT_ID',
|
|
64
|
+
nonce: nonceFromServer,
|
|
65
|
+
boomiConfig: uiConfig,
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// Render a component into <div id="boomi" />
|
|
69
|
+
RenderComponent({
|
|
70
|
+
hostId: 'boomi',
|
|
71
|
+
component: 'Integrations',
|
|
72
|
+
props: { componentKey: 'integrationsMain' },
|
|
73
|
+
});
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## Quick Start — CDN (Public Embed)
|
|
79
|
+
|
|
80
|
+
For embedding Boomi AI Agents on any existing website — no npm, no build pipeline required.
|
|
81
|
+
|
|
82
|
+
**1. Create a project** in the [EmbedKit Admin Console](https://admin.boomi.space), configure your agent and origins, and copy the generated public token.
|
|
83
|
+
|
|
84
|
+
**2. Add to your HTML:**
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<!-- EmbedKit stylesheet -->
|
|
88
|
+
<link rel="stylesheet" href="https://cdn.boomi.space/cdn/embedkit-cdn.css" />
|
|
23
89
|
|
|
24
|
-
|
|
90
|
+
<!-- Configure the embed -->
|
|
91
|
+
<script>
|
|
92
|
+
window.BoomiEmbed = {
|
|
93
|
+
publicToken: "pk_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
|
|
94
|
+
agentId: "project_xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
|
|
95
|
+
mountId: "boomi-agent",
|
|
96
|
+
serverBase: "https://api.boomi.space/api/v1"
|
|
97
|
+
};
|
|
98
|
+
</script>
|
|
99
|
+
|
|
100
|
+
<!-- Load the bundle (React + ReactDOM bundled in) -->
|
|
101
|
+
<script src="https://cdn.boomi.space/embedkit-cdn.umd.cjs" async></script>
|
|
102
|
+
|
|
103
|
+
<!-- Mount target -->
|
|
104
|
+
<div id="boomi-agent"></div>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### CDN Assets
|
|
108
|
+
|
|
109
|
+
| File | Purpose |
|
|
110
|
+
|------|---------|
|
|
111
|
+
| `https://cdn.boomi.space/embedkit-cdn.umd.cjs` | JavaScript bundle (UMD — works in all browsers) |
|
|
112
|
+
| `https://cdn.boomi.space/cdn/embedkit-cdn.css` | Required stylesheet |
|
|
113
|
+
|
|
114
|
+
### CDN Configuration Properties
|
|
115
|
+
|
|
116
|
+
| Property | Required | Description |
|
|
117
|
+
|----------|----------|-------------|
|
|
118
|
+
| `publicToken` | Yes | The `pk_...` token from your project in Admin Console |
|
|
119
|
+
| `agentId` | Yes | The project ID (`project_...`) from Admin Console |
|
|
120
|
+
| `serverBase` | Yes | EmbedKit API base URL: `https://api.boomi.space/api/v1` |
|
|
121
|
+
| `mountId` | No | ID of the `<div>` to mount into. Defaults to `"boomi-agent"` |
|
|
122
|
+
| `userId` | No | Your user's identifier for session tracking / analytics |
|
|
123
|
+
| `autoInit` | No | Set to `false` to defer initialization until you call it manually |
|
|
124
|
+
|
|
125
|
+
### CDN Embed Types
|
|
126
|
+
|
|
127
|
+
The CDN supports three presentation modes, configured in the Admin Console:
|
|
128
|
+
|
|
129
|
+
| Type | Description |
|
|
130
|
+
|------|-------------|
|
|
131
|
+
| `single` | Floating launcher pill → opens one agent in a modal |
|
|
132
|
+
| `tiles` | Inline grid of agent cards — users pick and launch |
|
|
133
|
+
| `list` | Floating pill → opens a searchable agent list modal |
|
|
134
|
+
|
|
135
|
+
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](./public-docs/CDNConfiguration.md).
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Theming
|
|
140
|
+
|
|
141
|
+
EmbedKit ships three built-in themes (`boomi`, `light`, `dark`) and supports fully custom themes via CSS variables in `boomi.config.js`.
|
|
142
|
+
|
|
143
|
+
```js
|
|
144
|
+
// boomi.config.js
|
|
145
|
+
export default {
|
|
146
|
+
theme: {
|
|
147
|
+
defaultTheme: 'boomi', // 'light' | 'dark' | 'boomi' | '<your-custom>'
|
|
148
|
+
allowThemes: true,
|
|
149
|
+
},
|
|
150
|
+
cssVarsByTheme: {
|
|
151
|
+
'my-brand': {
|
|
152
|
+
'--boomi-root-bg-color': '#0f172a',
|
|
153
|
+
'--boomi-btn-primary-bg': '#2563eb',
|
|
154
|
+
'--boomi-btn-primary-fg': '#ffffff',
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
};
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Full theming reference (all CSS tokens, built-in themes, runtime switching) is in [Getting Started](./public-docs/GettingStarted.md#styling--theming-overview).
|
|
25
161
|
|
|
26
162
|
---
|
|
27
163
|
|
|
28
|
-
##
|
|
164
|
+
## Examples
|
|
165
|
+
|
|
166
|
+
Working examples are available in the **[embedkit-examples](https://github.com/OfficialBoomi/embedkit-examples)** repository, including React and vanilla JS implementations.
|
|
167
|
+
|
|
168
|
+
You can also open the React example directly on StackBlitz:
|
|
169
|
+
[Boomi EmbedKit React Example](https://stackblitz.com/~/github.com/OfficialBoomi/embedkit)
|
|
170
|
+
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
## Release Notes
|
|
29
174
|
|
|
30
|
-
|
|
31
|
-
🔗 **[Boomi EmbedKit React Example](https://stackblitz.com/~/github.com/OfficialBoomi/embedkit)**
|
|
175
|
+
See [Release Notes](./public-docs/ReleaseNotes.md) for version history.
|