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:
Event Name | Description |
track.started | A learner starts playing a track |
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 will need to add a JavaScript event listener to the lesson pages to signal Instruqt events. In addition, you need to call the Skilljar
completeLesson()
function whenever the event listener signals an Instruqt track.completed
event. You can add an event listener in Skilljar from a Theme Code Snippet. Let's set this up for the lessons you created so far:
Skilljar
- 1.Click Theming > Themes from the main menu.
- 2.Click New Theme.
- 3.In the Theme Name field, enter a name—for example,
Instruqt tracks
. - 4.Click + Code Snippets.
- 5.In the Global Code Snippet field, enter the following JavaScript code:<script>window.addEventListener("message",(event) => {// Check the event is from Instruqtif (event.origin !== "https://play.instruqt.com") {return;}// Event data is available in event.dataconsole.log("Received event:",event.data.event,"with params:",event.data.params);// Mark SkillJar lesson completeif (event.data.event === "track.completed") {completeLesson();}},false);</script>↳ Line 19 signals an Instruqt
track.completed
event and line 20 calls the SkilljarcompleteLesson()
function. - 6.Click Save.
- 7.Publish your course in Skilljar, run the course, and check the analytics to see that the course is completed when you finish the tracks inside the lessons.
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