From b3ff9a615d37a348136a32df12929f5796c8b2f8 Mon Sep 17 00:00:00 2001 From: anastasiaberyoza Date: Tue, 2 Dec 2025 17:34:57 +0100 Subject: [PATCH 01/11] Add info on Box Hubs AI Chat --- .spelling | 1 + content/guides/embed/box-embed.md | 55 ++++++++++++++++++++++++++++--- 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/.spelling b/.spelling index e6601448c..a3f0f89f6 100644 --- a/.spelling +++ b/.spelling @@ -300,6 +300,7 @@ invocable analytics ClientID chatbot +chatbots OAuth2 LLMs npm diff --git a/content/guides/embed/box-embed.md b/content/guides/embed/box-embed.md index 3aa10ad77..855d11367 100644 --- a/content/guides/embed/box-embed.md +++ b/content/guides/embed/box-embed.md @@ -11,7 +11,7 @@ alias_paths: # Box Embed 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. +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. ## Before you start @@ -33,9 +33,13 @@ To fetch the Box Embed widget code from the Box web app, perform the following s ### Hubs 1. Navigate to the chosen Hub. -2. Click on the ellipsis menu in the top right corner. +2. Click on the ellipsis menu in the upper-right corner. 3. Click **Embed Hub**. + +You can also embed only the AI chat interface from a Box 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. + + ### Notes 1. Navigate to the chosen Box Note. @@ -54,9 +58,14 @@ To fetch the Box Embed widget code from the Box web app, perform the following s In the next step, configure the parameters of an embeddable element. -| Files | Folders | Hubs | Notes | Apps | -|----------|----------|------------------------| --- | --- | -| Size of the widget.| Size of the widget, sorting of the files in a folder, hiding the navigation path and sidebar. | Size of the widget, hiding the parent navigation path and sidebar. | Size of the widget, skipping cloud game (results in note being in read only mode), hiding notes navigation. | Size of the widget. | +| Element Type | Configuration Options | +|--------------|----------------------| +| Files | Size of the widget. | +| Folders | Size of the widget, sorting of the files in a folder, hiding the navigation path and sidebar. | +| Hubs | Size of the widget, hiding the parent navigation path and sidebar. | +| Hubs AI Chat | Chat mode: button or widget. | +| Notes | Size of the widget, skipping cloud game (results in note being in read only mode), hiding notes navigation. | +| Apps | Size of the widget. | ![Box Embed Configuration](./embed-configuration.png) @@ -161,6 +170,41 @@ within an ` +``` + +#### Using the close button + +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`. + +##### Enabling the close button + +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` + +##### How it works + +1. When `showCloseButton=true` is set, an X button appears in the corner of the chat iframe. +2. When a user clicks this button, the iframe sends a `postMessage` event to the parent window. +3. The event contains `event.data.type` set to `"BOX_AI_CHAT_CLOSE"`. +4. Your hosting application listens for this event and handles the closing logic. + +##### Implementation example + +```javascript +window.addEventListener('message', (event) => { + // Optional: validate origin is from Box for additional security + // if (event.origin !== 'https://app.box.com') return; + + if (event.data && event.data.type === 'BOX_AI_CHAT_CLOSE') { + closeChat(); + } +}); +``` + +##### Event reference + +| Property | Value | Description | +|----------|-------|-------------| +| `event.data.type` | `"BOX_AI_CHAT_CLOSE"` | Indicates the user clicked the close button in the chat iframe. | ## Expiring embed links @@ -364,4 +415,5 @@ and **print** options might not show in mobile browsers. [cloud-game]: https://support.box.com/hc/en-us/articles/360043691034-How-Does-Box-Prevent-Clickjacking [6]: g://embed/box-embed/#box-hubs-ai-chat-embedding [7]: g://embed/box-embed/#chat-button -[8]: g://embed/box-embed/#chat-widget \ No newline at end of file +[8]: g://embed/box-embed/#chat-widget +[9]: g://embed/box-embed/#using-the-close-button \ No newline at end of file From 0e4379a00614fa27def9d4b28902bc73c3b89785 Mon Sep 17 00:00:00 2001 From: anastasiaberyoza Date: Thu, 4 Dec 2025 16:17:24 +0100 Subject: [PATCH 08/11] Modify close button description --- content/guides/embed/box-embed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/guides/embed/box-embed.md b/content/guides/embed/box-embed.md index fee593a4a..c5cff8608 100644 --- a/content/guides/embed/box-embed.md +++ b/content/guides/embed/box-embed.md @@ -244,7 +244,7 @@ In **Chat widget** mode, the AI chat widget is embedded directly on the page usi |-----------|-------------| | `hubId` | The ID of the hub that powers the chatbot. | | `sharedLink` | The shared link hash for hub access. If not provided, the chat loads only for users who are collaborators on the hub. | -| `showCloseButton` | Whether to show the [X (close) button][9]. Set to `false` if you want to implement custom opening/closing logic. Default: `true`. | +| `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. | The following example shows a fully configured chat widget with all available parameters: From f09c1ad704c891b5717145c004a8481c02e90e80 Mon Sep 17 00:00:00 2001 From: Anastasiya Biaroza <56321111+anastasiaberyoza@users.noreply.github.com> Date: Mon, 8 Dec 2025 16:40:37 +0100 Subject: [PATCH 09/11] Update content/guides/embed/box-embed.md Co-authored-by: Justi Sztyper --- content/guides/embed/box-embed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/guides/embed/box-embed.md b/content/guides/embed/box-embed.md index c5cff8608..7c52f99d2 100644 --- a/content/guides/embed/box-embed.md +++ b/content/guides/embed/box-embed.md @@ -263,7 +263,7 @@ The following example shows a fully configured chat widget with all available pa #### Using the close button -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`. +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 via `postMessage`. ##### Enabling the close button From 0b84db027fa84af08b1fee3f5e38657f0784a5ef Mon Sep 17 00:00:00 2001 From: anastasiaberyoza Date: Mon, 8 Dec 2025 17:29:07 +0100 Subject: [PATCH 10/11] Modify versions and scripts --- content/guides/embed/box-embed.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/content/guides/embed/box-embed.md b/content/guides/embed/box-embed.md index 7c52f99d2..78a7e7448 100644 --- a/content/guides/embed/box-embed.md +++ b/content/guides/embed/box-embed.md @@ -84,7 +84,8 @@ If you want to customize Box Embed even further, you can do it programmatically. width="{pixels}" height="{pixels}" frameborder="0" - allow="local-network-access; clipboard-read; clipboard-write" + + allow="local-network-access *; clipboard-read *; clipboard-write *" allowfullscreen webkitallowfullscreen msallowfullscreen> @@ -220,7 +221,7 @@ The following example shows a fully configured chat button with all available pa ```html