Tilda API и вебхук: тильда внутри админки сайта

Что умеет API Тильды

API у Тильды только на чтение: создать или изменить страницу через него нельзя, зато можно забрать всё, что собрано в редакторе. Доступ к нему открывается на тарифе Business, ключи publickey и secretkey генерируются в настройках аккаунта.

Для встраивания страниц в свой сайт хватает нескольких методов. Ниже — те, которыми я пользуюсь.

• getprojectslist — список проектов в аккаунте.
• getpageslist — список страниц проекта с их ID.
• getpagefullexport — HTML страницы целиком вместе со списком нужных ей файлов.
• getprojectinfo — данные проекта, включая пути, куда складывать картинки, js и css при экспорте.
• getpageexport — только тело страницы, без шапки и подвала Тильды.

Как работает вебхук Tilda

В настройках проекта, в разделе экспорта, указывается адрес вашего сервера, и после каждой публикации страницы Тильда отправляет на него GET-запрос с параметрами pageid и projectid.

Сервер в ответ должен быстро вернуть «ok», а саму загрузку страницы лучше сделать в фоне, через очередь, ведь если Тильда не получит ожидаемый ответ, она повторит запрос ещё дважды, а сам вызов может прийти с задержкой до 20 минут после публикации. Поэтому в нашей схеме и нужна кнопка «обновить все страницы»: она страхует от пропущенных вызовов.

Интеграция Tilda с сайтом шаг за шагом

Технически это небольшая задача, но в ней много мелочей. Порядок, который у меня работает:

• Завести в Тильде отдельный проект без домена и закрыть его от индексации.
• Получить ключи API и сохранить их в настройках сайта.
• Добавить в админку поле «ID страницы Тильды» для нужных разделов: лендинги, кейсы, акции.
• Написать обработчик вебхука: по pageid найти страницу на сайте и поставить загрузку в очередь.
• При загрузке забрать HTML через getpagefullexport, скачать js, css и изображения к себе.
• Вставить тело страницы между своей шапкой и подвалом, мета-теги взять из админки.
• Сбросить кеш страницы, чтобы изменения появились сразу.

Файлы и картинки: что хранить у себя

Картинки лучше скачивать на свой сервер или в своё хранилище, а не тянуть с CDN Тильды, потому что при смене тарифа или удалении проекта они просто пропадут со страниц сайта.

С js и css то же самое. Набор файлов зависит от блоков на странице: анимация, слайдер, формы подключают свои скрипты. Поэтому список файлов я беру из ответа API для каждой страницы заново и подключаю ровно в том порядке, в котором его вернула Тильда.

Тильда, конструктор или CMS: что выбрать для лендингов

Встроенная Тильда подходит не всем. Если маркетинг выпускает одну посадочную страницу в квартал, проще сверстать её силами разработки, а если страниц десятки и гипотезы меняются каждую неделю, связка окупается за несколько месяцев.

SEO и скорость страниц из Тильды

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

Скорость стоит проверять отдельно. Страницы из Тильды тяжелее рукописной вёрстки из-за общих скриптов и стилей, поэтому я смотрю PageSpeed Insights на мобильной версии после каждого крупного лендинга. Картинки в формате WebP и отложенная загрузка обычно возвращают нормальные показатели.

Ещё одна мелочь — формы. Формы Тильды отправляют заявки в её собственные приёмщики, поэтому для единой воронки я бы заменял их своими формами сайта или настраивал отправку заявок в CRM через вебхук.

Ошибки при интеграции Тильды

• Подключать файлы Тильды в другом порядке. Блоки ломаются без видимых ошибок в консоли.
• Оставить проект Тильды открытым для поисковиков и получить дубли страниц.
• Загружать страницу прямо в обработчике вебхука, без очереди.
• Хранить картинки только на CDN Тильды.
• Забыть про кеш: страница обновилась в Тильде, а на сайте висит старая версия.