Установка виджета
Для установки виджета нужна возможность встраивать JavaScript на ваш сайт. Неважно, написан ли сайт самостоятельно или создан через конструктор (например, Tilda, WordPress или Drupal).
Как это работает
Виджет открывает гостевую страницу бронирования
https://{company}.tourmakers.ru/g/{id}
в модальном окне на сайте клиента.
Код виджета состоит из двух частей:
- Контейнер с параметрами (
data-*атрибуты). - Скрипт
widget.js— подключается один раз на страницу.
Код подключения
1. Контейнер виджета
Разместите контейнер в том месте страницы, где должна появиться кнопка.
Внешний вид задаётся иконкой из public/icons.
<div
data-widget-id="tour-widget"
data-company="seventravel"
data-id="nomer-202"
data-button-icon="ticket"
data-button-color="#3b82f6"
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-modal-title |
Заголовок модального окна | Нет | Бронирование |
Примеры
По умолчанию
Иконка + текст
Логотип Турмейкеры
Высота iframe
По умолчанию iframe заполняет модальное окно. Если вложенная страница
сообщает высоту через postMessage, виджет подстроит размер:
parent.postMessage({ type: 'resize', height: document.documentElement.scrollHeight }, '*');