Онлайн-запись на сайте: как добавить кнопку, форму или виджет записи клиентов

Статью подготовила команда Планёрки

Мы делаем сервис онлайн-записи для экспертов, которые назначают встречи

Клиент зашел на сайт, прочитал о ваших услугах, захотел обсудить с вами решение своей проблемы. Хорошо, если в этот момент на странице есть форма записи: время выбрано, встреча назначена. Иначе клиенту придется написать вам и ждать ответа, а за это время желание получить вашу консультацию может пройти.

Как настроить онлайн-запись на сайте, рассказываем в этой статье. Еще мы пригласили эксперта, у которого такая запись уже работает:

Александр Юганец — стратегический консультант по коммерческому развитию в медицине. Помогает врачам, в том числе хирургам, развивать практику: определять, что ограничивает загрузку и доход и какие изменения нужны в первую очередь. Работает также с коммерческим развитием клиник и медицинских проектов.

Александр записывает клиентов на консультации через Планёрку с 2025 года, а в октябре 2026-го подключил онлайн-запись к своему сайту через API. В своих комментариях Александр объясняет, какие задачи хотел решить, какой способ подключения выбрал и почему.

• Сайт Александра

Чем онлайн-запись на сайте отличается от формы заявки

Сайт собирает в одном месте то, что клиент хочет узнать о специалисте: с какой задачей к вам можно обратиться, сколько стоит ваша услуга, что пишут о вас в отзывах и, главное, как с вами связаться. Связаться с вами клиент может через форму заявки или онлайн-запись, и работают они по-разному:

Зачем нужна онлайн-запись на собственном сайте

Я работаю и с врачами, и с клиниками. Мне важно, чтобы клиенту было удобно записаться на встречу и понятно, к кому он обращается и как мы будем сотрудничать. Запись на консультацию — часть первого знакомства с моей работой. Поэтому я хотел разместить запись на своем домене и оформить в едином стиле с сайтом: человек знакомится с моим подходом и может сразу перейти к выбору времени.

В целом хочу сказать, что онлайн-запись может решать разные задачи в зависимости от специфики работы специалиста. Например, если говорить о врачах, которые развивают самостоятельную практику, в том числе хирургах, здесь может быть несколько сценариев: запись пациентов на первичную консультацию, предварительное общение по организационным вопросам, встречи с коллегами или потенциальными партнерами.

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

Отдельное направление — телеконсультации. Здесь важно учитывать специфику дистанционного взаимодействия врача и пациента и отличать полноценную медицинскую консультацию от предварительного общения по организационным вопросам.

Александр Юганец, стратегический консультант

Три способа добавить онлайн-запись на сайт: кнопка-ссылка, виджет и своя форма на API

Выбрать способ помогут два вопроса: принимает ли ваш сайт HTML-код и нужен ли вам свой дизайн формы.

Кнопка-ссылка: клиент переходит на страницу записи в Планёрке

Как работает. На сайте стоит кнопка, которая открывает вашу страницу записи в Планёрке. На открывшейся странице клиент видит календарь и выбирает время.

Плюсы:

• для настройки нужна только ссылка на страницу записи
• подходит любому сайту, даже если в конструкторе нет блока для кода
• кнопку получится поставить в шапку, меню или в конец статьи

Минусы:

• клиент уходит с вашего сайта на страницу Планёрки, и в адресе видно planerka.app
• нужен один лишний клик

Я выбирал способ записи по задаче. Если человеку нужно просто выбрать время, кнопки со ссылкой может быть достаточно. Более сложное решение имеет смысл, когда понятно, что именно оно должно улучшить. В моем случае было важно связать запись с собственным сайтом и оформлением моих услуг. Поэтому я выбрал свою форму через API

Александр Юганец, стратегический консультант

Виджет внутри страницы: клиент записывается, не покидая сайт

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

• На странице (встроенный): календарь стоит в блоке или разделе страницы, свободные слоты видны рядом с описанием услуг
• По кнопке или ссылке (всплывающий): окно записи открывается, когда клиент нажимает на кнопку или ссылку
• В углу экрана (плавающий): кнопка закреплена в углу и остается на месте, пока человек листает сайт

Плюсы:

• клиент остается на вашем сайте на всем пути от выбора времени до записи
• цвет фона, обводку и тень вы настраиваете под ваш сайт
• перед публикацией видно, как форма выглядит на компьютере, планшете и телефоне
• подходит для главной страницы, страницы услуг и блога

Минусы:

• нужен конструктор с блоком для произвольного HTML-кода: такой блок есть в Тильде, WordPress, Wix и Taplink
• логотип Планёрки в виджете скрывается только на платных тарифах

