Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
188 lines (101 sloc) 7.57 KB
---
title: Integrating Grav with Canvas LMS
taxonomy:
    category: docs
metadata:
    'twitter:card' : summary
    'twitter:site' : @hibbittsdesign
    'twitter:title' : Integrating Grav with Canvas LMS
    'twitter:description' : Step-by-step guide for embedding Grav Open Course Hub pages within the Canvas LMS.
    'twitter:image': 'http://learn.hibbittsdesign.org/coursehub/integrating-grav-with-canvas-lms/grav-with-canvas-lms.png'
---

The 'chromeless' feature of the Grav Course Hub hides a site's global navigation elements for seamlessly displaying Course Hub page content within the Canvas LMS in three different ways:

Curious what all this might look like? Visit an example Canvas site with Grav Course Hub Content.

Displaying Course Hub Content Within a Page

1. View the page you want to embed, and copy the full URL of that page

2. Navigate to the Canvas Page you want to embed your Course Hub content into, and tap the "Edit" button

3. Tap the "HTML Editor" link

4. Tap the "Rich Content

5. Paste the HTML iFrame code, using the below example
<p><iframe style="border:0px #ffffff none; margin-top:-16px" src="https://example.com/chromeless:true" width="100%" height="950px" allowfullscreen="allowfullscreen"></iframe></p>

6. Highlight the default URL within the iFrame code, not including the "/chromeless=true" text (this will be needed to be included after your URL)

7. Paste the previously copied Course Hub page HTTPS URL, and ensure that the "/chromeless:true" text is still part of the URL

8. Tap the "Save" button

9. Review the final result of the embedded iFrame code.
If a scroll bar is present, you may want to re-edit your iFrame code and adjust the "height" value.

Additional URL parameters supported which might be helpful in addition to the 'chromeless' URL parameter:

  • hidepagetitle:true
  • summaryonly:true

Adding Course Hub Content to a Canvas Module

1. View the page you want to add to a Module, and copy the full URL of that page

2. Navigate to the "Modules" section in Canvas, and tap the "+" button next to a Module

3. Choose to add an "External URL"

4. Paste the previously copied Course Hub page HTTPS URL, and add "/chromeless:true" to the end of the URL

5. Enter the name for the Module item

6. Publish the Module item by tapping on the crossed-circle icon on the far-right of the item

7. With the Module item now published, tap on the item to view it

8. Review the final result of the Module item External URL

Adding a Link to Course Hub Content in the Canvas Menu

1. View the page you want to add to the Canvas menu, and copy the full URL of that page

2. Tap on "Settings" in the Canvas menu, and then tap the "Redirect Tool" button (large curved arrow)

If you do not see the "Redirect Tool" icon, you will need to install it. Tap on the "All" button to view all External Apps and chose the "Redirect Tool" to install it.

3. Tap on the "+ Add App" button

4. Enter the name for your Canvas menu item in the "Name" field

5. Paste the previously copied Course Hub page HTTPS URL into the "URL Redirect" field, and add "/chromeless:true" to the end of the URL

6. Tap the "Add App" button

7. After returning to the "External Apps" page, refresh your Browser and tap on the newly created Canvas menu item

8. Review the final result of the added Course Hub page

TIP: If you are using the most recent version of the Course Hub Bootstrap Theme, there is a theme option to use a Bootstrap CSS styling optimized to match the Canvas LMS.