Body
Environment
Canvas
Issue
How do I embed Dropbox-hosted files in Canvas in order to display the file in a Canvas page or module?
Resolution
In order to embed a Dropbox-hosted files in Canvas, the URL generated must be modified.
Embedding a file in a Canvas Page
You can use the template below to embed a file in a Canvas page.
- Go to the editor in the HTML mode
- Replace add your file link here with the Dropbox share link:
<p><iframe src="add your file link here" width="100%" height="600"></iframe></p>
Here is an example that can be used to demonstrate how to embed a file:
<p><iframe src="https://www.dropbox.com/s/t5e61j6nqnf4yk9/Getting%20Started%20with%20Dropbox.pdf?raw=1" width="100%" height="600"></iframe></p>
When you create a shareable link in Dropbox, you will need to modify the URL link that is generated to share the file
For the file in the example above, the shareable link generated was:
https://www.dropbox.com/s/t5e61j6nqnf4yk9/Getting%20Started%20with%20Dropbox.pdf?dl=0
- Modify the link by changing
?dl=o to ?raw=1
For the example file, this was the share link generated:
https://www.dropbox.com/s/t5e61j6nqnf4yk9/Getting%20Started%20with%20Dropbox.pdf?dl=0
This is the share link after it was modified:
https://www.dropbox.com/s/t5e61j6nqnf4yk9/Getting%20Started%20with%20Dropbox.pdf?raw=1
Embedding a file in a Canvas Module
To add the Dropbox-hosted file to a Canvas module, make the modifications to the share link as noted above and add the share link as an External URL in the module.
Additional Information
The Dropbox LTI in Canvas will add a file as an attachment or as a link to a page, but does not support embedding files in Canvas pages or modules. For information on using the Dropbox LTI in Canvas, see this Canvas doc.
For additional questions, please contact the ITS Service Center