Embedding Box in Canvas Page

By using Box.com within a page on your Canvas course, you can have an effective way to serve many, or large, 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 use Box.com to embed a directory within your Canvas course.

For more help with Box.com, please contact  Yale ITS Helpdesk or 203-432-9000.

Sign into your Yale Box account using this website: http://box.yale.edu.

1. Click on + New.

 2. Select Folder.

3. Create your folder name- make sure it is unique and you can easily identify what the folder is for (i.e. ENGL 101 Fall 2016 Resources).

4. For the students to view the folder in Canvas, you need to give students permission. You can add them by their yale email address while creating the folder. They will receive notification that they have a folder shared with them.

When you invite people, there are several roles that you can choose and this information is available by clicking "Learn about access levels" information icon.

5. Once the folder is created, you can then click and drag contents into it.

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.

6. Click on the three-dotted button to the right of your folder in Box and then Sharing and then select Embed Widget.

7. Make the desired adjustments to how the embedded content will appear. Select all the embed code and copy this code.

  • If you want the widget to be a wide as the page within Canvas, within the embed code, remove the "500" from the width and input "100%".
  • You can also view it as a list of documents or the icons by modifying the View options.
  • The files can be sorted by Name, Size, or Date.

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.  The following directions are how to create a page in Canvas and paste the embed code into this page.

1. In Canvas, create a new page by selecting Pages in the left navigation of your canvas course.

2. Then clicking “+ Page” in the upper right corner.

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

4. Then select HTML Editor in the top right of the page.

5. Once you have selected “HTML Editor” you will notice that you now have simply a blank box for inputting text. Paste your code here that you previously copied from Box.

Add Page to Navigation

To add a page to your navigation, follow the directions found here: How Do I Create A Web-Link in My Course Navigation?

  • Note: the URL that you will be adding is the URL copied from your Page within your Canvas course. Since this is not an external website, it will not open in a new window.

Once you select "Add App", you want to refresh your page and you will see the link now on your navigation. When you click on the link, you will see either a log in screen for Box or a screen like below:

Once you log in or drag the cloud to its insert, you will see your box folder within Canvas. You can add/edit/delete files from this page directly. If you gave your students access to edit this folder, then they also can add/edit/delete files.

Note: As a security measure, whenever you access the Box link within Canvas you will be asked to either log in or drag the cloud to its insert.