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

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F7aupnqAEAR9ytO9acBlQ%2FScreenshot_4.png?alt=media&#x26;token=a7595917-ba18-415d-b704-bb524b6aeb81" alt=""><figcaption></figcaption></figure>

## Edit General Embedded Code Element Settings

[Open](https://help.parta.io/editor/edit-elements) an embedded code element settings window to start editing.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FWri5Y60Rj2hkmENv708x%2FEmbeded_code.01.png?alt=media&#x26;token=278d6f22-3087-4321-85dc-41bdfaea81e3" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### Type

Select an embedded code type from a drop-down menu.
{% endstep %}

{% step %}

### Completion Tracking

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

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

{% hint style="warning" %}
**Completion Tracking** option requires setting completion parameters for the inserted code block. <br>

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:

<details>

<summary>Prompt example</summary>

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
```

</details>
{% endhint %}

{% hint style="danger" %}
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.
{% endhint %}
{% endstep %}
{% endstepper %}

The changes will be saved automatically.

## Edit Embedded Code Type Settings

Select [an embedded code type](#type) to start editing.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2FpwWl1cvYz2qE2DQf3WBK%2FEmbeded_code.02.png?alt=media&#x26;token=848edc3a-4823-48fb-8e6e-e2b299a35e42" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

### HTML

The **HTML** type allows to add HTML code.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2Fzo3wulAy5p2yxsAb9268%2FEmbeded_code.03.png?alt=media&#x26;token=ac004d08-d0bf-473a-85f0-fd019c9ff9b5" alt=""><figcaption></figcaption></figure>

The following settings are available for the **HTML** type:

> **a.** Edit HTML
>
> Click to insert embed HTML code.
> {% endstep %}

{% step %}

### Link

The **Link** type allows to add a [supported](#supported-links-1) link.

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F8Jj99tWfPlpEazMBHAv0%2FEmbeded_code.04.png?alt=media&#x26;token=4ffbe0b5-dc92-4b4e-bb88-248b923c5995" alt=""><figcaption></figcaption></figure>

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.

{% hint style="info" %}
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.
{% endhint %}

{% hint style="success" %}
Supported links examples:\
<https://www.youtube.com/embed/VIDEO\\_ID\\>
<https://player.vimeo.com/video/VIDEO\\_ID\\>
<https://www.google.com/maps/embed>?...
{% endhint %}

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

{% hint style="danger" %}
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).
{% endhint %}

{% hint style="warning" %}
**Many sites prohibit displaying in iframe**

1. If the site has a HTTP header:

"X-Frame-Options: DENY"<br>

or<br>

"X-Frame-Options: SAMEORIGIN"<br>

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

2. If the site has a CSP HTTP header that restricts embedding, for example:&#x20;

"Content-Security-Policy: frame-ancestors 'none';"<br>

or<br>

"Content-Security-Policy: frame-ancestors 'self';"<br>

Then the site will not load inside the iframe.
{% endhint %}

{% hint style="info" %}
If a site runs on https\:// and an http\:// link is inserted into the embedded code, the browser may block it as mixed content.
{% endhint %}
{% endstep %}

{% step %}

### Archive

The **Archive** type allows to upload the SCORM package.

{% hint style="warning" %}
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.
{% endhint %}

<figure><img src="https://3560131808-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoKhlOpFC8JmF8TcxylWx%2Fuploads%2F9oJH0q3gHF0nvFnUOIEC%2FEmbeded_code.05.png?alt=media&#x26;token=456600f5-5839-4fc9-b416-af2b55b6036b" alt=""><figcaption></figcaption></figure>

The following settings are available for the **Archive** type:

> **a.** Upload\
> Click the **Upload** button to open the [Resources](https://help.parta.io/editor/edit-elements/set-media-and-content-elements/broken-reference) window and select a file.
>
> **b.** Path to HTML
>
> Specify the name of the **index.html** file name of the SCORM package.
> {% endstep %}
> {% endstepper %}