Skip to content

Commit ee0eea4

Browse files
Add info on the close button
1 parent 3656157 commit ee0eea4

File tree

1 file changed

+62
-10
lines changed

1 file changed

+62
-10
lines changed

content/guides/embed/box-embed.md

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -176,11 +176,11 @@ In addition to embedding the complete Box Hub experience, you can embed only the
176176

177177
### Prerequisites
178178

179-
To embed a hub in AI Chat mode:
179+
To access a hub embedded in AI Chat mode:
180180

181-
* The hub must have Box AI enabled.
182-
* Users must be authenticated to interact with the chatbot.
183-
* Users need at least Viewer [permissions][5] on the hub.
181+
* The enterprise that owns the hub must have Box AI for Hubs enabled.
182+
* The user must be authenticated and have Box AI for Hubs enabled at their enterprise.
183+
* The user needs at least Viewer [permissions][5] on the hub.
184184

185185
### Creating an AI Chat embed
186186

@@ -238,12 +238,63 @@ In **Chat widget** mode, the AI chat widget is embedded directly on page load. I
238238

239239
#### Chat widget parameters
240240

241-
When using the **Chat widget** mode, the generated `iframe` supports the following AI Chat-specific parameters in addition to standard `iframe` attributes:
241+
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:
242242

243-
| Parameter | Required | Description |
244-
|-----------|----------|-------------|
245-
| `hub-id` | Yes | The ID of the hub that powers the chatbot. |
246-
| `custom-box-domain` | No | For Box instances with custom domains. |
243+
| Parameter | Description |
244+
|-----------|-------------|
245+
| `hubId` | The ID of the hub that powers the chatbot. |
246+
| `sharedLink` | The shared link hash for hub access. If not provided, the chat loads only for users who are collaborators on the hub. |
247+
| `showCloseButton` | Whether to show the [X (close) button][9]. Set to `false` if you want to implement custom opening/closing logic. Default: `true`. |
248+
249+
The following example shows a fully configured chat widget with all available parameters:
250+
251+
```html
252+
<iframe
253+
src="https://yourcompanydomain.app.box.com/ai-chat?hubId=123456789&sharedLink=abcdefghijklmnop123&showCloseButton=false"
254+
width="800"
255+
height="550"
256+
frameBorder="0"
257+
allow="local-network-access; clipboard-read; clipboard-write;"
258+
allowfullscreen
259+
webkitallowfullscreen
260+
msallowfullscreen>
261+
</iframe>
262+
```
263+
264+
#### Using the close button
265+
266+
When embedding the Box AI chat directly via an `iframe` (without using the provided script), you can enable a close button within the chat interface that communicates with your parent application via `postMessage`.
267+
268+
##### Enabling the close button
269+
270+
To display a close button (✕) in the corner of the iframe, add the `showCloseButton=true` query parameter to your `iframe` URL as follows:
271+
`https://app.box.com/ai-chat?hubId=YOUR_HUB_ID&showCloseButton=true`
272+
273+
##### How it works
274+
275+
1. When `showCloseButton=true` is set, an X button appears in the corner of the chat iframe.
276+
2. When a user clicks this button, the iframe sends a `postMessage` event to the parent window.
277+
3. The event contains `event.data.type` set to `"BOX_AI_CHAT_CLOSE"`.
278+
4. Your hosting application listens for this event and handles the closing logic.
279+
280+
##### Implementation example
281+
282+
```javascript
283+
window.addEventListener('message', (event) => {
284+
// Optional: validate origin is from Box for additional security
285+
// if (event.origin !== 'https://app.box.com') return;
286+
287+
if (event.data && event.data.type === 'BOX_AI_CHAT_CLOSE') {
288+
closeChat();
289+
}
290+
});
291+
```
292+
293+
##### Event reference
294+
295+
| Property | Value | Description |
296+
|----------|-------|-------------|
297+
| `event.data.type` | `"BOX_AI_CHAT_CLOSE"` | Indicates the user clicked the close button in the chat iframe. |
247298

248299
## Expiring embed links
249300

@@ -364,4 +415,5 @@ and **print** options might not show in mobile browsers.
364415
[cloud-game]: https://support.box.com/hc/en-us/articles/360043691034-How-Does-Box-Prevent-Clickjacking
365416
[6]: g://embed/box-embed/#box-hubs-ai-chat-embedding
366417
[7]: g://embed/box-embed/#chat-button
367-
[8]: g://embed/box-embed/#chat-widget
418+
[8]: g://embed/box-embed/#chat-widget
419+
[9]: g://embed/box-embed/#using-the-close-button

0 commit comments

Comments
 (0)