Embed a track

Integrate Instruqt into your web pages or platform.

This guide explains how to:
​Embed a track into a web page​
​Use the embed url to share direct access to your track in Kiosk mode​
​Customize the embed / Kiosk mode​
Embed a track into a web page
Embedding is integrating external content into a web page. And Instruqt tracks can be embedded into your web pages. Either as an embed in an HTML <iframe> element or as a link to a track in Kiosk Mode.
Browsers offer Kiosk Mode to run an application full screen without any browser user interface such as toolbars and menus. Kiosk Mode is useful when you need more screen space or want your Instruqt track to run alongside the page that launched the track.
Video tutorial
You can also watch this video tutorial for embedding a track:
Embed a track in an HTML <iframe>
When using embed, people will have unlimited access to your track without any form of authentication. We recommend setting track limits as a safeguard.
Step 1: Copy the embed code
Only team owners and track authors can customise and obtain the embed snippet.
🌐 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 dashboard page.
3.In the header, under the Share dropdown, click Embed.
↳ The Embed pop-up opens. Under Embed iframe snippet 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;" allowfullscreen>
</iframe>
⇨ TEAM , TRACK_NAME, and YOUR_GENERATED_TOKEN will contain your team, track name, and token in the src-line.
4.Optionally, you can choose to customise the embed under Customise. See here for more information. This will update the embed snippet.
5.Click Copy embed code.
Step 2: Embed the code into your web page
Code editor
1.Open the web page where you want to embed your track in your code editor.
2.Paste the copied embed code into the web page's source code.
3.Save and deploy the web page.
Share a track in Kiosk Mode
Kiosk Mode is a direct link to a full-screen version of the embed. You can share the Kiosk mode link with your learners directly or integrate it on your website.
When sharing the Kiosk mode link, people will have unlimited access to your track without any form of authentication. We recommend setting track limits as a safeguard.
How to copy the Kiosk mode link
Only team owners and track authors can configure and obtain the Kiosk Mode link.
🌐 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 share.
↳ Instruqt shows the corresponding Track dashboard page.  
3.In the header, under the Share dropdown, click Embed.
↳ The Embed pop-up opens. Under Kiosk mode link you will see a code snippet 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 src-line.
4.Optionally, you can choose to customise the embed under Customise. See here for more information. This will update the kiosk link.
5.Click to select the URL and then copy it using CTRL/CMD+C (or right-click & copy). You can share this URL with your learners directly or use it to integrate it on your website.

Customize
You can customize an embedded track (or a track shared in Kiosk mode) to your needs. 
🌐 Web UI
Open your browser and go to play.instruqt.com.
↳ Instruqt shows your content.
Click the TRACK_NAME of the embedded track you want to customise.
↳ Instruqt shows the corresponding Track dashboard page.
In the header, under the Share dropdown, click Embed.
↳ The Embed pop-up opens. Under Cutsomize you will see some options. Toggling these will update the preview, the embed snippet, and kiosk url.
Customisation options
Show challenges on splash screen
To better manage expectations of your learners.

Add custom button to the finish screen
To provide a clear CTA to learners after they complete your track.
Button text: what should the button say?
Button link: where (url) should the button take the user?
How should the link behave? Should it open in a new tab (default), in the same _window, or replace the current iframe only (_self)?
​
Customise the "Great job!" text shown on the finish screen
To show something that better aligns with the specific context and purpose of your content.

Disable feedback collection on the finish screen
To help draw attention to the custom button (if set), or to disable feedback collection if unwanted.
Updating the embed customization after embedding
If you have embedded or linked to a track and later customize the settings, you will also need to update your embed snippet or Kiosk mode link.
Programatically customising the embed
All customisation options can also be set programmatically by including the customisation parameters in the embed or Kiosk mode url:
showChallenges=true (default = false)

finish_btn_text=[YOUR_BUTTON_TEXT]
finish_btn_url=[YOUR_BUTTON_URL]
finish_btn_target= _blank , _top or _self
​
finish_text=[YOUR_TEXT]
​
disable_feedback=true (default = false)
​

Monitor tracks played via a track invite in real time

Integrate embedded tracks on your website

Last modified 1mo ago