Canvas @ YaleInstructor Guides Files ManagementEmbedding Box into a Canvas Course

Embedding Box into a Canvas Course

By using Box.com within a page on your Canvas course, you can have an effective way to deliver large size or many files to students in Canvas. You can also use this Box folder as a way to allow students to upload files to share with the class as a whole. This guide outlines how to link to Box from your Canvas course.

This is a multi-step process with several components along the way. The sequence is as follows:

  1. Create a Box Folder to link to, or use an existing folder.
  2. Access the Embed Code for your Folder to get the embed code.
  3. Create a New Page in Canvas to embed the Box folder.
  4. Add the Page to Course Navigation in which the Box folder is embedded.

Creating a Box Folder

Sign into your Yale Box account using this website: http://box.yale.edu. If you have an existing Box folder you would like to link to, skip to "Access the Embed Code for your Folder".

1. Click on "New".

2. Select "Folder".

Click on "New" and select "Folder

3. A pop up will appear. Give the folder a name and click "Create".

Give the folder a name and click "Create".

Access the Embed Code for your Folder

In order to add the shared box folder to your Canvas site, you will need to have an embed widget. The following directions are how you can obtain and copy this code.

1. In Box, click on the three-dotted button to the right of your folder.

2. Hover over "More Actions".

3. Select "Embed Widget".

Click on the three dots, hover over "More Actions", and select "Embed Widget"

4. A pop up will appear. Make changes to the setting as you desire and copy the embed code. Once the code is copied, you can close out of the pop up.

  • Size - You can choose between the sizes of small, medium, and large.
  • Sort - The files can be sorted by Name, Size, or Date.
  • View  - You can choose to the folders as a list or a grid.
Copy the embed code

Create a New Page in Canvas

In order to embed the Box folder into your Canvas site, you will need to create a page within Canvas.

1. In  your Canvas course, create a new page by going to "Pages" and click "+Page" in the upper right hand corner.

Go to "Pages" and click "+Page"

2. Name your new page in the top text box.  

3. Change to the HTML editor by clicking the "HTML Editor" link at the top right.

Name the page and click "HTML Editor"

4. Once you are in the HTML editor, paste the embed code here that you previously copied from Box.

5. Click "Save & Publish" to make available.

Paste the embed code and click "Save & Publish".

6. Once saved, the page will look similar to below. You maybe asked to click and drag a white cloud into a dark cloud. After doing so, your folder will appear

Add Page to Navigation

Link the page you just created to the course navigation.

1. Copy the page URL.

Copy the page URL.

2. Go to "Settings" on your course navigation.

3. Click on the "Apps" tab across the top.

4. In the "Filter by name" box, type in "Redirect".

5. Click on the "Redirect Tool".

Go to "Settings", click on "Apps", search for "Redirect", and click on the "Redirect Tool"

6. Click the "+Add App" button.

Click the "+Add App" button.

7. Name the link as you would like it to appear in the course navigation, and paste the URL to page you created in the earlier steps

8. Uncheck "Force open in a new tab" and check "Show in Course Navigation".

9. Click "Add App".

Name the link, uncheck "Force open in new tab", check "Show in Course Navigation", click "Add App"

10. Refresh your page and you will see the link in your course navigation.

Refresh your page and you will see the link in your course navigation.

For more help with Box.com, please contact Yale ITS Helpdesk. For general help, please contact canvas@yale.edu.