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, like for example on your documentation site, or in a blog posts. To embed your track, visit the embed section of your track configuration page , copy the code snippet and use it on a web page.
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.
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 you want to display on your platform, you can go to the embed configuration settings in the embed settings on the track page.

Options

Include challenges

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

Updating embeds configuration

If you update your embed configuration, the code snippet changes. This means you need to update code snippets you used earlier. To replace the embed, copy the snippet again and paste it on your platform where the previous embed was.

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. Say a student is playing a track embedded inside your LMS you need to match an Instruqt event to the user inside your LMS. To achieve these types of integration 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 can give extra contextual information about the current play, for instance: the current user inside your LMS or the origin of this specific play.
You can pass these custom parameters on the URL of the embedded tracks. Any parameters prefixed with icp will be stored on the user's play and propagated on webhook events related to that play.
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 the users progress, or to trigger other events/behavior 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 contains 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 have to add an event listener to the page that has the Instruqt embed.
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 13d ago