You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Box Embed is a HTML-based framework that allows embedding the entire Box Web App experience in a custom-made application. Box Embed provides the ability to upload, search, comment, share, tag, and edit files using Box Edit. You can also embed Box Hubs AI Chat for a focused chatbot experience.
2.Click on the ellipsis menu in the upper-right corner.
48
48
3.\[**Hubを埋め込む**] をクリックします。
49
49
50
+
<Messagetype="notice">
51
+
52
+
You can also embed only the AI chat interface from a hub. Users can ask questions and get AI-powered answers based on the hub's files, without accessing navigation or file browsing features. For more information, see the [Box Hubs AI Chat embedding][6] section.
In addition to embedding the complete Box Hub experience, you can embed only the AI-powered chat interface. This mode provides a focused chatbot experience powered by the files within a specific hub, without navigation or content browsing options.
192
+
193
+
### 前提条件
194
+
195
+
To access a hub embedded in AI Chat mode:
196
+
197
+
* The enterprise that owns the hub must have Box AI for Hubs enabled.
198
+
* The user must be authenticated and have Box AI for Hubs enabled at their enterprise.
199
+
* The user needs at least Viewer [permissions][5] on the hub.
200
+
201
+
### Creating an AI Chat embed
202
+
203
+
1. Navigate to the hub that will serve as the knowledge source for the AI Chat.
204
+
205
+
2. Click the ellipsis menu in the upper-right corner.
206
+
207
+
3.\[**Hubを埋め込む**] をクリックします。
208
+
209
+
4. Select the **Hub AI Chat** tab.
210
+
211
+
5. Select chat mode:
212
+
213
+
*[Chat button][7]
214
+
*[Chat widget][8]
215
+
216
+
6. Copy the embed code.
217
+
218
+
<Messagetype="notice">
219
+
220
+
If you experience issues with the Box Hubs AI Chat embedding, regenerate the embed code to get the latest version of the script by repeating steps 1-6 above.
221
+
222
+
</Message>
223
+
224
+
### Chat button
225
+
226
+
In **Chat button** mode, the AI chat widget opens after the user clicks the button. It is generated as a Box-hosted `script` and displays a floating chat button on your page.
227
+
228
+
229
+
230
+
#### Chat button parameters
231
+
232
+
The **Chat button** mode supports the following parameters:
|`data-hub-id`| はい | The ID of the hub that powers the chatbot. |
237
+
|`data-custom-box-domain`| いいえ | For Box instances with custom domains. Default: `app.box.com`. Example: `mycompanydomain.app.box.com`. |
238
+
|`data-button-text`| いいえ | Custom text to display on the chat button. Default: `Box AI`. This value is also used for the button's area label for accessibility. |
239
+
|`data-shared-link`| いいえ | Optional shared link for hub access. If not provided, the chat loads only for users who are collaborators on the hub. |
240
+
241
+
The following example shows a fully configured chat button with all available parameters:
In **Chat widget** mode, the AI chat widget is embedded directly on page load. It is generated as an `iframe` and displays the full chat interface immediately.
257
+
258
+
<ImageFrameshadow>
259
+
260
+
261
+
262
+
</ImageFrame>
263
+
264
+
#### Chat widget parameters
265
+
266
+
In **Chat widget** mode, the AI chat widget is embedded directly on the page using an `iframe`. You can customize the behavior by adding URL parameters to the iframe's `src` attribute:
|`hubId`| The ID of the hub that powers the chatbot. |
271
+
|`sharedLink`| The shared link hash for hub access. If not provided, the chat loads only for users who are collaborators on the hub. |
272
+
|`showCloseButton`| Whether to show the [X (close) button][9] in the chat interface. When set to `true`, the close button is displayed. When a user clicks this button, Box generates an event that is sent to the parent web application, enabling you to implement custom closing logic based on the user interaction. |
273
+
274
+
The following example shows a fully configured chat widget with all available parameters:
When embedding the Box AI chat directly with `iframe` (without using the provided script), you can enable a close button within the chat interface that communicates with your parent application through `postMessage`.
294
+
295
+
##### Enabling the close button
296
+
297
+
To display a close button (✕) in the corner of the iframe, add the `showCloseButton=true` query parameter to your `iframe` URL as follows: `https://app.box.com/ai-chat?hubId=YOUR_HUB_ID&showCloseButton=true`
298
+
299
+
##### How it works
300
+
301
+
1. When `showCloseButton=true` is set, an X button appears in the corner of the chat iframe.
302
+
2. When a user clicks this button, the iframe sends a `postMessage` event to the parent window.
303
+
3. The event contains `event.data.type` set to `"BOX_AI_CHAT_CLOSE"`.
304
+
4. Your hosting application listens for this event and handles the closing logic.
305
+
306
+
##### Implementation example
307
+
308
+
```javascript
309
+
window.addEventListener('message', (event) => {
310
+
// Optional: validate origin is from Box for additional security
311
+
// if (event.origin !== 'https://app.box.com') return;
312
+
313
+
if (event.data&&event.data.type==='BOX_AI_CHAT_CLOSE') {
0 commit comments