Integrate with Skilljar
This guide explains how to integrate Instruqt tracks within Skilljar, a leading Learning Management System (LMS).
Integrating Instruqt tracks within Skilljar is based on embedding tracks and embedding event callbacks into Skilljar courses. Embedding a track is essential, but embedding event callbacks is optional. For example, you can embed events callbacks when you want to track a learner's progress in Skilljar.
You can either embed an Instruqt track in an HTML <iframe> element or as a link in Kiosk Mode. In short, <iframe> embeds your track into a web page together with other content, and Kiosk Mode embeds your track solitary and shows it full screen. The following steps show both ways.
Start with generating and copying the HTML <iframe> embed code from Instruqt:
🌐 Web UI
- 1.
- 2.Click the TRACK_NAME of the track you want to embed. ↳ Instruqt shows the corresponding Track overview page.
- 3.Click Edit track details followed by Embed. ↳ The Embed page opens. And under
Embed Iframe
you will see a code snippet like this:<iframewidth="1140"height="640"sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"src="https://play.instruqt.com/embed/TEAM/tracks/TRACK_NAME?token=YOUR_GENERATED_TOKEN"style="border: 0;"></iframe>⇨TEAM
,TRACK_NAME
, andYOUR_GENERATED_TOKEN
will contain your team, track name, and token in the src-line. - 4.Click Copy embed code.
Now move over to Skilljar to embed the track in an <iframe>:
Skilljar
- 1.
- 2.Click Course management > Courses. ↳ You see a list of all courses.
- 3.Click New Course.
- 4.In the Title field, enter a course title—for example,
Sales engineering training
. - 5.Click Save.
- 6.Click the Curriculum tab.
- 7.In the New Lesson list, select Text.
- 8.In the Title field, enter a lesson title—for example,
Create an account
. - 9.Click <> under Content. ↳ A Source code pop-up opens.
- 10.Paste the earlier copied embed code into the pop-up and click Save. ↳ You see a preview of your track now.
- 11.Click + Settings.
- 12.Select the Disable Automatic Completion checkbox.
- 13.Click Save Lesson.
First, create a new lesson in Skilljar. This guide assumes you left off at adding a lesson for embedding a track in an <iframe> and you are still on the Curriculum page:
Skilljar
- 1.In the New Lesson list, select Text.
- 2.In the Title field, enter a lesson title—for example,
Update an account
. - 3.Click <> under Content.
- 4.Paste the following HTML code into the Source code pop-up:<center><h2><a href="KIOSK_URL" target="_blank" rel="noopener">Open Sales Engineering training: update an account</a></h2><p style="text-align: left;"> </p></center>
- 5.Leave the Source code pop-up open for now.
Now head over to Instruqt to generate and copy the Kiosk Mode URL:
🌐 Web UI
- 1.
- 2.Click the TRACK_NAME of the track you want to embed. ↳ Instruqt shows the corresponding Track overview page.
- 3.Click Embed under
Settings
. ↳ The Embed page opens. And underEmbed URL
you will see a URL like this:https://play.instruqt.com/embed/TEAM/tracks/TRACK_NAME?token=YOUR_GENERATED_TOKEN⇨TEAM
,TRACK_NAME
, andYOUR_GENERATED_TOKEN
will contain your team, track name, and token in the URL. - 4.Click Copy embed URL.
Move over to Skilljar again to embed the track in Kiosk Mode. You have the Source code pop-up still opened:
Skilljar
- 1.Replace
KIOSK_URL
in the<a href>
with the earlier copied embed URL. ↳ Your HTML code should look something like this:<center><h2><a href="https://play.instruqt.com/embed/instruqt/tracks/salestraining?token=em_b5AFjBoWbhFgX1nb" target="_blank" rel="noopener">Open Sales Engineering training: update an account</a></h2><p style="text-align: left;"> </p></center> - 2.Click Save. ↳ You see a preview of your track now.
- 3.Click + Settings.
- 4.Select the Disable Automatic Completion checkbox.
- 5.Click Save Lesson.
Preview your Skilljar course
Assuming that you are still on the Curriculum page, in the Preview list, select This Lesson.
↳ Skilljar opens a new tab with the lesson containing your track.
You can also watch this video tutorial for embedding a track:
Instruqt sends back events to the parent web page when embedding a track. Instruqt uses the Window.postMessage() API to send these events. You can use these events to store a learner's progress in Skilljar.
Instruqt sends the following events for each track play:
track.started | A learner starts a track (clicks "Launch") |
track.ready | The track's sandbox is ready to start (loading completed) |
track.completed | A learner completes a track |
track.challenge_started | A learner starts a challenge |
track.challenge_skipped | A learner skipped a challenge |
track.challenge_completed | A learner or the platform stopped a track |
Skilljar, on the other end, has an API with functions like
completeLesson()
to mark a lesson as completed. So if you signal the Instruqt track.completed
event and then call the Skilljar completeLesson()
function, you can track the learners' progress. You can also watch this video tutorial for embedding event callbacks:
Awesome! Your course creators in Skilljar will love you for this.
Last modified 1mo ago