Виджет бронирования на Tilda за 5 минут: пошаговая инструкция

Если у вас глэмпинг или база отдыха и сайт сделан на Tilda — у вас есть 5 минут, чтобы превратить статичную «визитку с фото» в полноценный конвертирующий канал. Виджет бронирования с календарём, ценами и оплатой встраивается одним блоком HTML.

Звучит просто. На практике 80% владельцев останавливаются на этапе «найти, куда вставить код», а из оставшихся 20% половина получает кривое отображение на мобильных и сдаются. В этой статье — пошагово, без воды, как встроить виджет TourConnect (или аналогичный) в Tilda-сайт правильно.

Зачем виджет, если есть TG-бот

Хороший вопрос. Логика простая:

• TG-бот — точка входа для гостей, которые пишут лично. Хороший канал для общения и вопросов.
• Виджет на сайте — точка конверсии для гостей, которые гуглят и приходят холодными. Они хотят сразу увидеть «есть ли свободно, сколько стоит, могу ли забронировать прямо сейчас».

70% потенциальных гостей сначала идут на сайт (Яндекс выдача, ссылки в соцсетях), и только потом — в TG. Если на сайте нельзя сразу забронировать, они уходят к конкурентам. Виджет закрывает эту дыру.

Что должен уметь виджет

Чтобы виджет реально приносил брони, минимум:

1. Календарь свободных дат. Гость кликает «Забронировать» → видит ваш реальный календарь, синхронизированный с PMS, без занятых дат.
2. Расчёт цены на конкретные даты. Не «от 8000», а «10 200 ₽ за 2 ночи 14-16 февраля» — с применением динамических правил (выходные, сезон, длинная бронь).
3. Выбор объекта. Если у вас 4 домика — гость должен выбрать конкретный.
4. Форма с минимумом полей. Имя, телефон, email — всё. НЕ паспортные данные, НЕ адрес, НЕ комментарий 500 символов.
5. Оплата. ЮKassa, СБП, или хотя бы кнопка «оплатить переводом на карту с подтверждением».
6. Подтверждение в чат. После оплаты гость получает сообщение в TG / на email, бронь падает в ваш календарь.

Без этих 6 элементов виджет работает на 30-40% потенциала. С ними — конверсия в бронь 8-15% на холодном трафике.

Шаг 1: получить embed-код виджета

Открываем кабинет TourConnect: «Виджет» в боковом меню → раздел «Конструктор».

Здесь настраиваете внешний вид:

• Цвет основной кнопки — пипетка или ввод HEX. Совет: используйте тот же цвет, что у CTA на вашем Tilda-сайте, чтобы виджет визуально не выделялся.
• Текст кнопки — «Забронировать», «Узнать цену», «Свободные даты». Лучше «Забронировать» — самый ясный CTA.
• Логотип в шапке виджета — URL вашей картинки (можно из public-папки Tilda или из сторонего хостинга). 200×60 px рекомендация.
• «Без бренда TourConnect» (только Business) — снимет надпись «Powered by TourConnect» в подвале.

Справа — live preview как виджет выглядит. Можно переключить desktop / mobile.

Внизу страницы — блок «Embed-код». Это то, что копируем:

<iframe
  src="https://app.tourconnect.ru/embed/<owner_id>"
  width="100%"
  height="780"
  style="border:0; max-width: 720px;"
  loading="lazy"
></iframe>

<owner_id> уже подставлен — это ваш ID в системе. Скопируйте весь блок целиком.

Шаг 2: открыть Tilda-страницу в редактирование

В Tilda-проекте откройте страницу, на которую хотите вставить виджет. Обычно это:

• Главная (/) — секция «Забронировать» где-то в середине или в самом низу
• Отдельная страница /booking или /zabronirovat
• Внутри страницы конкретного объекта (если у вас отдельные страницы под каждый домик)

В редакторе нажимаете «Все блоки» → переходите на вкладку «Другое» → ищете блок «T123 — Вставить HTML-код» (он же T123).

Шаг 3: добавить блок HTML и вставить код

1. Перетащить блок T123 в нужное место страницы (просто кликнуть в место в редакторе).
2. На блоке появится тулбар — нажмите «Контент».
3. Открылось окно редактирования HTML. Вставьте embed-код который скопировали в шаге 1.
4. Нажмите «Сохранить и закрыть».
5. На странице сразу видно превью виджета.
6. Нажмите «Опубликовать» в верхнем правом углу Tilda — изменения публикуются на ваш домен через 30 секунд.

Шаг 4: проверить мобильную версию

Самая частая ошибка — забыть проверить, как виджет выглядит на телефоне. 70% посетителей глэмпинг-сайтов приходят с мобильного.

В Tilda нажмите «Просмотр» в правом верхнем углу → переключите на иконку телефона. Виджет должен:

• Поместиться в ширину экрана (горизонтальный скролл — недопустим)
• Не обрезаться (height="780" достаточно для большинства экранов)
• Календарь — кликабельные даты пальцем без зумирования

