Tilda CMS Integration for Website
Tilda — a visual builder with a block editor. The main integration scenario: Tilda creates a separate section of the website (landing, blog, promotional pages), while the main application remains on a separate stack. Or Tilda exports HTML/CSS/JS for embedding in a custom project.
Use Cases
Subdomain: promo.example.com on Tilda, app.example.com on React/Next.js. The simplest option — no code integration, just DNS.
Embed on page: a Tilda widget or form is embedded via <iframe> or exported HTML.
Zero Block + custom JS: in the Tilda editor, Zero Block allows writing arbitrary HTML/CSS/JS and calling external APIs.
Export and hosting: a page is exported as static and deployed independently.
Subdomain Setup
In Tilda project settings: Publishing → Custom domain. DNS record:
CNAME promo.example.com tilda.ws.
Tilda issues SSL automatically via Let's Encrypt. After domain binding — proxies or iframes are not needed.
Tilda API — Getting Page Data
Tilda provides an API for reading project structure (requires Business plan):
// 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
}
// List of project pages
export async function getPages() {
return tildaRequest('getpageslist', { projectid: PROJECT_ID })
}
// Data of a specific page (HTML, CSS, JS, meta)
export async function getPage(pageId: string) {
return tildaRequest('getpage', { pageid: pageId })
}
// Full page export (with all assets)
export async function getPageFull(pageId: string) {
return tildaRequest('getpagefull', { pageid: pageId })
}
Response from getpagefull contains:
{
"id": "12345",
"title": "Homepage",
"descr": "SEO description",
"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" }]
}
Embedding Tilda Page in 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} />
{/* Connect Tilda CSS */}
{page.css.map((s: any) => (
<link key={s.from} rel="stylesheet" href={s.from} />
))}
</Head>
{/* Render Tilda HTML */}
<div dangerouslySetInnerHTML={{ __html: page.html }} />
{/* Connect Tilda JS */}
{page.js.map((s: any) => (
<script key={s.from} src={s.from} defer />
))}
</>
)
}
Important: Tilda styles are global and can conflict with your CSS. Wrap content in Shadow DOM or isolated iframe.
Webhook from Tilda
When a page is published, Tilda sends a POST to the specified 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')
// can check publickey for security
revalidatePath('/landing')
return new Response('OK')
}
Zero Block — Custom Code Inside Tilda
In a Zero Block, you can write a full widget with external API calls:
<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} $/mo</p>
</div>`
).join('')
})
})()
</script>
Tilda Forms and Third-party Integrations
Tilda has built-in integrations with AmoCRM, Bitrix24, Google Sheets, Mailchimp. For custom form data processing — webhook:
Form settings → After submit → Send form data to webhook:
POST https://api.example.com/tilda-lead
{
"Name": "John",
"Email": "[email protected]",
"Phone": "+1900..."
}
On the receiving end — any HTTP endpoint that puts a lead in a CRM.
Limitations
Tilda is not designed for dynamic applications. No routing, no state between pages, no SSR. Once you need a personal account, shopping cart, or authentication — Tilda is replaced or complemented by a custom frontend.
Timeline
Setting up a subdomain and DNS: 1 day. API integration with revalidation: 1–2 days. Form setup and webhooks: 1 day.