How to access the HTML code widget

Widgets are the tools with which course administrators create and build the pages of their course.

The HTML code widget can be used to embed HTML code onto a course page. This is sometimes called an "Embed Code" (e.g. if embedding a tweet from Twitter).

In order to access the HTML code widget:

1. Go to the page in your course where you'd like to add HTML content.
2. Select Edit mode.
3. In the left-hand widget menu, choose Integration, and then click on the HTML code widget icon. (or you can hold and drag it wherever you'd like on the page).   

How to set up the HTML code widget

After adding a HTML code widget to your page, you can set it up by following the instructions below:

1. Click on the Setup tab at the top of the widget.
2. HTML code: Copy & paste the HTML code into the box.
3. Height (px):  You can set up the initial height for this embedded content. The container will resize with content changes. The default height is 480px.
4. When you're finished, click Done.

Here's an example:

Learner's  view of the example:

Completion settings

Completing activities on a page is how learners make progress and receive their certificates or complete the course.    

As the administrator, you can modify how each widget tracks this progress.    

To do this, click on the Completion Settings tab on the widget and choose one of the following options:    

No completion tracking: This widget will not count towards completion.    

Completed when viewed:  This widget will count as completed as soon as the learner scrolls past it on the page.  

Share settings

There are no share settings for this type of widget.

Developer Usage

Developers can enter JavaScript code to automatically resize the height of the displayed area. To update the height of the containing frame, use the postMesssage API to send the following message (e.g. to resize the height to 200px):

{ "event": "resize", "height": 200 }