Інтеграція CMS Tilda для сайту
Tilda — візуальний конструктор з блочним редактором. Основний сценарій інтеграції: Tilda робить окремий розділ сайту (лендинг, блог, промосторінки), а основне додаток залишається на окремому стеку. Або Tilda експортує HTML/CSS/JS для вбудовування в кастомний проект.
Сценарії використання
Субдомен: promo.example.com на Tilda, app.example.com на React/Next.js. Найпростіший варіант — жодної інтеграції коду, тільки DNS.
Embed на сторінку: віджет або форма Tilda вбудовується через <iframe> або експортований HTML.
Zero Block + кастомний JS: в редакторі Tilda Zero Block дозволяє писати довільний HTML/CSS/JS та обращатися до зовнішніх API.
Експорт та хостинг: сторінка експортується як статика та деплоїться самостійно.
Настройка субдомена
В настройках проекту Tilda: Publishing → Custom domain. DNS-запис:
CNAME promo.example.com tilda.ws.
Tilda видає SSL автоматично через Let's Encrypt. Після привязки домена — прокси або iframe не потрібні.
Tilda API — отримання даних сторінок
Tilda надає API для читання структури проекту (потрібен тариф Business):
// lib/tilda.ts
const TILDA_PUBLIC_KEY = process.env.TILDA_PUBLIC_KEY!
const TILDA_SECRET_KEY = process.env.TILDA_SECRET_KEY!
const PROJECT_ID = process.env.TILDA_PROJECT_ID!
async function tildaRequest(method: string, params: Record<string, string> = {}) {
const query = new URLSearchParams({
publickey: TILDA_PUBLIC_KEY,
secretkey: TILDA_SECRET_KEY,
...params,
})
const res = await fetch(`https://api.tildacdn.info/v1/${method}/?${query}`)
const json = await res.json()
if (json.status !== 'FOUND') throw new Error(json.message)
return json.result
}
// Список сторінок проекту
export async function getPages() {
return tildaRequest('getpageslist', { projectid: PROJECT_ID })
}
// Дані конкретної сторінки (HTML, CSS, JS, мета)
export async function getPage(pageId: string) {
return tildaRequest('getpage', { pageid: pageId })
}
// Повний експорт сторінки (зі всіма ассетами)
export async function getPageFull(pageId: string) {
return tildaRequest('getpagefull', { pageid: pageId })
}
Відповідь getpagefull містить:
{
"id": "12345",
"title": "Головна сторінка",
"descr": "SEO-описання",
"html": "<div class='t-body'>...</div>",
"css": [{ "from": "https://...", "to": "local/path.css" }],
"js": [{ "from": "https://...", "to": "local/path.js" }],
"images": [{ "from": "https://...", "to": "local/img.jpg" }]
}
Вбудовування Tilda-сторінки в Next.js
// app/landing/page.tsx
import { getPageFull } from '@/lib/tilda'
export const revalidate = 3600
export default async function LandingPage() {
const page = await getPageFull(process.env.TILDA_LANDING_PAGE_ID!)
return (
<>
<Head>
<title>{page.title}</title>
<meta name="description" content={page.descr} />
{/* Підключаємо CSS Tilda */}
{page.css.map((s: any) => (
<link key={s.from} rel="stylesheet" href={s.from} />
))}
</Head>
{/* Рендеримо HTML Tilda */}
<div dangerouslySetInnerHTML={{ __html: page.html }} />
{/* Підключаємо JS Tilda */}
{page.js.map((s: any) => (
<script key={s.from} src={s.from} defer />
))}
</>
)
}
Важливо: стилі Tilda глобальні та можуть конфліктувати з вашим CSS. Оборачивайте контент в Shadow DOM або ізольований iframe.
Webhook від Tilda
При публікації сторінки Tilda відправляє POST на вказаний URL:
POST https://your-site.com/api/tilda-webhook
Content-Type: application/x-www-form-urlencoded
pageid=12345&projectid=67890&publickey=...
// 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')
}
Zero Block — кастомний код всередину Tilda
В блоці Zero Block можна написати повноцінний віджет з обращенням до зовнішнього API:
<div id="price-widget"></div>
<script>
(function() {
fetch('https://api.example.com/pricing?source=tilda')
.then(r => r.json())
.then(data => {
document.getElementById('price-widget').innerHTML =
data.plans.map(p =>
`<div class="plan">
<h3>${p.name}</h3>
<p class="price">${p.price} $/мес</p>
</div>`
).join('')
})
})()
</script>
Форми Tilda та сторонні інтеграції
Tilda має вбудовані інтеграції з AmoCRM, Bitrix24, Google Sheets, Mailchimp. Для кастомної обробки даних форми — webhook:
Настройки форми → After submit → Send form data to webhook:
POST https://api.example.com/tilda-lead
{
"Name": "Іван",
"Email": "[email protected]",
"Phone": "+7900..."
}
На прийомній стороні — будь-який HTTP-endpoint, який кладе ліда в CRM.
Обмеження
Tilda не призначена для динамічних додатків. Нема routing, нема стану між сторінками, нема SSR. Як тільки потрібен особистий кабінет, корзина або аутентифікація — Tilda замінюється або доповнюється кастомним фронтендом.
Терміни
Настройка субдомена та DNS: 1 день. Інтеграція через API з реінвалідацією: 1–2 дні. Настройка форм та webhook-ів: 1 день.