Embedding External Web Content

You can add third party external web content to a course with either a URL link or an iframe that can embed into the page.

To embed external web content, select the new Embed block. (Note that Embed blocks can only be added to courses at this time and is not yet available for widgets).  

1 - On a course editor page, click on the green plus button to add a new block and choose One Column.

2 - Select the Embed block.

3 - This will add the Embed block to your page. You have two options: add an external link, or add an iframe embed code.  

4 - You must now grab these links from your external content. For this example, we will use links from a partner called The Game Agency, who allows users to create fun web games for training. This is just an example, you can use links from any third party web provider who allows you to share their content.   

Adding an embed link

1 - You’ll need to capture the third party URL link for the content by going to their site, finding and copying the link provided. On The Game Agency site, you would find that here:

The copied link in this case looks like:

https://knowblysupport.thetrainingarcade.com/games/scramble/supporttest

2 - Copy this link into the Embed block under Link and click Update.

3 - You can adjust the sizing of this link in the Elements Settings panel on the left. You can set width by pixels or percentage, and height by pixels.

4 - You can now test the external web content by switching to Preview mode and interacting with the embedded object.

Adding an iframe embed code

1 - You’ll need to capture the third party iframe embed code for the content by going to their site and copying the embed code provided. On The Game Agency site, you would find that here:

The copied code in this case looks like:

<iframe src="https://knowblysupport.thetrainingarcade.com/games/scramble/supporttest" style="overflow: hidden;" width="1024" height="1024" frameborder="0"></iframe>

2 - Paste this code into your course’s Embed block in the Embed Code field and click Update to add.

3 - With embedded code, you can adjust the sizing under “width” and “height” in the code itself.

4 - You can now test the external web content by switching to Preview mode and experimenting with the size of the embedded object. In this example, 1024 pixel width may be too large!

To change the Embed settings, switch to Edit mode and select the code icon for that block.

NOTE: While we are happy to help with any issues using this feature, Knowbly is not responsible and cannot directly support functionality or operational issues in embedded third party content.