Integrate with Skilljar

This guide explains how to integrate Instruqt tracks within Skilljar, a leading Learning Management System (LMS).
Integration methods
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.
Integrate with Skilljar
Step 1: Embed an Instruqt track into a Skilljar course
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.
<iframe>
Start with generating and copying the HTML <iframe> embed code from Instruqt:
🌐 Web UI
1.Open your browser and go to play.instruqt.com.
↳ Instruqt shows your content.  
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:
<iframe 
    width="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, and YOUR_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.Navigate to dashboard.skilljar.com.
↳ Skilljar opens the Home page.  
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.
Kiosk mode
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;">&nbsp;</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.Open a new tab in your browser and go to play.instruqt.com.
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 under Embed URL you will see a URL like this:
https://play.instruqt.com/embed/TEAM/tracks/TRACK_NAME?token=YOUR_GENERATED_TOKEN
⇨ TEAM , TRACK_NAME, and YOUR_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;">&nbsp;</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.
Video tutorial
You can also watch this video tutorial for embedding a track:
Step 2: Embed event callbacks to track the learners' progress
Instruqt events
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 API
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. 
Add an event listener
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 Instruqt
            if (event.origin !== "https://play.instruqt.com") {
                return;
            }
​
            // Event data is available in event.data
            console.log(
                "Received event:",
                event.data.event,
                "with params:",
                event.data.params
            );
​
            // Mark SkillJar lesson complete
            if (event.data.event === "track.completed") {
                completeLesson();
            }
        },
        false
    );
</script>
↳ Line 19 signals an Instruqt track.completed event and line 20 calls the Skilljar completeLesson() 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.
Video tutorial
You can also watch this video tutorial for embedding event callbacks:
Awesome! Your course creators in Skilljar will love you for this.

Integrate with Salesforce (beta)

Integrate using LTI

Last modified 1mo ago

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