Если что-то поехало:

• Виджет шире экрана → проверьте max-width: 720px в style. Должно быть на всех мобильных.
• Виджет обрезается снизу → увеличьте height до 900 или 1000.
• Иконки слишком мелкие → виджет TourConnect автоматически адаптируется, других виджетов проверьте сами.

Шаг 5: настроить Yandex.Metrica и цели

Чтобы видеть, сколько броней пришло именно через виджет, нужна аналитика. Tilda поддерживает Метрику нативно.

1. Подключение Метрики: Tilda → «Настройки сайта» → «Аналитика» → вкладка «Яндекс.Метрика» → вставить номер счётчика. Если счётчика ещё нет — заведите на metrika.yandex.ru.
2. Цель «Открыл виджет»: В Метрике → «Цели» → «Добавить» → тип «Клик по элементу» → CSS-селектор iframe[src*="tourconnect.ru/embed"]. Сложно отследить клик по iframe напрямую — проще считать визиты на страницу с виджетом + средняя продолжительность.
3. Цель «Забронировал»: TourConnect отправляет в Метрику событие booking_completed через Tag Manager или прямой dataLayer. В кабинете TourConnect → «Интеграции» → «Метрика» → вставить ID счётчика.

После настройки в Метрике видно: сколько людей зашло на страницу с виджетом, сколько начали бронировать, сколько завершили.

Распространённые проблемы и как их решать

1. Виджет не появляется после публикации.

Проверьте:

• Не блокирует ли блокировщик рекламы (попробуйте инкогнито-режим)
• Правильно ли вставлен код (без лишних < или пропущенных ")
• Подписка TourConnect активна (на Free до 5 объектов виджет работает)

2. Виджет работает, но бронь не приходит в TG.

Проверьте:

• В TourConnect → настройки уведомлений → Telegram включён, чат подключён через /start ntf_*
• Не помечен ли ваш TG-аккаунт как «бот» (Telegram блокирует уведомления между ботами)

3. Цены в виджете не совпадают с тем, что вы ожидаете.

Проверьте:

• Динамические правила: возможно, у вас включено «Лето +30%» и «Выходные +20%», и они складываются
• Min/max цены: убедитесь, что они не режут предложение слишком жёстко
• Кэш виджета: Tilda кэширует страницы 5-10 минут, после изменения настроек подождите

4. Гости пишут «не могу выбрать дату — все красные».

Проверьте:

• iCal-импорт с Авито или Bnovo не блокирует ВСЕ даты (бывает при неправильной привязке к объекту)
• Сами объекты is_active=true в базе

Альтернативы Tilda

Если у вас сайт не на Tilda, инструкция почти идентичная:

• WordPress: блок «Custom HTML» (Gutenberg) или «Кастомный HTML» (Elementor)
• Bitrix: «Текст в визуальном редакторе» с переключением на «HTML»
• uKit, uCoz: аналогичные «вставка HTML» блоки
• Конструкторы конкурентов (Beget Sites, Reg.ru sites): обычно тоже есть HTML-блок

Везде логика одинаковая: ищем блок «вставить HTML» → вставляем embed-код → публикуем. 5 минут работы.

Реальная экономика виджета

Возьмём пример. Ваш Tilda-сайт получает 200 уникальных посетителей в неделю (нормальный показатель для глэмпинга с минимальной SEO-оптимизацией):

• Без виджета: 200 → 5 пишут в WhatsApp → 1-2 бронируют. Конверсия 0.5-1%.
• С виджетом: 200 → 25 открывают виджет → 4-7 бронируют. Конверсия 2-3.5%.

При среднем чеке 12 000 ₽ это +50-70 тысяч в месяц с тех же посетителей. Виджет окупается за первую же бронь.

Когда виджет НЕ нужен

Очевидный случай: у вас 1 объект и 100% загрузка через одного канала (например, корпоративные клиенты). Виджет не добавит ценности.

Менее очевидный: если у вас сайт получает < 50 посетителей в неделю, и 80% — друзья/знакомые, которые звонят напрямую. Тут вложение времени в SEO/рекламу важнее.

В остальных случаях — виджет это база. Без него сайт работает на 30-40% потенциала.

С чего начать прямо сейчас

1. Сегодня (5 минут): в кабинете TourConnect → «Виджет» → настроить цвет, скопировать embed-код.
2. Сегодня (5 минут): открыть Tilda → нужная страница → добавить блок T123 → вставить код → опубликовать.
3. Сегодня (2 минуты): проверить мобильную версию. Если что-то поехало — поправить height/max-width.
4. На этой неделе: настроить Метрику и цели. Посчитать baseline: сколько броней приходит до и после.
5. Через месяц: проанализировать конверсию. Если ниже 2% — поправить контент сайта (фото, описание) или цены.

Виджет — не серебряная пуля, но это самый быстрый способ повысить конверсию сайта в 3-5 раз. 10 минут работы — измеримый эффект на следующий же месяц.