Box Embed

Overview

Box Embed is a HTML5-based framework that makes it easy to embed the entire Box experience anywhere people work. Just quickly grab the embed code, add to your website or application, and you have instant access to all the Box features you love – like uploads, search, comments, sharing, tagging coworkers and Box Edit for quick file edits. Note that Box Embed is not optimized for mobile browsers.

To embed a user’s root folder, use this URL: https://{custom_domain}.app.box.com/embed/folder/0. This generic embed URL points users to their respective root folder.

Building Box Embed from the web

To grab your iframe from Box, navigate to a folder of your choice, click on the ellipsis beside the folder, go to More Actions, and click Embed Widget.

You are presented with options to adjust the size, view, and sorting.

Once you are done customizing the embed widget, all you will need to do is copy and paste the embed code into your site or web application.

Build Box Embed Programatically

If you want to add more customization to Box Embed, you have the ability to build it programmatically. The format for an embed iframe is as follows:

<iframe src="https://{custom_domain}.app.box.com/embed/s/{shared link value}?view={list or icon}&sortColumn={name, date, or size}&sortDirection=ASC" width="{pixels}" height="{pixels}" frameborder="0" allowfullscreen webkitallowfullscreen msallowfullscreen></iframe>

Finding your shared link value

The first step to building your embed iframe programmatically is to generate or find the value for your shared link. You can find this value by using the Box interface:

Additionally, you can also find this shared link value through the API:

"shared_link": {
  "url": "https://cloud.box.com/s/bxtkjxgiq6v50zfap4h1xez5qthn186u",
  "download_url": null,
  "vanity_url": null,
  ...
}

To learn more about shared links via the API, you can view the documentation.

Determining your customization parameters

Next, you will want to choose your view customization options. The following is a list of optional parameters you can configure:

view

The view type for your files or folders. Can be list (default) or icon.

sortColumn

The order the files or folders are sorted in. Can be name, date (default), or size.

sortDirection

The sort direction of files or folders. Can be ASC (default) or DESC.

showParentPath

Hide or show the folder path in the header of the frame. Can be true or false (default).

showItemFeedActions

Hide or show file comments or tasks. Can be true (default) or false.

Enabling Full Screen Capabilities

To enable full screen capabilities for the Box Embed widget, include one or more of the following parameters if you want the object to be viewable in full screen within an iframe: allowfullscreen, webkitallowfullscreen, mozallowfullscreen, oallowfullscreen, msallowfullscreen.

Assembling your iframe

Last, you can assemble your iframe to use on your site or application:

<iframe src="https://{custom_domain}.app.box.com/embed/s/{shared link value}?view=list&sortColumn=date" width="500" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Questions
If you have any questions, please visit our developer forum.

Box Embed


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.