Виджеты
Это документация первой версии OnPress, она устарела. Актуальная — документация v2.
Виджеты позволяют размещать ваши приложения на сайте. Есть три варианта:
- На всю ширину — виджет занимает весь экран от края до края, размещается в начале страницы
- Встроенный в статью — виджет внутри текста, вписывается в контент страницы
- Проксирование на /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.