Transforming UB’s digital communications.
Embed a UBbox Folder
Embed an interactive Box folder.
On this page:
Accessibility
- Third party content must be accessible.
This process uses the HTML Snippet component, which requires specialist permissions.
> read more about UBCMS permissions
Last reviewed: November 6, 2023
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.
- Add an HTML Snippet to your UBCMS page.
- Log into UBbox and navigate to where you can see the desired folder listed.
- 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.
- From the choices, click 'More Actions' and then 'Embed Widget.'
- 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.
- For Size, choose Custom.
- Open the HTML Snippet and paste in the embed code from UBbox. Make sure the HTML Filter setting is set to 'Off'.
The location of the Embed Widget tool.
The Embed Widget tool.
Additional Considerations
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.
Known Issue: UB Box embed stuck in login loop
Accessibility Concerns
Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.
This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.
Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.
Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.
Best practice: if your code relies on a 'div' or iframe to house its content on your page, it must have an identifying label, often coded as a 'aria-label' or sometimes a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.
If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.