How To Integrate Websites Into Canvas

I wanted to walkthrough one of my favorite Canvas integrations. Originally, I discovered this integration and used it in one of the early professional development courses I led for faculty transitioning (from D2L) to Canvas back in May 2016, which you can view here. My discovery of this integration was driven by the desire to replicate what Adam Croom had done with his PRPubs.us course website in D2L.

Anyways, this is the type of website integration into Canvas I’m referencing:

Mobile Blogging & Scholarship Canvas course shown with a Domain of One's Own website integrated inside the Canvas Course.
View from Canvas of an integrated website.
Canvas app on an android phone displaying the redirect tool+website integration.
View from Canvas App of the same integrated website.

What You Need

1. Website you control – If you have a DIY website through a web hosting company or use website companies like WordPress.com, then you are off to a great start. I use Reclaim Hosting for my website needs as Reclaim specializes in education. (Technically, any website can be used, but the one’s I’ve tried using have been hit or miss. Thus, I believe a website you control is ideal and should work perfectly.)

2. An encryption SSL certificate for your website – Your website will only be displayed within Canvas if the site is encrypted. In other words, your site needs to function using a https:// address (instead of http://). There are many ways to obtain an encryption certificate. I use Let’s Encrypt SSL which is offered for free by several web hosting companies (including Reclaim Hosting). Alternatively, you can use a service like Cloudflare to acquire a SSL certificate for your website.

Please note that many website companies like WordPress.com furnish https:// versions of websites to their users by default. In such case, you don’t need to acquire a SSL certificate for your website as it’s already present. If you’re unsure about whether your site meets this requirement, try visiting your website with https:// at the front of the URL (like so: https://example.com) and see if it loads normally.

3. Canvas Course – Use your institutions page to login to Canvas and create a new course or use an existing one. If you do not currently have access to Canvas, you can acquire a free account by selecting “Build It” on this page.

4. Redirect Tool – In your Canvas course, under “Settings>Apps” is the Redirect Tool (the best app!)—make sure it is available for your course. Refer to the screenshot below, under Step 1, as a guide.

Setup Steps

Step 1 – Navigate to Canvas course settings and find the Redirect Tool in the Apps Tab:

Image showing how to access the redirect tool in a Canvas course.

Step 2 – Click “Add App” to add the Redirect Tool:

Image showing how to add the redirect tool in a Canvas course.

Step 3 – Configure the Redirect Tool with your Website Name (will appear in Course Navigation), the https:// URL, and check “Show in Course Navigation:”

Image showing my configuration settings of the redirect tool in a Canvas course.

Zoomed into my configuration settings for the Redirect Tool:

Zoomed in image showing my configuration settings of the redirect tool in a Canvas course.

Step 4 – Refresh the course by clicking “Home” to see the fruits of your labor:

Image showing successful integration of the redirect tool in a Canvas course.

Image showing successful integration of the redirect tool in a Canvas course.

Step 5 – Enjoy:

Image showing successful integration of the redirect tool in a Canvas course.

Troubleshooting

If you’re experiencing any issues, they are typically caused by one of these two problems:

Problem 1 - Redirect Tool Configuration
Problem 2 - Don't have https:// URL for the Website

Integration Examples

I recently submitted proposals that included this website integration to the #Domains17 conference. As I shared then, I believe the best examples of this integration involve a course blog or research/course website.

Course Blog – The course blog in Canvas is a fantastic use case of the Redirect tool combined with the FeedWordPress plugin to bring all of the students’ posts from their own websites into Canvas. This setup is inline with the POSSE publishing model and can be utilized to bring students’ course reflections into Canvas for easier access and to promote peer-peer scholarship.

Cours Blog inside of a Canvas Course using the Redirect Tool

Research/Course Website – If you have course contents published on websites outside Canvas, you can use this trick to bring those materials into your courses. I’ve used this to bring my Canvas Camp curriculum into Canvas courses, but you could use it for course wikis, Drupal or Omeka research websites, and beyond.

Canvas Camp website displaying a lit campfire inside of a Canvas Course

Anonymous Blogging Inside of Canvas – When I ran the Mobile Blogging and Scholarship Canvas training back in May 2016, I used all of these tool in addition to the AccessPress Anonymous Post plugin to allow instructors to blog directly within Canvas. Here’s some more information of the tools I used to accomplish this course design.

