Connect your website to Birkly so visitors see CMS-managed content. The main path is birkly-client.js plus the public template language.
In short: (1) Add the Birkly client script (data-cms-url when the site is not on the CMS host). (2) Put canonical template tags in your HTML ({title}, {for each entry in 'blog'}, {'excerpt'}). The client fetches published content and replaces the tags. Plugin storefront behavior (auth, cart, RSVP) loads automatically — Project sites and plugins. Stack choice: Choose your stack. Templating deep dive: Templating overview and Client setup.
Beginner
Add the client
External site:
<script src="https://your-cms-domain.com/birkly-client.js"
data-cms-url="https://your-cms-domain.com"></script>
Same host / project preview:
<script src="/birkly-client.js"></script>
Use template tags
<h1>Blog</h1>
{for each entry in 'blog' with status = published ordered by newest}
<article>
<h2>
<a href="post.html?collection=blog&slug={slug}">{title}</a>
</h2>
{if entry has 'excerpt'}
<p>{'excerpt'}</p>
{endif}
<time>{created_at format "F j, Y"}</time>
</article>
{endfor}
Detail pages must not loop the whole collection — Detail pages & URL context.
Full static page example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
</head>
<body>
<birkly-region collection="site_elements" entry="header"></birkly-region>
<main>
{for each entry in 'blog' with status = published ordered by newest limit 10}
<article>
<h2><a href="post.html?collection=blog&slug={slug}">{title}</a></h2>
<time>{created_at format "F j, Y"}</time>
</article>
{endfor}
</main>
<script src="https://cms.example.com/birkly-client.js"
data-cms-url="https://cms.example.com"></script>
</body>
</html>
When to use another path
- Web components / regions — Web components, Templating regions
- SPA (React / Vue) — SPA guide (no
{for each}in JSX) - SSR / bake — SSR and build-time
- Forms — Public forms, Public forms templating
- AI apps — connect under Settings → AI (MCP connections); website tools under Agent Guide → Tools (WebMCP)
- Agent Guide discovery — when the guide is published, Birkly may inject
<link rel="alternate" type="application/json" title="Agent Guide" href="https://YOUR-SITE/.well-known/agent-guide.json">intoproject/pages; crawlers and integrations can also use/llms.txtand the public API (Agent Guide public API)
Advanced Users
For developers & AI
- Syntax SSOT: Canonical syntax + CMS
docs/TEMPLATE_LANGUAGE_SPEC.md - CORS: allow your site origin on the CMS for external embeds
- Install Birkly via zip or Docker only (Composer/npm/cPanel install channels are not documented as supported product paths)
- Cheat sheet: Templating cheat sheet