Встраивание виджета бронирования на сайт Тильды

Виджет бронирования v1.0 работает как iframe. Два способа вставки: быстрый (iframe) и кастомный (HTML-код).

Способ 1: Iframe (рекомендуется)

Самый простой вариант — вставить блок «HTML-код» в Тильду и вставить туда iframe.

Шаг 1. Открой редактор Тильды → добавь блок T123 (HTML-код) в нужное место страницы.

Шаг 2. Вставь этот код:

<iframe
  src="https://your-server.com/widget"
  width="100%"
  height="900"
  frameborder="0"
  style="border:0;max-width:880px;margin:0 auto;display:block"
  loading="lazy"
></iframe>

Замени your-server.com на адрес твоего сервера (например, satno-pms.ru).

Шаг 3. Опубликуй страницу. Готово.

Плюсы: изоляция стилей (не ломает Тильду), обновления виджета без правки HTML, автоматический ресайз по высоте контента.

Способ 2: HTML-код (для продвинутых)

Если хочешь, чтобы виджет был частью страницы (без iframe), скачай widget.html с сервера и вставь содержимое в блок HTML-кода Тильды.

Шаг 1. Скачай файл виджета: https://your-server.com/widget → Сохрани как.

Шаг 2. Открой файл в редакторе, скопируй содержимое <style> и <script>.

Шаг 3. В Тильде добавь блок HTML-кода, вставь:

<style>
  /* все стили из widget.html */
</style>

<div class="satno-widget">
  <!-- разметка виджета -->
</div>

<script>
  // API URL — обязательно поменяй
  window.SATNO_API = "https://your-server.com";
</script>
<script src="https://your-server.com/widget/widget.js"></script>

Шаг 4. Сохрани и опубликуй.

Минусы: сложнее обновлять, может конфликтовать со стилями Тильды.

Проверка работы

После встраивания на Тильде проверь:

Открой страницу — виджет должен показать форму «Заезд / Выезд / Гости».
Выбери даты и нажми «Найти номер» — должен появиться список свободных номеров.
Нажми «Забронировать» на любом номере — откроется форма с полями имя/телефон.
Заполни и отправь — в Telegram-бот админу должно прийти уведомление о новой брони.
В админке (/admin) бронирование должно появиться в шахматке и в списке броней.

Частые проблемы

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

Сервер недоступен с сайта Тильды. Проверь:

Сервер запущен и доступен по https://your-server.com/api/health из браузера
SSL-сертификат валидный (для https://)
В консоли браузера (F12) нет CORS-ошибок

Виджет показывает пустую форму, но не реагирует на кнопку

JS-файл не загрузился. Проверь URL SATNO_API в консоли (F12 → Console).

Тильда перекрывает виджет iframe

Добавь в CSS Тильды (блок «Стили» → добавить стили):

.t-rec iframe {
  z-index: 1 !important;
  position: relative !important;
}

Где взять файлы виджета

/widget — открой и сохрани как .html
Или из репозитория проекта: public/widget.html

Авто-ресайз iframe

Виджет автоматически отправляет родителю свою высоту через postMessage. Если iframe не растягивается — добавь в блок HTML-кода:

<script>
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'satno-widget-resize') {
    var iframe = document.querySelector('iframe[src*="/widget"]');
    if (iframe) iframe.style.height = e.data.height + 'px';
  }
});
</script>

После встраивания обязательно протестируй создание брони — это покажет, что CORS, SSL и API работают.