Integrating Grav with Canvas LMS

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:

• Displaying Course Hub Content Within a Canvas Page
• Adding Course Hub Content to a Canvas Module
• Adding a Link to Course Hub Content in the Canvas Menu

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