Установка виджета
Для установки виджета нужна возможность встраивать JavaScript на ваш сайт. Неважно, написан ли сайт самостоятельно или создан через конструктор (например, Tilda, WordPress или Drupal).
Как это работает
Виджет открывает гостевую страницу бронирования
https://{company}.tourmakers.ru/g/{id}
в модальном окне на сайте клиента.
Код виджета состоит из двух частей:
- Контейнер с параметрами (
data-*атрибуты). - Скрипт
widget.js— подключается один раз на страницу.
Код подключения
1. Контейнер виджета
Разместите контейнер в конце <body> (или в любом месте страницы).
Кнопка позиционируется поверх сайта через position: fixed
— угол и отступы задаются атрибутами
data-button-corner, data-button-offset-x,
data-button-offset-y.
<div
data-widget-id="tour-widget"
data-company="seventravel"
data-id="nomer-202"
data-button-icon="ticket"
data-button-color="#3b82f6"
data-button-corner="bottom-right"
data-button-offset-x="24"
data-button-offset-y="24"
data-modal-title="Бронирование"
></div>2. Скрипт API
Укажите скрипт один раз в конце страницы (или с атрибутом defer):
<script src="https://widget.tourmakers.ru/widget.js" defer></script>Иконки кнопки
По умолчанию — ticket. Также доступны иконки из /icons:
Иконка + подпись (опционально)
Если нужен текст рядом с иконкой, добавьте data-button-text:
<div
data-widget-id="tour-widget"
data-company="seventravel"
data-id="nomer-202"
data-button-icon="ticket"
data-button-text="Забронировать"
data-button-color="#3b82f6"
></div>Атрибуты
| Атрибут | Описание | Обязательный | По умолчанию |
|---|---|---|---|
data-company |
Поддомен компании | Да | — |
data-id |
Идентификатор объекта / страницы гида | Да | — |
data-button-icon |
Иконка кнопки (ticket или из /icons) |
Нет | ticket |
data-button-text |
Подпись рядом с иконкой (если пусто — только иконка) | Нет | пусто |
data-button-color |
Цвет фона кнопки | Нет | #3b82f6 |
data-button-text-color |
Цвет текста / inline-иконки | Нет | #ffffff |
data-button-corner |
Угол экрана: bottom-right, bottom-left, top-right, top-left |
Нет | bottom-right |
data-button-offset-x |
Горизонтальный отступ от угла, px (0–80) | Нет | 24 |
data-button-offset-y |
Вертикальный отступ от угла, px (0–80) | Нет | 24 |
data-button-position |
Если inline — кнопка в потоке документа (для демо); иначе fixed |
Нет | fixed |
data-modal-title |
Заголовок модального окна | Нет | Бронирование |
Примеры
Ниже — inline-демо иконок (data-button-position="inline").
На сайте отеля используйте угол и отступы без этого атрибута.
По умолчанию
Иконка + текст
Логотип Турмейкеры
Плавающая кнопка (как на сайте отеля)
Один виджет в правом нижнем углу экрана:
Высота iframe
По умолчанию iframe заполняет модальное окно. Если вложенная страница
сообщает высоту через postMessage, виджет подстроит размер:
parent.postMessage({ type: 'resize', height: document.documentElement.scrollHeight }, '*');