Готовый виджет тоже вполне решает задачу онлайн-записи, особенно когда форму нужно быстро подключить к сайту своими силами.

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

Кроме того, в дальнейшем я планирую разместить на сайте разные форматы встреч и консультаций, поэтому хотелось заранее предусмотреть возможности для развития этой страницы.

Интеграция через API позволила реализовать именно такой вариант. При этом для большинства типовых задач готового виджета вполне может быть достаточно.

Александр Юганец, стратегический консультант

Своя форма на API Планёрки: когда нужен свой дизайн

Как работает. Разработчик собирает форму под дизайн вашего сайта и подключает ее к Планёрке через API. Через API сайт получает свободное время из Планёрки и передает туда запись клиента. Так сделал Александр Юганец.

Плюсы:

• вы решаете, какой будет дизайн вашей формы записи
• запись выглядит как часть вашего сайта и бренда

Минусы:

• для разработки собственной формы потребуются технические навыки или помощь разработчика. Сроки зависят от сложности реализации

Что Александр получил от записи на своем сайте и что планирует дальше

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

Для меня здесь важна последовательность: человек знакомится с моей работой и может сразу перейти к записи.

Дальше планирую добавить остальные форматы встреч, подробнее объяснить, для каких задач подходит каждый из них, и подключить оплату.

Александр Юганец, стратегический консультант

Какой способ выбрать: сравнение в одной таблице

Если сомневаетесь, начните с кнопки-ссылки. Она не мешает позже поставить виджет или заказать свою форму: ссылка на запись остается рабочей.

Как добавить на сайт кнопку записи по шагам

Для кнопки не нужны навыки программирования: хватит ссылки на вашу страницу записи.

1. Скопируйте ссылку на страницу записи. Возьмите ее в личном кабинете Планёрки: у каждого типа встречи своя ссылка
2. Добавьте на сайт кнопку. Выберите свой конструктор:
   • Тильда: нажмите «Добавить блок», затем выберите «Кнопка», в поле «Ссылка» вставьте скопированный адрес
   • WordPress: добавьте блок «Кнопки» и вставьте ссылку в настройках кнопки
   • другие конструкторы: найдите элемент «Кнопка» или «Текст со ссылкой», впишите адрес, выберите цвет и размер
3. Напишите на кнопке понятный текст. Подойдут «Записаться на консультацию», «Выбрать время», «Записаться к психологу», «Забронировать сеанс». Фразы «Узнать больше» и «Отправить форму» не говорят клиенту, что будет дальше
4. Поставьте кнопку на видное место. Подойдут шапка сайта рядом с телефоном, первый экран главной страницы, боковая панель блога и конец каждой статьи. Попробуйте несколько мест и посмотрите в статистике сайта, откуда кликают чаще

Где Александр поставил кнопки записи на своем сайте и почему именно там

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

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

На главной странице у меня две основные кнопки записи. Первая находится в закрепленной верхней панели и остается видна при прокрутке сайта.

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

Александр Юганец, стратегический консультант

Как встроить виджет записи на Тильду, WordPress, Wix и Taplink

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

Шаг 1. Подготовьте код виджета в Планёрке

1. Откройте в личном кабинете страницу «Типы встреч»
2. На карточке нужной встречи нажмите «Встроить на сайт»
3. Настройте внешний вид: цвет фона, цвет и толщину обводки, тень контейнера и ее цвет
4. Проверьте предпросмотр на трех экранах: «Десктоп», «Планшет» и «Мобилка»
5. Нажмите «Скопировать код»

Шаг 2. Вставьте код в нужный конструктор

• Тильда: добавьте блок T123 «HTML-код» или выберите «Другое», затем «Вставить HTML», вставьте код и опубликуйте страницу
• WordPress: добавьте блок «Произвольный HTML», вставьте код и сохраните страницу
• Wix: нажмите «Добавить», выберите «HTML-код» (встраивание), вставьте код, задайте ширину 100% и высоту от 600 пикселей
• Taplink: добавьте блок «HTML-код» и вставьте код
• Другие конструкторы: подойдет любой, где есть блок для произвольного HTML. Если такого блока нет, воспользуйтесь кнопкой-ссылкой

Что полезно знать

• Высота виджета подстраивается автоматически. Если блок конструктора ее ограничивает, увеличьте минимальную высоту блока
• Если на странице нужно несколько виджетов для разных типов встреч, для каждого нужен свой блок кода, а скрипт embed.js (файл, который запускает виджет) подключается один раз в конце страницы
• После записи клиент остается в виджете. Чтобы после записи клиент попадал на другую страницу, например «Спасибо», включите у типа встречи настройку «Переход по ссылке после бронирования»
• Имя, почту, телефон, Телеграм и комментарий получится подставить в форму заранее через параметры адреса страницы

