Как встроить Планёрку на сайт

Виджет Планёрки позволяет разместить форму записи на встречу прямо на вашем сайте. Посетители смогут выбрать время и записаться, не покидая вашу страницу.

Преимущества встраивания

• Доверие клиентов — запись происходит на вашем сайте, а не на стороннем ресурсе
• Удержание посетителей — гости продолжают изучать ваш сайт после выбора времени
• Приём платежей — если у вас подключена оплата, гости могут оплатить встречу прямо на сайте
• Автоматическая адаптивность — виджет подстраивается под ширину экрана: десктоп, планшет, мобильный

---

Подготовка

1. Создайте тип встречи в Планёрке и настройте параметры (длительность, интервалы, доступное время)
2. Добавьте дополнительные вопросы, если нужно уточнить детали у записывающегося
3. Убедитесь, что календарь синхронизирован (Google, Яндекс)

---

Способ 1: Конструктор виджета (рекомендуется)

Самый простой способ — использовать встроенный конструктор.

Как открыть конструктор

1. Перейдите на страницу Встречи в личном кабинете
2. На карточке нужной встречи нажмите «Встроить на сайт»
3. Откроется конструктор HTML-виджета

Настройки конструктора

Предварительный просмотр

Конструктор показывает живой предварительный просмотр виджета в эмуляции браузера. Вы можете переключаться между режимами просмотра:

• Десктоп — полная ширина
• Планшет — 768px
• Мобилка — 375px

Это позволяет убедиться, что виджет выглядит хорошо на всех устройствах.

Копирование кода

Когда настройки подобраны, нажмите кнопку «Скопировать код» и вставьте полученный HTML-код на ваш сайт.

---

Способ 2: Ручная настройка через data-атрибуты

Если вам нужна более тонкая настройка или вы хотите изменить параметры виджета напрямую в коде, используйте data-атрибуты.

Базовый код виджета

<!-- Planerka widget start -->
<div
  class="app-planerka-embed"
  data-planerka-embed="default"
  data-planerka-url="https://planerka.app"
  data-planerka-user="ваш_логин"
  data-planerka-event="slug_встречи"
  style="width: 100%; min-height: 600px;">
</div>
<script src="https://planerka.app/assets/external/embed.js"></script>
<!-- Planerka widget end -->

Все data-атрибуты

Пример с настройкой стилей

<!-- Planerka widget start -->
<div
  class="app-planerka-embed"
  data-planerka-embed="default"
  data-planerka-url="https://planerka.app"
  data-planerka-user="ivanov"
  data-planerka-event="konsultaciya-30-min"
  data-planerka-bg="#f9fafb"
  data-planerka-border="#e5e7eb"
  data-planerka-border-width="2"
  data-planerka-shadow="light"
  style="width: 100%; min-height: 600px;">
</div>
<script src="https://planerka.app/assets/external/embed.js"></script>
<!-- Planerka widget end -->

---

Предзаполнение полей

Вы можете передать данные в форму записи через URL-параметры родительской страницы. Это удобно, если вы уже знаете имя или email посетителя (например, из CRM или рассылки).

Добавьте к URL вашей страницы параметры с префиксом planerka_:

Пример

Если ваш сайт example.com/booking, то ссылка с предзаполнением будет:

https://example.com/booking?planerka_name=Иван%20Иванов&planerka_email=ivan@example.com&planerka_phone=79001234567&planerka_telegram=ivan_ivanov

Виджет автоматически подставит эти значения в соответствующие поля формы записи.

---

Проброс UTM-меток

Виджет автоматически передаёт UTM-параметры с родительской страницы в форму записи. Никакой дополнительной настройки не требуется.

Поддерживаемые метки: utm_source, utm_medium, utm_campaign, utm_term, utm_content и любые другие параметры, начинающиеся с utm_.

Это позволяет отслеживать, с какого рекламного канала пришла запись на встречу.

---

Установка на популярные платформы

Tilda

1. Добавьте блок T123 (HTML-код) или Другое → Вставить HTML
2. Вставьте код виджета в поле HTML
3. Опубликуйте страницу

WordPress

1. Откройте нужную страницу в редакторе
2. Добавьте блок Произвольный HTML (Custom HTML)
3. Вставьте код виджета
4. Сохраните и опубликуйте страницу

Wix

1. Откройте редактор сайта
2. Нажмите Добавить → HTML-код (Embed)
3. Вставьте код виджета
4. Настройте размер блока (рекомендуется ширина 100%, высота от 600px)

Taplink

1. Добавьте блок HTML-код
2. Вставьте код виджета
3. Сохраните страницу

Другие конструкторы

Для любого конструктора сайтов процесс одинаковый: найдите блок для вставки произвольного HTML-кода и вставьте туда код виджета.

---

Тестирование

После установки обязательно проверьте:

• Виджет отображается корректно на десктопе
• Виджет адаптируется на планшете и мобильном
• Форма записи работает — можно выбрать дату и время
• Данные предзаполняются (если используете planerka_ параметры)
• Высота виджета подстраивается автоматически при переключении между шагами

---

Частые вопросы

Виджет не отображается

Убедитесь, что скрипт embed.js подключён после div-контейнера, а не перед ним. Также проверьте, что data-planerka-user и data-planerka-event указаны верно.

Виджет обрезается или не подстраивает высоту

Скрипт виджета автоматически подстраивает высоту iframe. Если конструктор вашего сайта ограничивает высоту блока, попробуйте увеличить min-height в атрибуте style контейнера.

Можно ли разместить несколько виджетов на одной странице?

Да. Каждый виджет должен быть в своём div с уникальной комбинацией data-planerka-user и data-planerka-event. Скрипт embed.js достаточно подключить один раз в конце страницы.

Как скрыть логотип Планёрки?

Эта функция доступна на платных тарифах.

Куда попадёт гость после записи?

По умолчанию гость остаётся в виджете и видит подтверждение записи. Вы можете настроить переход на другую страницу через функцию «Переход по ссылке после бронирования» в настройках типа встречи.

---

 

Примеры использования

 

Сайт Планёрки

 

Сайт SAAS сервиса Документерра

Приложение ГдеМоиДети Выберите Психолога

Обратите внимание

После успешной записи, гость может быть перенаправлен по другому адресу.

Например на страницу на которой вы предлагаете гостю ознакомиться с дополнительной информацией. Ознакомьтесь с функцией - переход по ссылке после бронирования.