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

Содержание

Добавьте заголовки в ваш документ, чтобы сгенерировать содержание.

Виджет Пользовательский код (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/"

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

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

В виджете Embed можно разместить до 50к символов кода. Если ваш код длиннее, его можно подключить к проекту в виде файла.

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

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

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

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

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

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

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

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

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

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

Генерация кода с помощью ИИ в Embed

В блоке Embed доступна генерация кода через ИИ. Вместо того чтобы вставлять готовый код, можно описать задачу на обычном языке и получить результат прямо на странице.

Как сгенерировать код в Embed

Добавьте блок Embed на страницу.

В поле AI Assistant введите промпт — описание того, что нужно сделать.

Нажмите кнопку Generate. ИИ создаст код и автоматически разместит его в блоке Generated Code. Нажмите кнопку Сохранить.

4. Сохраните и опубликуйте проект и проверьте результаты работы сгенерированного кода.

Что важно знать про AI Assistant в Taptop

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

ИИ не видит контекст сайта. Он не знает, какие цвета, шрифты и стили используются на остальных страницах. Все это нужно описать в самом промпте.

Код изолирован внутри блока. Сгенерированный код работает в рамках одного Embed-блока и не взаимодействует с другими элементами страницы.

Как написать хороший промпт

Чем точнее описание — тем меньше правок понадобится после генерации. Укажите в промпте:

Что нужно создать — форму, виджет, анимацию, счетчик и т.д.

Стиль — цвета, шрифт, скругленные или острые углы, общее настроение дизайна

Размер и поведение — ширина блока, адаптивность, что происходит при клике

Пример слабого промпта:

Сделай форму обратной связи.

Пример сильного промпта:

Сделай пошаговую форму заявки на 3 шага.
Шаг 1 — «Расскажите о себе»: поля «Имя» и «Телефон» (<input type="text"> и <input type="tel">).
Шаг 2 — «Ваш заказ»: текстовое поле «Что вас интересует?» и поле «Желаемый бюджет».
Шаг 3 — «Подтверждение»: текст «Спасибо! Мы свяжемся с вами в ближайшее время» и кнопка «Закрыть».
Между шагами кнопки «Далее» и «Назад». Сверху прогресс-бар.
Все CSS-классы и JS-переменные должны иметь уникальный префикс wzd_ чтобы не конфликтовать с другими элементами страницы.
Фон формы — светло-бежевый (#f5f0e8), скруглённые углы у полей и кнопок. Кнопка «Далее» — тёмная, почти чёрная, с белым текстом. Кнопка «Назад» — без фона, только текст. Шрифт без засечек, тёмно-коричневые подписи полей.

Форма, которая получилась в результате:

Технические рекомендации

Попросите ИИ добавить уникальный префикс ко всем классам. Это предотвратит конфликты со стилями и скриптами остальной страницы.

Например, добавьте в промпт:

Все CSS-классы должны иметь уникальный префикс, например wzd_.