Integration·Framer·advanced

AI content for Framer

AI content for Framer: relay Crontent webhooks through your backend into Framer CMS collections or code components.

How-to: Integrate Crontent with Framer. Official docs: Framer. Shared API contract: Publishing API and SDK.

Verify Crontent webhooks on your own backend, fetch posts, then sync into Framer CMS via a plugin or an external store Framer reads at publish time. Direct server writes are limited.

Constraints

Framer CMS is designed for manual editing and plugin-based sync, not arbitrary server-side writes from any URL.
There is no first-party "incoming webhook creates CMS item" endpoint you can call with a bearer token alone.
Long-form body_mdx may need conversion to HTML or plain blocks Framer Rich Text accepts.

Recommended architecture:

text

Crontent webhook → your server (verify + fetch) → Framer plugin sync or external store → Framer site

Field mapping

Crontent field	Framer CMS field
`title`	Title field
`seo_title`	Custom text field for page SEO
`slug`	Slug
`excerpt`	Plain text summary
`body_html`	Rich text or HTML embed field
`body_mdx`	Convert before import
`tags`	Multi-select or plain text
`hero_image_url`	Image field
`canonical_url`	URL field
`sources[]`	Append to body or repeater field

Backend webhook relay

Run verification and fetch on infrastructure you control:

import { Crontent } from "@crontent/sdk";

const crontent = new Crontent({ apiKey: process.env.CRONTENT_API_KEY! });

export async function handleWebhook(req: Request) {
  const rawBody = await req.text();
  const valid = await crontent.webhooks.verify({
    rawBody,
    signature: req.headers.get("x-crontent-signature"),
    timestamp: req.headers.get("x-crontent-timestamp"),
    secret: process.env.CRONTENT_WEBHOOK_SECRET!,
  });
  if (!valid) return new Response("unauthorized", { status: 401 });

  const { post_id } = JSON.parse(rawBody);
  const post = await crontent.posts.get(post_id);

  // Store in your DB or queue for a Framer sync plugin to consume
  await fetch(process.env.FRAMER_SYNC_URL!, {
    method: "POST",
    headers: { Authorization: `Bearer ${process.env.FRAMER_SYNC_SECRET}` },
    body: JSON.stringify({ post, status: "draft" }),
  });

  return new Response("ok");
}

Build a Framer plugin that reads from your API and creates or updates CMS items as drafts. Alternatively, use Framer code components that fetch live content from your API at runtime (no CMS write needed).

Alternative: export HTML

For simple sites, render body_html on your server and embed via iframe or fetch in a code component. You lose native CMS editing but gain full automation.

Backfill

Sync historical posts through the same relay. Framer publish is manual after plugin import.