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 use the embed.

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:

<iframe
width="1140"
height="640"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals"
src="https://play.instruqt.com/embedv2/templates/tracks/container"
style="border: 0;">
</iframe>

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:

https://play.instruqt.com/embedv2/templates/tracks/container

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 event callbacks

Embed events are in private beta. Please contact us if you are interested in using this feature.

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 completed a challenge

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:

{
"event": "track.challenge_started",
"params": {
"track_slug": "getting-started-with-instruqt",
"challenge_slug": "your-first-challenge"
}
}

Receiving events

To receive embed events, you have to add an event listener to the page that has the Instruqt embed.

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)
}, false);