Подробнее об этих настройках — в справке Планёрки.

Как собрать свою форму записи через API Планёрки: что нужно разработчику

Для этого способа понадобится помощь разработчика. Если разработчика нет, попробуйте вайбкодинг: так называют работу, когда код пишет нейросеть по вашему описанию, и вы проверяете результат. Ниже — что подготовить в Планёрке и какие запросы подключить. Эти шаги передайте разработчику или нейросети.

API работает на платных тарифах и в пробном периоде: на бесплатном тарифе запросы возвращают ошибку 401.

Шаг 1. Создайте API-ключ в Планёрке

1. Откройте в личном кабинете раздел «Разработчикам» и перейдите в «API-ключи»
2. Нажмите «Создать ключ» и напишите метку, например «сайт»
3. Выберите набор прав «Публичный для сайта»: он открывает доступ к типам встреч, свободному времени, созданию записей и профилю владельца
4. В поле разрешенных сайтов впишите домен вашего сайта, например site.ru, не добавляя «https://». Адреса site.ru и www.site.ru считаются разными, поэтому впишите оба
5. Скопируйте ключ: он начинается с «cal_» и показывается один раз. Потерянный ключ нужно отозвать и создать новый

Набор «Публичный для сайта» рассчитан на код страницы. Ключи, которые читают записи, отменяют их или дают полный доступ, храните только на сервере: через них доступны данные клиентов.

Шаг 2. Подключите запросы к Планёрке

Все запросы идут на адрес planerka.app/rest/v2. В каждом запросе ключ передается в заголовке Authorization в виде «Bearer cal_ваш_ключ». Дату версии API для заголовка cal-api-version уточните в справочнике.

1. Получите типы встреч через GET /event-types и сохраните id нужного типа
2. Запросите свободное время через GET /slots: передайте id типа встречи, начало и конец периода и часовой пояс клиента. Ответ приходит по датам в этом часовом поясе
3. Создайте запись через POST /bookings: передайте id типа встречи, время начала в UTC и данные гостя (имя, почту, часовой пояс). Ответы на дополнительные вопросы идут в поле bookingFieldsResponses
4. Сохраните uid записи из ответа: по нему запись получают и отменяют

Что полезно знать

• Для вайбкодинга дайте нейросети справку по API и спецификацию OpenAPI
• Подробнее о запросах, полях и ошибках — в справке Планёрки про API

Что вызвало трудности и сколько заняла работа

Сайт и интеграцию делал разработчик. Такую интеграцию через API Планёрки он выполнял впервые. От постановки задачи до готового результата прошло примерно пять дней. Это срок с моей стороны как заказчика: сколько часов непосредственно заняла разработка, я не отслеживал. Весь проект, включая подготовку макета и сборку страницы, занял около трех недель.

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

Александр Юганец, стратегический консультант

Как проверить, что онлайн-запись работает

Перед тем как отправлять клиентов, пройдите путь записи сами:

1. Откройте сайт с телефона и с компьютера, найдите кнопку или виджет
2. Запишитесь на ближайшее свободное время со своей почтой
3. Проверьте, что письмо о записи пришло вам и клиенту
4. Убедитесь, что встреча появилась в календаре Планёрки и время указано верно
5. Отмените тестовую запись и проверьте, что это время снова свободно
6. Если настроен переход после бронирования, убедитесь, что открывается нужная страница

Если вы встроили форму через API, как Александр, проверьте и ответы на дополнительные вопросы: они должны приходить вместе с записью.

Что делать, если своего сайта пока нет

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

Если нужна страница с вашим именем и описанием услуг, подойдет любой конструктор. Тильда, Taplink и Wix подходят для небольшой страницы-визитки; блок записи добавляется на нее по инструкции выше.

Итог: какой способ выбрать

Способ выбирают по сайту и по задаче: кнопка-ссылка подходит любому сайту, виджет оставляет клиента на вашей странице, собственная форма на API нужна, когда важен свой дизайн. Александр Юганец выбрал форму на API и получил запись на своем домене.

Онлайн-запись на сайт

Записывайте клиентов легко. Всё на автопилоте: календарь, оплата, созвон, напоминания

Попробовать бесплатно

Частые вопросы об онлайн-записи на сайте

Онлайн-запись на сайт

Записывайте клиентов легко. Всё на автопилоте: календарь, оплата, созвон, напоминания

Попробовать бесплатно