Embedded code

What is an Embedded Code Element?

An embedded code is an element that allows you to display content from one website on another page, such as videos, social media feeds, or maps, without having to host it yourself.

Edit General Embedded Code Element Settings

Open an embedded code element settings window to start editing.

1

Type

Select an embedded code type from a drop-down menu.

2

Completion Tracking

Select a pass condition for the interaction transfer from the drop-down menu:

  • No tracking: Requires no actions. The element is counted as passed;

  • On completion: Tracks the Complete status that a SCORM package or embedded element passes;

  • On click: Tracks a click inside the embedded element.

Completion Tracking option requires setting completion parameters for the inserted code block.

To set up tracking, insert the following code into a file or element opened by a link:

window.parent.postMessage({ type: 'complete' }, '*');

To generate code for a third-party LLM ("vibe coding"), use the prompt example:

Prompt example

Replace the text in square brackets with your own content.

1. Create an index.html file that can contain HTML, CSS, and JavaScript and doesn't include external web requests 
2. This index.html file will be used inside an <iframe> 
3. In the index.html file, create [describe your project], give it a transparent background 
4. Encode that once [describe completion parameters], the application should call window.parent.postMessage({ type: 'complete' }, '*'); to let the parent window know that the interaction has been completed

Activating the Completion Tracking option and including a completion-based continue block without including the code snippet in your project will block learners from continuing the training.

The changes will be saved automatically.

Edit Embedded Code Type Settings

Select an embedded code type to start editing.

1

HTML

The HTML type allows to add HTML code.

The following settings are available for the HTML type:

a. Edit HTML

Click to insert embed HTML code.

2

Link

The Link type allows to add a supported link.

The following settings are available for the Link type:

a. Link address Enter the URL.

Supported links

  1. Youtube (embed links only);

  2. Vimeo;

  3. Google Docs / Slides / Sheets;

  4. Google Maps;

  5. Miro, Figma (embed links only);

  6. JSFiddle, CodePen (via special embed);

  7. Your own sites if they support iframe.

For Vimeo: The video must be allowed to be embedded on your domain. If the video is restricted by privacy settings, it may not load.

Supported links examples: https://www.youtube.com/embed/VIDEO_ID https://player.vimeo.com/video/VIDEO_ID https://www.google.com/maps/embed?...

Unsupported links

  1. Regular YouTube links;

  2. Vimeo links with private settings;

  3. Links to sites that prohibit embedding (Facebook, Instagram, GitHub);

  4. HTTP links if the page uses HTTPS;

  5. Links that require account login.

If the inserted link redirects to authorization or another site, then inside the embedded code it may not be displayed or freeze the redirect. The same will happen if the site requires the user to have a session (for example, authorization in Google Docs).

Many sites prohibit displaying in iframe

  1. If the site has a HTTP header:

"X-Frame-Options: DENY"

or

"X-Frame-Options: SAMEORIGIN"

Then inserting into an iframe from another domain will not work as the browser will block loading.

  1. If the site has a CSP HTTP header that restricts embedding, for example:

"Content-Security-Policy: frame-ancestors 'none';"

or

"Content-Security-Policy: frame-ancestors 'self';"

Then the site will not load inside the iframe.

If a site runs on https:// and an http:// link is inserted into the embedded code, the browser may block it as mixed content.

3

Archive

The Archive type allows to upload the SCORM package.

It is not possible to preview the SCORM package in the editor. The embedded SCORM will be displayed when previewing the course locally or in the LMS.

The following settings are available for the Archive type:

a. Upload Click the Upload button to open the Resources window and select a file.

b. Path to HTML

Specify the name of the index.html file name of the SCORM package.

PreviousTableNextComplex list

Last updated