Skip to main content

Box Embed Widget

Steps to Embedding Your Widgets

  1. Create a Box Folder (if you don't have one already)
  2. Get your embed code
  3. Go to the page where you want to place the Box Upload Widget and get to the edit screen
  4. Place your cursor where you want the Box Upload Widget to appear
  5. Create a Javascript - External Source component
  6. Add the copied embed code to the component
  7. Save the component
  8. To view the widget, save the page 

Getting Your Embed Code

In Box, hover over the folder you would like to embed and on the far right a box with 3 dots should appear. To do this, you must be the owner or co-owner of the file/folder.

Select 'File Request'

visual of where to get to the upload embed widget for your Box folder

Customize your widget appearance in the popup window (title, instructions, etc.) and preview what it will look like.

where to enter the title and instructions for your widget appearance
what your title and instructions look like on your widget

Don't forget to use the 'Copy' button to copy the source code.  This needs to be from the Upload Embed Widget section, NOT the File Request Link section.

Creating Your Javascript - External Source Component

While editing the page, place your cursor where you want the Box Upload Widget to be and click the component button on the edit bar.

Edit bar with component tool highlighted

Choose the Javascript - External Source component, and insert.

Choose Component window highlighting the Javascript - External Source and Insert links

Add only the URL string from the copied embed code to the External Javascript URL box.

Edit Component window highlighting the text entry box

Your original code will look something like this:

You will only be adding content after src= and before the type= section (without the ""), like this:

https://usu.app.box.com/upload-widget/embed.js?folderID=51196847998&height=420&isDescriptionFieldShown=0&isEmailRequired=0&title=Submit%20File(s)%20to%202019&token=axhbqyuvfsi7beju1cg39wpcpgybsbbl&width=385

Be sure to save!

It will look like a blue "pill" on the page until you save the page and preview.

Javascript - External Link component blue pill

Trouble Getting Access to Your Folder?

If you can't see the 'Upload Embed Widget', you are not an owner or co-owner of the folder.

what you see if you're not an owner of the folder

You can find the person who owns the folder, and ask them to grant you co-ownership (you can do this temporarily), by clicking on More Actions --> Manage Collaborators.  They will be listed as owner or co-owner under permissions.

find the owner or co-owner with manage collaborators
find the owner