Canvas course with AccessPress Plugin configured to let students blog directly within Canvas.

There are many more use cases beyond what I’ve presented here, but I hope this post gives you the guidance and inspiration to integrate websites directly into Canvas.

The featured image is provided CC0 by Corinne Kutz via Unsplash.

Summer Updates & Grandmother Passing

Goodness, so many things are going on at the moment. At work I have been focused on all the training programs I am developing and facilitating this summer and upcoming semester. Additionally, I want to share some awesome things I have been working on in Canvas. Between itching to write about Canvas and my experiences from recently attending InstructureCON 2016, I have started writing only to be overwhelmed with all I want to do at the moment.

But none of that matters right now.

Writing and projects are on hold because while I was at InstructureCON this past week, my Grandmother passed away—complications from a surgery. It has been hard to express what I am feeling as I go through pictures and revisit memories. I have been ignoring social media and avoiding checking email for a few days. Right now, I just need time.

Even with my sadness, I wanted to tell you about a project I’ve started that makes me really excited. A project in honor of my Grandmother.

ellenjayne.keeganslw.com

Yesterday, I build a website in memoriam to her. The website itself is rather simple, but the functionality is phenomenal. This website facilitates the crowdsourcing of stories and media pertaining to my grandmother. What has been really exciting, even in the first few hours, is that I am reading stories and seeing pictures I never would have discovered. For example, my father posted one memory I’ve never heard and I just shared one as well.

I really want this tribute to my Grandmother to grow. So, I set up the ability for family, friends, and her many students to write about their memories of her. Additionally, I have created a space on the website where I am currently receiving pictures and videos of my Grandmother. If you want to see the submissions, check out the written memories and media that’s already available.

Screen Shot 2016-07-24 at 12.42.30 PM
Website lets you read memories written about Grandmommy.
Screen Shot 2016-07-24 at 12.42.47 PM
Website lets you view photos and videos of Grandmommy.

Website Anatomy

The ellenjayne.keeganslw.com website is built with WordPress and automated using a few plugins, dropitto.me, and OneDrive.

First, I setup the AccessPress Anonymous Post plugin to allow others to submit their stories of my Grandmother without needing an account on the website. This allows me to automate all of the writing that takes place on the website and notifies me about new posts.

accesspress anonymous plugin form
AccessPress Anonymous Post plugin on website.

Next, I setup a dropitto.me account and connected it to my OneDrive cloud storage (since I have 1TB of space from working at a University). These two services allow others to submit photos & videos directly to a folder in my OneDrive. I embedded the submission of photos & videos into one webpage and the OneDrive gallery on another page. (I explored the Perfect OneDrive Gallery & File plugin to display a gallery directly in the website rather than linking out, but ran into problems that I didn’t want to spend time solving.)

Dropitto.me integrated into website to share media files.
Dropitto.me integrated into website to share media files.

Finally, since dropitto.me is limited to 100MB file size submissions, I also setup a page where people can submit URLs to photos and videos they wish to share. That way if individuals have large video files, they can submit a Dropbox, Google Drive, or OneDrive link. Alternatively, this allows people to submit links to FaceBook photos, etc. This is the only part of the website that is not currently automated. I have enabled email notifications upon receiving submissions through this form, but this feature requires my attention.

In Memoriam Projects

In addition to this website, I am also working on a Twine game and preparing for the memorial service. At the moment, it sounds like family members want me to live stream the service and setup a place where we can record videos of people reminiscing about my grandmother. Additionally, I hope to have ellenjayne.keeganslw.com available at the service to offer attendees the opportunity to read and writing memories about my Grandmother. The goal of each of these projects it to allow people to share their experiences and connect to one another like they connected to Grandmommy.

Closing

All of these projects, especially the website, are important to me as a tribute to my Grandmother and to facilitate positive connections between family, friends, and acquaintances as we honor this wonderful women. She had a profound impact on so many people in this world and she will be sorely missed by all.

Writing this has been especially hard because this will be my first post that is not read by my Grandmother (after she became a subscriber to my website, she started reading everything I wrote). Yet, I want to share ellenjayne.keeganslw.com because, although I am grieving, everyone’s memories are bring me joy.

The featured image is provided CC0 by Viktor Mogilat via Unsplash.