Skip to content

Commit 845b20a

Browse files
authored
Merge branch 'main' into dependabot/npm_and_yarn/form-data-4.0.4
2 parents 6d6b08a + cc455d0 commit 845b20a

File tree

4 files changed

+157
-15
lines changed

4 files changed

+157
-15
lines changed

.spelling

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,7 @@ invocable
300300
analytics
301301
ClientID
302302
chatbot
303+
chatbots
303304
OAuth2
304305
LLMs
305306
npm

content/guides/embed/box-embed.md

Lines changed: 156 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ alias_paths:
1111
# Box Embed
1212

1313
Box Embed is a HTML-based framework that allows embedding the entire
14-
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.
14+
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.
1515

1616
## Before you start
1717

1818
To create a widget, you need to:
1919

20-
* Set an embeddable element, such as a **folder**, **file**, **Hub**, **note**, or **app** for sharing.
20+
* Set an embeddable element, such as a folder, file, hub, note, or app for sharing.
2121
* Have at least **Viewer** [permissions][5].
2222

2323
## Using web app
@@ -32,19 +32,23 @@ To fetch the Box Embed widget code from the Box web app, perform the following s
3232

3333
### Hubs
3434

35-
1. Navigate to the chosen Hub.
36-
2. Click on the ellipsis menu in the top right corner.
35+
1. Navigate to the chosen hub.
36+
2. Click on the ellipsis menu in the upper-right corner.
3737
3. Click **Embed Hub**.
3838

39+
<Message type='notice'>
40+
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.
41+
</Message>
42+
3943
### Notes
4044

41-
1. Navigate to the chosen Box Note.
45+
1. Navigate to the chosen note.
4246
2. Click on the ellipsis menu.
4347
3. Click **Embed Box Note**.
4448

4549
### Apps
4650

47-
1. Navigate to the chosen Box App or Box App View.
51+
1. Navigate to the chosen app or Box App View.
4852
2. Click on the ellipsis menu.
4953
3. Click **Embed**.
5054

@@ -54,9 +58,14 @@ To fetch the Box Embed widget code from the Box web app, perform the following s
5458

5559
In the next step, configure the parameters of an embeddable element.
5660

57-
| Files | Folders | Hubs | Notes | Apps |
58-
|----------|----------|------------------------| --- | --- |
59-
| 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. |
61+
| Element Type | Configuration Options |
62+
|--------------|----------------------|
63+
| Files | Size of the widget. |
64+
| Folders | Size of the widget, sorting of the files in a folder, hiding the navigation path and sidebar. |
65+
| Hubs | Size of the widget, hiding the parent navigation path and sidebar. |
66+
| Hubs AI Chat | Chat mode: button or widget. |
67+
| Notes | Size of the widget, skipping cloud game (results in note being in read only mode), hiding notes navigation. |
68+
| Apps | Size of the widget. |
6069

6170
<ImageFrame border>
6271
![Box Embed Configuration](./embed-configuration.png)
@@ -75,7 +84,8 @@ If you want to customize Box Embed even further, you can do it programmatically.
7584
width="{pixels}"
7685
height="{pixels}"
7786
frameborder="0"
78-
allow="local-network-access; clipboard-read; clipboard-write"
87+
<!-- Optionally replace * with your enterprise-specific domain (for example, mycompanydomain.app.box.com) -->
88+
allow="local-network-access *; clipboard-read *; clipboard-write *"
7989
allowfullscreen
8090
webkitallowfullscreen
8191
msallowfullscreen>
@@ -132,8 +142,8 @@ You can also set the page to Root Folder/All Files page. Set the URL to
132142
Next, you will want to choose your view customization options. The following is
133143
a list of optional parameters you can configure.
134144

135-
| | |
136-
| --------------------- | -------------------------------------------------------------------------------------------- |
145+
| | |
146+
| -- | -- |
137147
| `hideHubsGallery` | Hide or show navigation chevron button to go back to Hubs gallery. Can be `true` or `false` (default). |
138148
| `hideNavigationControls` | Hide or show navigation controls in Box Notes.|
139149
| `showItemFeedActions` | Hide or show file comments or tasks. Can be `true` (default) or `false`. |
@@ -161,6 +171,133 @@ within an `<iframe>`:
161171
* `oallowfullscreen`
162172
* `msallowfullscreen`
163173

