Отвечу сразу, потому что вопрос звучит проще, чем есть: да, привязать на Тильду сервис Calendly можно, и для этого не нужен ни платный тариф, ни разработчик. Calendly отдаёт готовый код встраивания на всех тарифах — в справочном центре это записано дословно, «available to all users on all plans». Тильда принимает сторонний HTML, JavaScript и CSS через блок T123 из категории «Другое». Складываешь одно с другим — и форма записи живёт у тебя на сайте.
Подвох в другом месте, и на нём спотыкается большинство. Человек вставляет код, жмёт «Просмотр» — и видит на странице свой же код обычным текстом. Первая мысль: не работает, Тильда не дружит с Calendly. На самом деле страница просто не опубликована, и это штатное поведение конструктора.
Отдельно про деньги: настройка цветов виджета под свой бренд открывается только на платных тарифах Calendly, а они в долларах и российской картой не оплачиваются.
Короткий ответ: привязать можно, но официальной интеграции у Тильды нет
Разница между «интеграцией» и «вставкой кода» тут принципиальная, и её стоит понять до того, как начнёшь искать кнопку.
Штатная интеграция у Тильды выглядит так: в библиотеке блоков лежит блок T790 из категории «Виджеты», ты вводишь в него номер формы, и всё работает. Так сделано ровно для одного сервиса записи — YCLIENTS. Для Calendly отдельного блока нет.
Значит, идём через универсальный канал — блок T123 «HTML-код». Он принимает HTML, JavaScript внутри тега `<script>` и CSS внутри `<style>`. PHP туда не вставить: если нужен серверный код, его держат на своём сервере, а данные передают вебхуком.
Три виджета Calendly — и только один нормально живёт на Тильде
Calendly предлагает три способа встраивания, и они по-разному уживаются с блочной сеткой конструктора.
Inline embed — страница записи прямо в вёрстке, календарь виден без единого клика. Звучит идеально, ведёт себя капризно: занимает много высоты, требует ручного подбора этой высоты и охотнее всех конфликтует со стилями страницы.
Pop-up widget — плавающая кнопка в углу экрана, по клику разворачивается окно записи. На Тильде это самый спокойный вариант: кнопка живёт поверх блоков, не участвует в сетке, не ломает высоту секций и одинаково ведёт себя на всех страницах, куда ты её поставил.
Pop-up text — обычная ссылка в тексте, открывающая то же окно. Хороша для длинного лендинга: ставишь её в конце каждого смыслового блока, и человек записывается из того места, где созрел.
Как бы я делал. На лендинге — pop-up widget или текстовые ссылки. Inline — только на отдельной странице «Запись», где кроме заголовка и виджета ничего нет: там нет соседних блоков, с которыми можно поссориться, и высоту подбирать легко.
Где Calendly отдаёт код: меню «•••» и пункт Add to website
Путь короткий. Рядом с лендингом или с конкретным типом встречи есть меню из трёх точек — в нём пункт «Add to website». Выбираешь тип встраивания, жмёшь Continue, при желании выключаешь фото, детали события и cookie-баннер, настраиваешь цвета, если тариф платный, — и забираешь код кнопкой «Copy Code».
Блок T123, элемент Zero Block или HEAD — куда именно класть код
Мест три, и они не взаимозаменяемые.
Блок T123 «HTML-код». Основной вариант: Библиотека блоков → категория «Другое» → T123. Вставляешь скопированный код целиком, как есть, ничего не редактируя. Внутри редактора работают горячие клавиши: Ctrl+F (⌘+F на маке) ищет по коду, Ctrl+Space показывает подсказки по JavaScript.
HTML-элемент в Zero Block. Нужен, когда виджет должен стоять внутри сложной вёрстки — поверх картинки, в колонке, рядом с текстом. Работает по тем же правилам, что и T123, просто живёт внутри свободного холста.
Вставка в HEAD. Для всего сайта: Настройки сайта → Ещё → «HTML-код для вставки внутрь head». Для одной страницы: Настройки страницы → Вставка кода → «HTML-код для вставки внутрь head». Сюда выносят подключение таблицы стилей `widget.css` и скрипта Calendly, если виджет нужен на нескольких страницах. Тогда в сами блоки кладут только контейнер — div с классом `calendly-inline-widget` и атрибутом `data-url` для встроенного варианта или кнопку с вызовом `Calendly.showPopupWidget('ссылка');return false;` для всплывающего.
И совет, который Тильда даёт прямым текстом: если пишешь свой CSS, не используй универсальные селекторы и селекторы по тегам. Только уникальные классы и id — иначе твои стили начнут воевать со стилями конструктора, и проиграет обычно вёрстка страницы, а не виджет.
Как подогнать виджет под дизайн страницы — и что для этого не понадобится платить
При генерации кода Calendly показывает экран с переключателями, и половина людей проскакивает его не глядя. Зря: именно там виджет перестаёт выглядеть чужой заплаткой на аккуратном лендинге.
Бесплатно доступны три вещи. Можно спрятать своё фото — на странице записи оно стоит крупно, и если на Тильде у тебя уже есть блок с портретом, второй портрет через полсотни пикселей смотрится нелепо. Можно убрать блок с описанием типа встречи: название, длительность и описание почти всегда дублируют то, что ты уже сказал на лендинге своими словами и лучше. И можно выключить cookie-баннер, который иначе перекрывает нижнюю часть врезки как раз на мобильном, где места и так мало.
Цвета — фон, текст и акцентный оттенок кнопок — настраиваются только на платных тарифах. Это единственное место во всей истории со встраиванием, где упираешься в деньги: сам виджет, повторюсь, работает и на бесплатном.
И ещё одна цифра, которая бьёт ровно по встраиванию. На бесплатном тарифе Calendly даёт один тип встречи. Один — значит на сайт ты повесишь ровно одну форму записи. Если задумывались две кнопки, «Бесплатное знакомство на 15 минут» и «Разбор на час», это уже Standard: там типы встреч не ограничены, а подключённых календарей может быть до шести.
Код вставлен, а виджета нет
Самая частая ситуация, и почти всегда причина в одном из пяти мест.
### Страница не опубликована
В режиме редактирования и предпросмотра Тильда показывает содержимое T123 просто текстом. Так задумано. Код начинает работать только на опубликованной странице, и никакие переустановки этого не изменят.
### Не подключена таблица стилей widget.css
Calendly в разделе про поломки встраивания пишет прямо: если `widget.css` не подключён, врезка уезжает в самый низ страницы. Выглядит так, будто виджет пропал, а он просто оказался под футером.
### Виджет вырезал блокировщик рекламы
Расширения браузера режут врезку Calendly, и это описано в официальной документации сервиса. Лечится не борьбой с блокировщиком, а запасным выходом: рядом с виджетом ставят короткое сообщение и обычную кнопку-ссылку на страницу записи.
### Стили Тильды и Calendly конфликтуют друг с другом
Симптом узнаваемый: страница перестаёт скроллиться или на ней не грузятся картинки. Calendly предлагает лечение одной строкой — `body {overflow: unset !important;}` в стилях страницы.
### Ошибка «calendly.com refused to connect» после смены ссылки
Она приходит после того, как ты переименовал тип встречи или поменял ссылку записи. Код на Тильде остался старый, адрес в нём больше никуда не ведёт. Правится только пересозданием кода в Calendly и полной заменой блока — редактировать адрес руками в старом коде затея так себе.
Первый раз я собирал эту связку вечером и часа полтора ходил кругами именно из-за публикации: правил код, сохранял, смотрел предпросмотр, видел текст, снова правил код. Ощущение — будто чинишь то, что не сломано. Так что порядок отладки простой: сначала опубликуй, потом открой опубликованный адрес в новой вкладке, и только после этого решай, что не так.
Высота, двойной скролл и выпадающие списки на мобильном
Раскладка виджета зависит от ширины контейнера, и цифры у Calendly конкретные: от 1000 пикселей и шире форма встаёт в две колонки, уже 650 пикселей — собирается в один столбец. Стандартный контейнер Тильды заметно шире тысячи, так что на десктопе ты почти наверняка получишь двухколоночный вид.
На мобильном другая проблема: виджет уезжает из центра. Calendly советует держать ширину контейнера не меньше 320 пикселей и убрать лишние внутренние отступы.
Высота — единственный параметр, который придётся подбирать руками. Универсального числа нет, и документация честно отправляет мерить инспектором браузера. Лишние полосы прокрутки внутри врезки — это как раз несовпадение заданной высоты и реального содержимого.
Отдельная беда — выпадающие списки на смартфоне: они открываются за краем экрана. Рекомендация сервиса — уменьшить высоту врезки, заменить выпадающие списки радиокнопками, если вариантов немного, или вообще уйти на всплывающий формат.
Что не переедет на Тильду: заявки в CRM, русский язык страницы записи и оплата
Четыре вещи, про которые лучше узнать до запуска, а не после.
Заявки остаются в Calendly. Формы Тильды отдают данные в её «Сервисы» — почту, Telegram, amoCRM, таблицы. Виджет Calendly к этой машинерии не подключён и складывает записи у себя, так что в разделе заявок твоего проекта будет пусто.
Язык не переключается. Страница записи внутри врезки останется английской, даже если весь остальной сайт на русском. Для клиента это выглядит как чужая вставка посреди твоего лендинга.
Ссылка на созвон приедет не та. Calendly сам заводит встречу в Zoom, Google Meet или Microsoft Teams и подкладывает адрес прямо в приглашение — это его сильная сторона, и работает она безотказно. Только ни Яндекс Телемоста, ни Контур Толка в списке интеграций нет. Если твои клиенты живут в Телемосте, виджет всё равно выдаст им ссылку на Meet, а правильную вы станете досылать руками в переписке — то есть ровно та ручная возня, ради избавления от которой всю связку и городили. Этот пункт стоит закрыть до того, как соберёшь страницу: он решается не настройкой виджета, а выбором сервиса.
Оплата за консультацию идёт через Stripe и PayPal — российскому самозанятому от этого пользы мало. Если задача звучит как «клиент записывается и сразу платит», это довод посмотреть в сторону рублёвых планировщиков, а не докручивать Calendly.
И то, о чём стоит помнить через полгода. Тильда прямо предупреждает, что не консультирует по работе стороннего кода и что чужие сервисы могут отвалиться из-за собственных обновлений. Виджет, который исправно работал с зимы, однажды утром просто не откроется — а узнаешь ты об этом от клиента, который не смог записаться. Заведи привычку раз в месяц открывать опубликованную страницу с телефона, как обычный посетитель. Тридцать секунд, зато без сюрпризов.
Частые вопросы про Calendly на Тильде
### Нужен ли платный тариф Calendly, чтобы встроить виджет на Тильду?
Нет. Все три способа встраивания открыты на всех тарифах, включая бесплатный. Платный тариф нужен для другого — настройки цветов виджета под свой бренд.
### Почему код в блоке T123 виден просто текстом?
Потому что страница не опубликована. В редакторе и предпросмотре Тильда показывает содержимое блока как текст, и это её обычное поведение, а не сбой.
### Есть ли у Тильды готовый блок онлайн-записи без стороннего кода?
Есть, но только под YCLIENTS — блок T790 из категории «Виджеты». Регистрируешься на yclients.com, заполняешь «Информацию о филиале», в разделе «Онлайн-запись» создаёшь форму для сайта, копируешь её номер и вставляешь в меню «Контент» блока. Для остальных сервисов записи — только T123.
### Что делать, если после смены ссылки виджет выдаёт ошибку подключения?
Забрать в Calendly новый код через «Add to website» и заменить содержимое блока целиком. Правка адреса внутри старого кода помогает не всегда, а времени съедает больше.
### Стоит ли ставить виджет на несколько страниц сразу?
Стоит, но тогда подключение стилей и скрипта логичнее вынести в HEAD сайта, а на страницах оставить только контейнер или кнопку. Иначе один и тот же скрипт будет грузиться в каждом блоке отдельно.
Комментарии
Войдите, чтобы написать комментарий