> For the complete documentation index, see [llms.txt](https://help.lynda.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.lynda.ru/osnovnye-komponenty-sistemy/element/oformlenie/vstroennyi-kod.md).

# Встроенный код

элемент встроенный код позволяет встраивать веб-страницы, видео, аудио или другой интерактивный контент из внешних источников, также имеется возможность вставки скорм-пакетов и исполняемого кода (например, Яндекс карт).

<figure><img src="/files/YvmI4eky7Ol8lN0TkGn6" alt=""><figcaption></figcaption></figure>

**Кликните по элементу чтобы увидеть его настройки в правом боковом меню.**

<figure><img src="/files/PS7GuofoTuL5fL0JakPs" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Встроенный код может работать с тремя типами данных: HTML-кодом, ссылкой на веб-сайт или zip-файлом (например, пакетом SCORM)
{% endhint %}

### 1. HTML-код

Чтобы добавить HTML-код, выберите опцию «HTML» в настройках элемента, нажмите "Редактировать HTML" и вставьте встроенный HTML-код в появившемся окне.

<figure><img src="/files/v5Nmjqsb7fa7M2lV4HwG" alt=""><figcaption></figcaption></figure>

### 2. Ссылка

Чтобы добавить ссылку, выберите опцию «Ссылка» в настройках элемента и вставьте ссылку.

<figure><img src="/files/4UFhxTijp5DKYZIoazWR" alt=""><figcaption></figcaption></figure>

### Поддерживаемые ссылки:

1. Youtube (Только embed-ссылки)
2. Vimeo
3. Google Docs / Slides / Sheets
4. Google Maps
5. Miro, Figma (Только embed-ссылки)
6. JSFiddle, CodePen (Через специальный embed)
7. Ваши собственные сайты, если они поддерживают iframe

{% hint style="info" %}
Для Vimeo: видео должно быть разрешено к встраиванию на вашем домене. Если видео ограничено настройками приватности, оно может не загрузиться
{% endhint %}

{% hint style="success" %}
Примеры ссылок:\
<https://www.youtube.com/embed/VIDEO_ID>\
<https://player.vimeo.com/video/VIDEO_ID>\
<https://www.google.com/maps/embed?...>
{% endhint %}

### Неподдерживаемые ссылки:

1. Обычные YouTube ссылки
2. Vimeo-ссылки с приватными настройками
3. Ссылки на сайты, запрещающие встраивание (Facebook, Instagram, GitHub)
4. HTTP-сайты (без HTTPS), если страница работает по HTTPS
5. Ссылки, требующие входа в аккаунт

{% hint style="danger" %}
Если вставленная ссылка делает перенаправление на авторизацию или другой сайт, то внутри встроенного кода она может не отобразиться или зависнуть на переадресации. То же самое произойдет если сайт требует чтобы у пользователя была сессия (например, авторизация в Google Docs).&#x20;
{% endhint %}

{% hint style="warning" %}
**Многие сайты запрещают показ в iframe**\
\
1\. Если у сайта выставлен заголовок:&#x20;

\
"X-Frame-Options: DENY"\
\
или\
\
"X-Frame-Options: SAMEORIGIN"\
\
вставка в iframe с другого домена не сработает — браузер заблокирует загрузку.\
\
2\. Если сайт выставил CSP-заголовок, ограничивающий встраивание, например:

\
"Content-Security-Policy: frame-ancestors 'none';"\
\
или\
\
"Content-Security-Policy: frame-ancestors 'self';"\
\
то он не загрузится внутри iframe.<br>
{% endhint %}

{% hint style="info" %}
Если сайт работает по https\://, а во встроенный код вставлена http\:// ссылка, браузер может заблокировать это как смешанный контент (mixed content).
{% endhint %}

### 3. Архив

В настройках элемента выберите «Архив» и загрузите SCORM-пакет.

<figure><img src="/files/9ib36MpyyobVG0DJUMdH" alt=""><figcaption></figcaption></figure>

Подробнее о том, как прикрепить SCORM-пакет читайте [тут](/how-to/kak-prikrepit-skorm-paket-v-kurs-na-platforme-linda.md).

{% hint style="info" %}
С обновлением 2.56 в элементе **«Встроенный код»** теперь тоже есть настройки условий прохождения.

Мы добавили три варианта отслеживания в зависимости от условий прохождения:

1. **«Нет»** – не отслеживать (то есть без условий прохождения).
2. **«Скорм пройден»** – отслеживать статус Complete, который передает SCORM-пакет или встроенный элемент.
3. **«Клик на элемент»** – отслеживать, чтобы студент сделал хотя бы один клик в элементе **«Встроенный код»**.
   {% endhint %}

<details>

<summary>Как работает отслеживание HTML и ссылок</summary>

Чтобы настроить отслеживание, нужно в файл или в элемент, открывающийся по ссылке, вставить код:

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

Например, вы можете создать элемент для проверки знаний при помощи ИИ и попросить его передавать статус **Complete**. Так, когда файл или элемент завершится, он будет пройден и на платформе Линда.

</details>

<figure><img src="/files/WZYMXNexoCd2ueyMxfmk" alt=""><figcaption></figcaption></figure>