174+
## Box Hubs AI Chat embedding
175+
176+
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.
177+
178+
### Prerequisites
179+
180+
To access a hub embedded in AI Chat mode:
181+
182+
* The enterprise that owns the hub must have Box AI for Hubs enabled.
183+
* The user must be authenticated and have Box AI for Hubs enabled at their enterprise.
184+
* The user needs at least Viewer [permissions][5] on the hub.
185+
186+
### Creating an AI Chat embed
187+
188+
1. Navigate to the hub that will serve as the knowledge source for the AI Chat.
189+
2. Click the ellipsis menu in the upper-right corner.
190+
3. Click **Embed Hub**.
191+
4. Select the **Hub AI Chat** tab.
192+
5. Select chat mode:
193+
194+
* [Chat button][7]
195+
* [Chat widget][8]
196+
197+
6. Copy the embed code.
198+
199+
<Message type='notice'>
200+
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.
201+
</Message>
202+
203+
### Chat button
204+
205+
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.
206+
207+
![Chat button mode](./chat-button.png)
208+
209+
#### Chat button parameters
210+
211+
The **Chat button** mode supports the following parameters:
212+
213+
| Parameter | Required | Description |
214+
|-----------|----------|-------------|
215+
| `data-hub-id` | Yes | The ID of the hub that powers the chatbot. |
216+
| `data-custom-box-domain` | No | For Box instances with custom domains. Default: `app.box.com`. Example: `mycompanydomain.app.box.com`. |
217+
| `data-button-text` | No | Custom text to display on the chat button. Default: `Box AI`. This value is also used for the button's area label for accessibility. |
218+
| `data-shared-link` | No | Optional shared link for hub access. If not provided, the chat loads only for users who are collaborators on the hub. |
219+
220+
The following example shows a fully configured chat button with all available parameters:
221+
222+
```html
223+
<script
224+
src="https://cdn01.boxcdn.net/embeddable-ai-chat-script/2.8.0/box_integrations_ai_chat_button.js"
225+
data-hub-id="123456789"
226+
data-custom-box-domain="mycompanydomain.app.box.com"
227+
data-shared-link="abcdefghijklmnopqrst123"
228+
data-button-text="Ask our HR chatbot">
229+
</script>
230+
```
231+
232+
### Chat widget
233+
234+
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.
235+
236+
<ImageFrame shadow>
237+
![Chat widget mode](./chat-widget.png)
238+
</ImageFrame>
239+
240+
#### Chat widget parameters
241+
242+
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:
243+
244+
| Parameter | Description |
245+
|-----------|-------------|
246+
| `hubId` | The ID of the hub that powers the chatbot. |
247+
| `sharedLink` | The shared link hash for hub access. If not provided, the chat loads only for users who are collaborators on the hub. |
248+
| `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. |
249+
250+
The following example shows a fully configured chat widget with all available parameters:
251+
252+
```html
253+
<iframe
254+
src="https://yourcompanydomain.app.box.com/ai-chat?hubId=123456789&sharedLink=abcdefghijklmnop123&showCloseButton=false"
255+
width="800"
256+
height="550"
257+
frameBorder="0"
258+
<!-- Optionally replace * with your enterprise-specific domain (for example, mycompanydomain.app.box.com) -->
259+
allow="local-network-access *; clipboard-read *; clipboard-write *"
260+
allowfullscreen
261+
webkitallowfullscreen
262+
msallowfullscreen>
263+
</iframe>
264+
```
265+
266+
#### Using the close button
267+
268+
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`.
269+
270+
##### Enabling the close button
271+
272+
To display a close button (✕) in the corner of the iframe, add the `showCloseButton=true` query parameter to your `iframe` URL as follows:
273+
`https://app.box.com/ai-chat?hubId=YOUR_HUB_ID&showCloseButton=true`
274+
275+
##### How it works
276+
277+
1. When `showCloseButton=true` is set, an X button appears in the corner of the chat iframe.
278+
2. When a user clicks this button, the iframe sends a `postMessage` event to the parent window.
279+
3. The event contains `event.data.type` set to `"BOX_AI_CHAT_CLOSE"`.
280+
4. Your hosting application listens for this event and handles the closing logic.
281+
282+
##### Implementation example
283+
284+
```javascript
285+
window.addEventListener('message', (event) => {
286+
// Optional: validate origin is from Box for additional security
287+
// if (event.origin !== 'https://app.box.com') return;
288+
289+
if (event.data && event.data.type === 'BOX_AI_CHAT_CLOSE') {
290+
closeChat();
291+
}
292+
});
293+
```
294+
295+
##### Event reference
296+
297+
| Property | Value | Description |
298+
|----------|-------|-------------|
299+
| `event.data.type` | `"BOX_AI_CHAT_CLOSE"` | Indicates the user clicked the close button in the chat iframe. |
300+
164301
## Expiring embed links
165302

166303
For files, another option is to call the [`GET /files/:id`][1]
@@ -231,9 +368,9 @@ would look something like this.
231368
https://app.box.com/preview/expiring_embed/[HASH]?[parameterName]=true
232369
```
233370

234-
| | |
235-
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
236-
| `showDownload` | Shows the download button in the embedded header bar if the viewer has permissions to download the file. Document file types will also show a print button since print and download are governed by the same permissions. Defaults to `false`. |
371+
| | |
372+
| --- | --- |
373+
| `showDownload` | Shows the download button in the embedded header bar if the viewer has permissions to download the file. Document file types will also show a print button since print and download are governed by the same permissions. Defaults to `false`. |
237374
| `showAnnotations` | Enables users with permission Preview and above to annotate document and image previews. Also shows annotations that are already on the document. To learn more about the file types that annotations is available on as well as the types of annotations, you can refer to our Annotations page. Annotations are available today on web browsers only. On mobile browsers, users will be able to view annotations but not create new ones. |
238375

239376
## Cloud game
@@ -278,3 +415,7 @@ and **print** options might not show in mobile browsers.
278415
[4]: e://put-folders-id--add-shared-link
279416
[5]: https://support.box.com/hc/en-us/articles/360044196413-Understanding-Collaborator-Permission-Levels
280417
[cloud-game]: https://support.box.com/hc/en-us/articles/360043691034-How-Does-Box-Prevent-Clickjacking
418+
[6]: g://embed/box-embed/#box-hubs-ai-chat-embedding
419+
[7]: g://embed/box-embed/#chat-button
420+
[8]: g://embed/box-embed/#chat-widget
421+
[9]: g://embed/box-embed/#using-the-close-button
2.41 MB
Loading
109 KB
Loading

0 commit comments

Comments
 (0)