Launching Box Embed 2.0
In previous posts on our Box Developer blog, we discussed the possibility of using Box UI Elements with commonly used frontend frameworks like React, Vue, or Angular. Thanks to those components, you may insert particular functionalities and integrate them into the flow of your custom-built app.
However, what if you want to provide a full experience with the Box Web app within your project? Here comes Box Embed 2.0!
The HTML5-based embeddable framework can be added to any app in minutes, providing the full functionality of Box to any intranet, website, or other enterprise cloud app.
How does it work?
It’s super simple! It’s an iframe, which you can generate within your Box web app and paste the markup wherever you need it.
- Choose the folder or file you want to display within your custom app.
- Check settings to verify that the folder or file is set for sharing and has Viewer or higher collaboration permissions
Click the ellipsis (…) icon and go to More Actions > Embed Widget.
Configure the iframe and copy the Embed code from the popup window.
Paste the HTML element where you need it. Just like in the example below, in a custom-built demo Angular application. For security purposes, the cloud game widget is displayed before the user is able to access the content. This is valid for websites that do not have partner integrations. Simply drag and drop the cloud element to the proper position. This prevents clickjacking as the destination is generated at random.
And voilà! Box is ready to use within your project.
Depending on the permissions set on a particular file or folder, the user might be asked to sign in to their account to be able to view the content. The authorization is fully handled by Embed 2.0. The user may either log in with a set of Box credentials or choose the option Sign In with Google in the login popup, which is done with OAuth. There is no need for any additional setup for your project.
What’s new?
Box Embed has been around for several years, but now we are adding new updates! Say hello to a refreshed Embed UI view within your custom application! However, it’s not just about looks. With Embed 2.0 you can access features like advanced metadata, Content Insights, Files Request, the latest sharing modal, and more.
Advanced use cases
You may also want to build the iframe markup programmatically using our Box API. See the HTML template below; it includes the shared link value and some additional parameters.
Generate the shared link for file or folder
First, if the shared link for the file or folder is not generated, use the API call to create one. Here is a sample curl request:
curl -i -X PUT "https://api.box.com/2.0/folders/12345?fields=shared_link" \
-H "Authorization: Bearer <ACCESS_TOKEN>" \
-d '{
"shared_link": {
"access": "open",
"password": null,
"permissions": {
"can_download": false
}
}
}'⚠️ Find your access token in the Box Developer Console in the app’s Configuration tab.
You can find more details and request examples for files and folders in various programming languages like .NET, Java, Python, Node.js or iOS on our developer documentation site.
Get the shared link
When the shared link is already created, you can fetch it and paste it in the iframe src link.
curl https://api.box.com/2.0/folders/12345?fields=shared_link \
-H "authorization: Bearer <ACCESS_TOKEN>"Be sure to adjust other query parameters in the iframe src (view, sortColumn, sortDirection) to suit your case. Consider also adjusting the settings for full screen capabilities and the expiring embed links. For additional details, check out our Developer Box site.
The shared link may also be generated using our command line tool. Check out my colleague’s Medium post about the Box CLI and get started using it in less than 5 minutes!
Want to learn more? Visit our developer documentation site. Feel free to reach out to us on the developer forum for support or via Box Pulse to make suggestions on how to improve the Box developer experience.
Follow our Box Developers profile on Twitter to stay up-to-date.
Cheers!
