Embedded code

An embedded code element lets you add content like web pages, videos, audio, or other interactive items from outside sources. You can also include SCORM packages and codes that run things (like Google Maps).

Double-click on an element to view its settings.

Embedded code can work with three types of data: HTML code, a link to a website, or a zip file (like a SCORM Package).

1. HTML code

To add HTML code, select "HTML" option in element settings and paste your inline HTML code.

2. Link

To add link, select "Link" option in element settings and paste your link.

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. Archieve

In the element settings, change the type to "Archive" and upload the SCORM package.

Specify the path to the index.html file within the uploaded SCORM package.

To find the path to index.html, you need to open your SCORM package (archive) locally, find the index.html file and copy its name.

As a result, you will get an embedded code element with the specified path to index.html.

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.

PreviousButtonNextHow to Use Complex Elements

Last updated

Was this helpful?