Embed a track
Integrate Instruqt into your web pages or platform.
This guide explains how to:
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.
You can also watch this video tutorial for embedding a track:
When using embed, people will have unlimited access to your track without any form of authentication. We recommend setting track limits as a safeguard.
Only team owners and track authors can customise and obtain the embed snippet.
🌐 Web UI
- 1.
- 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:<iframewidth="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
, andYOUR_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.
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.
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.
Only team owners and track authors can configure and obtain the Kiosk Mode link.
🌐 Web UI
- 1.
- 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
, andYOUR_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.
You can customize an embedded track (or a track shared in Kiosk mode) to your needs.
🌐 Web UI
- 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.
- 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)