Пользовательский код

Виджет Пользовательский код (Embed) используется для добавления на страницу дополнительного кода.

Виджет Embed на холсте

Пользовательский код расширяет возможности при создании сайта и дает свободу в управлении его функционалом и стилями.

Виджет Embed дает возможность:

добавить на сайт дополнительный функционал
установить дополнительные стили
интегрировать сторонние сервисы (например, добавить видео из YouTube)

Чтобы использовать виджет Embed, подключите тариф хостинга Business или команды Team.

Добавление пользовательского кода на страницу

Для вставки пользовательского кода:

Добавьте на страницу виджет Embed из панели Элементов (Elements), перетащив его в нужное место или кликнув по его названию.
Дважды кликните на виджет на Холсте — откроется окно Редактора кода (Code editor).

Редактор кода

Введите необходимый код или скопируйте нужный код и вставьте в редактор — например, код для встраивания видео с YouTube. Затем нажмите кнопку Сохранить (Save) и закройте окно.

Для удобства строки в редакторе кода автоматически нумеруются.

Вставьте код и нажмите кнопку Сохранить

После сохранения кода и закрытия редактора вы увидите результаты работы кода на холсте.

Виджет Embed после сохранения кода — отображается добавленное видео с YouTube

Если вы добавите в виджет Embed css-стили или js-код, они сразу же будут применены к элементам на странице — и изменения будут отображены на холсте.

Пользовательский код не валидируется, поэтому некорректный код может вызвать проблемы в работе опубликованного проекта.

При необходимости вы можете вставить на страницу несколько виджетов Embed.

Интеграция сторонних сервисов

Для интегрирования контента из стороннего сервиса, например, видео из YouTube, скопируйте код с сайта сервиса (обычно это iframe) и вставьте его в Редактор кода.

Правила оформления кода

Виджет поддерживает код следующих типов: HTML, CSS и JavaScript. Серверные языки программирования (например, Perl, PHP, Python, Ruby) интегрировать нельзя.

Используйте для CSS кода тег <style>
Используйте для JavaScript кода тег <script>
Не забывайте использовать закрывающие теги. Для упрощения работы в Редакторе кода реализовано автоматическое закрытие тегов.
Не используйте в пользовательском коде теги <html>, <body> и <head>

Как указывать ссылки в пользовательском коде

Если в пользовательском коде вы подключаете изображения, файлы, шрифты или лотти-анимации с вашего сайта, указывайте относительные ссылки.

Примеры относительных ссылок: "/image.png", "/images/"

Примеры абсолютных ссылок: "https://your-domain.ru/image.png", "https://your-domain.ru/images/"

Если вы укажете абсолютные ссылки, они перестанут работать, когда вы смените домен (например, подключите свой).

Если нужно подключить длинный код

Рекомендуем подключать файлы к проекту вместо вставки больших фрагментов кода. Это ускоряет загрузку проекта, упрощает поддержку и уменьшает риск ошибок — браузеры быстрее обрабатывают подключенные файлы, чем встроенный код.

Чтобы подключить файл с кодом к проекту:

Загрузите файл в Ресурсы проекта На вкладке Ресурсы нажмите кнопку загрузки и выберите нужный файл на компьютере.

Нажмите кнопку загрузки на вкладке Ресурсы

Файл появится в списке Ресурсов.

Файл загружен в ресурсы проекта

Скопируйте ссылку на файл Кликните правой кнопкой мыши на файл и выберите — Копировать ссылку → Относительная ссылка → Копировать для открытия.
Подключите файл в настройках страницы

Откройте Настройки страницы.
Найдите раздел Пользовательский код и добавьте следующий код в блок Перед тегом <body>, вставив в него ссылку на ваш файл: <script src="ссылка на ваш файл"></script>
Например, <script src="/f/script.js"></script>

Подключите файл в разделе Пользовательский код → Перед тегом <body>

Готово! Файл с кодом подключен к проекту.