Виджеты

Виджеты позволяют размещать ваши приложения на сайте. Есть три варианта:

• На всю ширину — виджет занимает весь экран от края до края, размещается в начале страницы
• Встроенный в статью — виджет внутри текста, вписывается в контент страницы
• Проксирование на /app страницу — приложение размещается на отдельном домене, а сайт подменяет его адрес на /app
• На app. поддомене — приложение размещается на отдельном домене, на сайте даётся ссылка на него

Как создать виджет

Создайте новую страницу и добавьте новый блок. В поиске блоков введите Widget и выберите его.

В настройках блока укажите URL вашего приложения. URL обязательно должен быть с https.

На всю ширину

В настройках блока выберите тип Fullwidth — виджет будет занимать всю ширину экрана от края до края.

В сайдпанели страницы выберите Header → Hide, чтобы шапка не отвлекала внимание пользователя от виджета.

Под виджетом напишите текст статьи и разместите другие блоки, например FAQ.

Встроенный в статью

В настройках блока выберите тип Embedded in page — виджет появится прямо в тексте страницы.

Подходит для небольших виджетов, которые дополняют текст: мини-калькуляторы, интерактивные примеры, формы.

Высота

Фиксированная

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

Фуллскрин

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

Подходит для приложений, внутри которых встроен собственный скролл — например Annotate PDF — или для игр.

Динамическая

Выберите Dynamic. Подключите в своё приложение скрипт connector.js. При каждом изменении высоты приложения скрипт будет передавать её сайту, и фрейм с приложением будет автоматически подстраиваться по высоте.

Как подключить скрипт: https://docs.onpress.pro/docs/connectorjs

Проксирование на /app

Подходит когда нужно, чтобы приложение открывалось по адресу вашсайт.com/app. Пользователь остаётся на вашем сайте, а контент подгружается с внешнего сервера.

Настраивается в Настройки → App Proxy. Укажите URL вашего приложения (например https://app.вашдомен.com) и нажмите Enable. После этого приложение будет доступно по адресу вашсайт.com/app.

На поддомене app

Подходит для полноценных приложений, которые не нужно встраивать в страницу. Разместите приложение на поддомене app.вашдомен.com и поставьте ссылку на него на основном сайте.

Этот вариант удобен когда приложение сложное или требует отдельного интерфейса без элементов сайта.

Требования к виджету

Чтобы приложение можно было встроить, оно должно разрешать загрузку в iframe. Мы автоматически проверяем URL при добавлении — если видите зелёную галочку, всё в порядке.

Если красную ошибку — ваш сервер блокирует встраивание через заголовки X-Frame-Options или Content-Security-Policy.

Чтобы исправить, уберите на сервере заголовок X-Frame-Options. Обычно заголовки можно убрать в настройках сервера, например, в файлах .htaccess, nginx.conf, next.config.js.