Embed a UBbox Folder

Embed an interactive Box folder.

On this page:

Accessibility
  • Third party content must be accessible.

> Read more about making this component accessible.

This process uses the HTML Snippet component, which requires specialist permissions.
> read more about UBCMS permissions

Last reviewed: May 24, 2022

Overview

UBbox provides free access to Box.com for all staff, faculty and students. A UBbox folder can be easily embedded into your Web page, maintaining its functionality.

Embed the Folder

There are two steps: add an HTML Snippet to your page, and get the embed share code from the UBbox folder.

  1. Add an HTML Snippet to your UBCMS page.
  2. Log into UBbox and navigate to where you can see the desired folder listed.
  3. Move your cursor to the far right of the folder details (Name > Updated > Size >). As you hover, click on the three horizontal dots ('More Options') that appear.
  4. From the choices, click 'More Actions' and then 'Embed Widget.'
  5. A dialog box will pop up.
    • For Size, choose Custom.
    • Adjust the width to fit your UBCMS page layout, as follows:
      • For a middle column on a Three-Column page (or 6-column size), width=449
      • For a Two Column 'wide on right' page (or 9-column size): width=682
      • For a One Column Page (or 12-column size): width=960  
    • Use the Preview tool to tweak the height to fit the functional size of the UBbox folder.
    • When ready, copy the provided embed code.
  6. Open the HTML Snippet and paste in the embed code from UBbox. Make sure the HTML Filter setting is set to 'Off'.
Zoom image: The location of the Embed Widget tool. The location of the Embed Widget tool.

The location of the Embed Widget tool.

Zoom image: The Embed Widget tool. The Embed Widget tool.

The Embed Widget tool.

Additional Considerations

Zoom image: UBbox security feature. UBbox security feature.

UBbox security feature.

In the UBCMS, UBbox may ask you or your visitors to log into Box, or to complete a security challenge (e.g. drag a white cloud onto another cloud, as in the screenshot below.

Accessibility Concerns

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)