Интеграция 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-эндпоинт, который кладёт лид в CRM.
Ограничения
Tilda не предназначена для динамических приложений. Нет routing, нет состояния между страницами, нет SSR. Как только нужен личный кабинет, корзина или авторизация — Tilda заменяется или дополняется кастомным фронтендом.
Сроки
Настройка субдомена и DNS: 1 день. Интеграция через API с реинвалидацией: 1–2 дня. Настройка форм и webhook-ов: 1 день.