Embedding tracks
You can embed your tracks on your own page in an iframe, or link to a track in kiosk mode. This page explains how to configure and integrate the embed.
Embedded tracks can integrate with third party platforms (e.g. LMS) by using custom parameters and webhooks or callbacks.

Embedding an iframe

‌You can embed your Instruqt track on web pages such as a documentation site or blog post. To embed your track, visit the embed section of your track configuration page, copy the code snippet and use it in your web page's source code.
This is an example of an iframe embed:
1
<iframe
2
width="1140"
3
height="640"
4
sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
5
src="https://play.instruqt.com/embed/templates/tracks/container"
6
style="border: 0;">
7
</iframe>
Copied!

Kiosk mode (URL)

You can also use Kiosk mode. It is a direct link to a full-screen, embedded version of your track. Kiosk mode means the user cannot navigate to the rest of the platform. Think of kiosk mode as a full screen version of the embed. You can find the link on the embed page, underneath the iframe snippet. Kiosk mode is useful when you need more screen space or want your Instruqt track to run alongside the page it was launched from.
An example of a direct link to a track in kiosk mode:
1
https://play.instruqt.com/embed/templates/tracks/container
Copied!

Configuration

To configure the embedded track, visit the embed configuration settings on the track page.

Options

Include challenges

To show the list of challenges on the embed splash screen, enable this option.

Updating embeds configuration

If you update your embed configuration the code snippet will change. This means you'll also need to update code snippets you generated earlier. To replace the embed, copy the snippet again and replace the old embed code on your website or blog post.

Embed custom parameters

When you need to integrate an embedded track with a third-party system it is important to understand in what context certain events occurred. Suppose a learner is playing a track embedded inside your LMS and you need to match an Instruqt event to the user inside your LMS.
To achieve these types of integrations it is possible to send custom parameters to an embedded track. Custom parameters can be compared to utm parameters available in analytics tools. The parameters give extra contextual information about the current play. For example: the current user inside your LMS or the origin of this specific play.
You can pass these custom parameters at the end of the URL for embedded tracks. Any parameters prefixed with icp_ will be stored with the user's play and propagated to webhook events related to that play.
In this example we've created a custom parameter called user_id and set the value to abcdefg. Multiple parameters can be specified by separating them with an & symbol.
1
https://play.instruqt.com/embed/org/tracks/example?icp_user_id=abcdefg
Copied!

Embed event callbacks

When embedding a track into another page, we send back events to the parent page, using the Window.postMessage() API. You can use these events to store a user's progress, or to trigger other events or behaviors in your own systems.

Events

We send the following events for each track play:
Event Name
Description
track.started
A user starts playing a track
track.completed
A user completes a track
track.challenge_started
A user starts a challenge
track.challenge_skipped
A user skipped a challenge
track.challenge_completed
A user or the platform stopped a track
1
{
2
"event": "track.challenge_started",
3
"params": {
4
"track_slug": "getting-started-with-instruqt",
5
"challenge_slug": "your-first-challenge"
6
}
7
}
Copied!
All events contain the following fields:
Key
Value
Type
track_slug
The track slug
string
The track.challenge_* events also contain the following fields:
Key
Value
Type
challenge_slug
The challenge slug
string
The structure of the event is as follows:
1
{
2
"event": "track.challenge_started",
3
"params": {
4
"track_slug": "getting-started-with-instruqt",
5
"challenge_slug": "your-first-challenge"
6
}
7
}
Copied!

Receiving events

To receive embed events, you'll need to add an event listener to the page that has the Instruqt embed. Here's an example showing how you might do this:
1
window.addEventListener("message", (event) => {
2
// Check the event is from Instruqt
3
if (event.origin !== "https://play.instruqt.com") {
4
return;
5
}
6
7
// Event data is available in event.data
8
console.log(
9
"Received event:", event.data.event,
10
"with params:", event.data.params)
11
}, false);
Copied!
Last modified 29d ago