Embed Box into Sakai with a CSS trick
I use a shared folder in Box to distribute files to my multimedia course. While preparing in my office I can drop files into a desktop folder that syncs with the cloud. When I create demo files during class I can drag them into a browser window that uploads directly to Box — students can download the items immediately.
My course website in Sakai presents a portal to the Box folder using a “web content tool.” This was easy to create, since Box assigns a distinct address to each file and folder. When you view the folder in a browser, Box displays branding at the top and a list of options on the side. To reduce confusion in Sakai I eliminate that “overhead” by embedding a view of the Box folder into a web page. Check below the images to see how it works.
Get the embed code
- From your browser, log into Box and view the shared folder
- At the right side of the screen, click the work “Link”
- Click the “Embed” tab
- Copy the embed code
Make the HTML document
- In Sakai, open the Resources tool
- From the “Add” dropdown menu, choose “Create HTML page”
- Click “Source” at the top of the toolbar
- Paste the code you copied above and click “Continue”
- Enter a name like “Shared Box Folder” and click “Finish”
Add the Web Content tool
- Still in “Resources,” click the “Actions” dropdown next to your new file
- Select “Edit details”
- Copy the Web Address (URL) and click “Cancel”
- Open the Site Editor tool and choose “Edit Tools”
- Check “Web Content” and click “Continue”
- Enter a Title like “Shared Box Folder”
- Paste the URL into the “Source” box and click “Continue”
- Click “Finish”
Now you have a link to Box on your Sakai course menu. The only problem is that there can be a delay while Box loads the page. At first I dealt with this by inserting a message above the embed code: “Please be patient while the page loads.” However, the message remains, even after the page has loaded. Eventually I discovered a CSS trick that positions the Box display on top of the warning text.
- Edit your HTML document in the Sakai resources tool
(click the “Actions” dropdown and select “Edit content”)
- Copy the first three lines of code shown below
- Paste them above your embed code
- Enter a </div> tag below the embed code and save the file
<div style="position:absolute;left:0px;top:0px;"> <p>Please be patient while the page loads.</p></div> <div style="position:absolute;left:0px;top:0px;"> /* Your embed code goes here */ </div>
You can use the same techniques when embedding other content, such as a YouTube video or a SoundCloud player.