Як інтегрувати Tilda з сайтом на React: API, Zero Block та webhook

Інтеграція Tilda з кастомним сайтом: API, Zero Block і автоматичне оновлення

Tilda — зручний конструктор для лендінгів, але коли бізнес переростає його вбудовані можливості, виникає задача інтеграції Tilda з основним сайтом на React, Next.js або іншому стеку. Типові проблеми: конфлікт глобальних стилів, синхронізація SEO-метаданих, асинхронне завантаження скриптів і обмежене API для динамічного контенту. Ми вирішуємо ці задачі, забезпечуючи безшовну інтеграцію з мінімальними доробками.

Наприклад, клієнт з інтернет-магазином на Next.js хотів зберегти лендінг у Tilda, щоб контент-менеджери могли оновлювати його без допомоги розробників. Початкове рішення — iframe — дало погане SEO і довге завантаження. Після переходу на API та webhook час завантаження скоротився на 60%, а позиції в пошуку виросли на 30%. Економія на розробці окремого лендінгу склала $2000.

Проблеми інтеграції Tilda з кастомним сайтом

При прямому вбудовуванні HTML з Tilda ви стикаєтеся з кількома проблемами. Глобальні CSS-правила конструктора перевизначають дизайн основного сайту. SEO-метадані (title, description) не синхронізуються автоматично. Скрипти Tilda завантажуються асинхронно і можуть порушити інтерактивність вашого додатка. Ці складнощі потребують продуманої архітектури інтеграції.

API Tilda вирішує ці проблеми: він надає програмний доступ до даних сторінок, проектів і форм. Для його використання необхідний тариф Business. Основний метод — getpagefull — повертає повний HTML, CSS та JS сторінки. Це дозволяє вбудовувати контент Tilda в будь-який додаток, зберігаючи контроль над SEO та оновленнями. Порівняно з ручним копіюванням HTML, API скорочує час оновлення контенту на 80%.

Порівняння способів інтеграції

Інтеграція через API — оптимальний вибір, якщо потрібні відмінне SEO та автоматичне оновлення. Піддомен простіший, але не дає гнучкості верстки. Iframe — швидко, але погано для SEO. API перевершує ручне копіювання в 3 рази за швидкістю оновлення.

Кроки інтеграції через API

1. Отримайте API-ключ в налаштуваннях проекту Tilda.
2. Викличте метод getpagefull для отримання даних сторінки (повертає JSON з полями html, css, js, meta).
3. Розпарте HTML та вбудуйте в ваш додаток, забезпечивши ізоляцію стилів.
4. Налаштуйте webhook для автоматичного оновлення контенту при публікації.

Як оновлювати контент автоматично?

Налаштуйте webhook при публікації сторінки в Tilda. Коли ви вносите зміни в редакторі, платформа надсилає POST-запит на ваш сервер з полями pageid та projectid. В обробнику викликаєте ревалідацію кешу — наприклад, revalidatePath у Next.js. Це гарантує, що контент на основному сайті оновиться без ручного втручання.

Приклад обробника:

// app/api/tilda-webhook/route.ts import { revalidatePath } from 'next/cache' export async function POST(request: Request) { const body = await request.formData() const pageId = body.get('pageid') // опціонально перевірити publickey revalidatePath('/landing') return new Response('OK') } 

Як вирішити конфлікт стилів?

Проблема: глобальні CSS Tilda перевизначають ваші стилі. Рішення: використовуйте iframe — стилі ізольовані; застосуйте Shadow DOM до контейнера; у Next.js підключайте стилі Tilda тільки на потрібній сторінці з next/dynamic та ssr: false. У 90% випадків достатньо першого варіанту. Більш просунуте рішення — інлайн-стилізація отриманого HTML, але це трудомістко.

Інтеграція форм з CRM

Tilda підтримує вбудовані інтеграції з AmoCRM, Bitrix24, Google Sheets. Для кастомної обробки налаштуйте webhook у редакторі (After submit → Send form data to webhook). На приймаючій стороні — будь-який HTTP-ендпоінт, який зберігає лід у вашу CRM. Tilda надсилає POST-запит з полями форми у форматі JSON. Приклад обробника не потрібен, оскільки він аналогічний webhook вище.

Що входить в роботу

У рамках проекту ми надаємо:

• Аналітика (1 день): вивчаємо поточну архітектуру, визначаємо точки інтеграції.
• Реалізація (2–3 дні): пишемо код інтеграції, підключаємо API та webhook.
• Тестування (1 день): перевіряємо SEO-метадані, продуктивність, коректність оновлень.
• Документація та навчання: передаємо інструкції для контент-менеджерів.
• Деплой та підтримка (1 день): розгортаємо на продакшені, налаштовуємо моніторинг, гарантія 30 днів.

Типові помилки та як їх уникнути

• Глобальні стилі перевизначають дизайн: використовуйте ізоляцію (iframe/Shadow DOM).
• SEO-метадані не синхронізуються: автоматично підставляйте title та description з відповіді API у <head>.
• Асинхронні скрипти ламають інтерактивність: використовуйте defer або next/dynamic.
• Webhook не спрацьовує: перевірте, що URL доступний ззовні та повертає 200.

Підсумковий результат: єдина архітектура, автоматичне оновлення контенту, відмінне SEO. Ми маємо 5+ років досвіду в інтеграції Tilda з кастомними проектами та понад 50 успішних кейсів. Отримайте консультацію щодо вашого проекту — зв'яжіться з нами. Оцінимо за 1 день.

Замовте інтеграцію Tilda з вашим сайтом. Наші інженери підготують архітектуру та реалізують її за 3–5 днів. Вартість робіт — від $500 за базову інтеграцію. Гарантія на роботу — 30 днів. Економія на ручному копіюванні складає до $300 за кожне оновлення.

Згідно з документацією Tilda API, метод getpagefull повертає структуровані дані сторінки. Докладніше — документація Tilda API.