Webflow Integration

There are two ways to bring FlareBuilder content into a Webflow site:

Approach	Best for	Webflow plan required
Widget embed	Displaying a live content list on existing pages	Any (including free)
CMS sync	Full Webflow CMS integration with native styling and filtering	CMS or above

The <flare-feed> widget is the fastest way to display a FlareBuilder content list in Webflow — no Velo, no custom JavaScript.

In the Webflow Designer, add an Embed element where you want the content list to appear.

Paste the widget code, replacing your-org and any filter parameters:

<script src="https://flarebuilder.com/widget/v1/flare-feed.min.js"></script>

<flare-feed
  src="https://your-org.flarebuilder.com/feed"
  show-image
  show-date
  show-tags
></flare-feed>

Publish or use Webflow’s staging preview to see content load.

The widget supports filtering (?templates=, ?tags=), CSS variable theming, dark mode, and template field mapping. See the Widget guide for the full reference.

Detail Pages

The widget handles list views. For a detail page that shows the full content of a single item, create a Webflow page (e.g. /item) with Div Blocks for each field and add this Embed:

<script>
(function () {
  const id = new URLSearchParams(location.search).get('id');
  if (!id) return;

  fetch('https://your-org.flarebuilder.com/p/' + encodeURIComponent(id))
    .then(r => r.ok ? r.json() : null)
    .then(item => {
      if (!item) {
        document.getElementById('fb-title').textContent = 'Not found';
        return;
      }
      const content = item.sections.find(s => s.id === 'content')?.data ?? {};

      document.getElementById('fb-title').textContent = item.title;
      document.getElementById('fb-date').textContent  =
        new Date(item.date_published).toLocaleDateString();

      const bodyEl = document.getElementById('fb-body');
      if (bodyEl && content.body) bodyEl.innerHTML = content.body;
    });
})();
</script>

Give your placeholder Div Blocks IDs matching fb-title, fb-body, and fb-date. Link to this page from your widget using a custom item template — see the Widget guide → Custom Item Template.

Approach 2: CMS Sync

Syncing FlareBuilder content into Webflow CMS collections gives you Webflow’s native CMS features: collection lists, filtering, binding to Webflow styles, multi-reference fields, and static site generation with ?cms pages.

The sync happens server-side — FlareBuilder fires a webhook when content is published, an intermediary picks it up and calls the Webflow CMS API, then optionally triggers a site republish.

Architecture

FlareBuilder publishes content
        │
        ▼
Webhook fires to your endpoint
        │
        ▼
Intermediary (Make.com / custom function)
  1. Fetch full item from /p/:id
  2. Map fields to Webflow collection schema
  3. Create or update Webflow CMS item
  4. Trigger Webflow site publish
        │
        ▼
Webflow rebuilds and serves updated content

Option A: Make.com (no-code)

Create a Webflow CMS collection that mirrors your FlareBuilder template. Add fields for title, summary, body, publish date, and any other fields you need. Note the Collection ID from the Webflow CMS settings.
Generate a Webflow API token in your Webflow site settings under Apps & Integrations → API Access. Give it CMS read/write and site publish permissions.
Create a Make.com scenario with these modules:
- Webhook trigger (Make gives you a URL — you’ll paste it into FlareBuilder)
- HTTP: Make a request — GET https://your-org.flarebuilder.com/p/{{item.id}} to fetch the full item
- Webflow: Create/Update a CMS Item — map the FlareBuilder fields to your Webflow collection fields
- Webflow: Publish a Site (optional) — trigger a rebuild after the item is created
Add the webhook in FlareBuilder under Settings → Webhooks. Paste the Make.com webhook URL and select the content_published event.

Option B: Custom Webhook Handler

For full control, deploy a small server function. The example below runs as a Cloudflare Worker, but any server-side runtime works:

// webhook-handler.js (Cloudflare Worker or Node.js server)

const WEBFLOW_API  = 'https://api.webflow.com/v2';
const COLLECTION_ID = 'your-webflow-collection-id';
const SITE_ID       = 'your-webflow-site-id';

export default {
  async fetch(request, env) {
    if (request.method !== 'POST') {
      return new Response('Method not allowed', { status: 405 });
    }

    // Validate the FlareBuilder webhook signature (HMAC-SHA256)
    const rawBody = await request.text();
    const signature = request.headers.get('x-webhook-signature');
    const encoder = new TextEncoder();
    const key = await crypto.subtle.importKey(
      'raw', encoder.encode(env.WEBHOOK_SECRET),
      { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']
    );
    const sig = await crypto.subtle.sign('HMAC', key, encoder.encode(rawBody));
    const hex = Array.from(new Uint8Array(sig)).map(b => b.toString(16).padStart(2, '0')).join('');
    if (signature !== `sha256=${hex}`) {
      return new Response('Unauthorized', { status: 401 });
    }

    const event = JSON.parse(rawBody);

    // Only handle published content
    if (event.event !== 'content_published') {
      return new Response('Ignored', { status: 200 });
    }

    // Fetch the full item from FlareBuilder
    const itemRes = await fetch(
      `https://your-org.flarebuilder.com/p/${event.data.id}`
    );
    if (!itemRes.ok) return new Response('Item not found', { status: 404 });
    const item = await itemRes.json();

    // Map FlareBuilder fields to Webflow collection fields
    const contentSection = item.sections.find(s => s.id === 'content')?.data ?? {};
    const webflowItem = {
      fieldData: {
        name:        item.title,                              // Webflow "name" = title
        slug:        item.id,                                 // use the FB UUID as slug
        summary:     contentSection.summary ?? '',
        body:        contentSection.body    ?? '',
        'publish-date': item.date_published,
        'flarebuilder-id': item.id,
      }
    };

    // Upsert: check if an item with this slug already exists
    const listRes = await webflowRequest(
      `GET /collections/${COLLECTION_ID}/items?slug=${item.id}`,
      env.WEBFLOW_TOKEN
    );
    const existing = listRes.items?.[0];

    if (existing) {
      // Update
      await webflowRequest(
        `PATCH /collections/${COLLECTION_ID}/items/${existing.id}/live`,
        env.WEBFLOW_TOKEN,
        webflowItem
      );
    } else {
      // Create
      await webflowRequest(
        `POST /collections/${COLLECTION_ID}/items/live`,
        env.WEBFLOW_TOKEN,
        webflowItem
      );
    }

    // Trigger site publish
    await webflowRequest(
      `POST /sites/${SITE_ID}/publish`,
      env.WEBFLOW_TOKEN,
      { publishToWebflowSubdomain: true }
    );

    return new Response('Synced', { status: 200 });
  }
};

async function webflowRequest(path, token, body) {
  const [method, endpoint] = path.split(' ');
  const res = await fetch(WEBFLOW_API + endpoint, {
    method,
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type':  'application/json',
      'accept-version': '2.0.0',
    },
    body: body ? JSON.stringify(body) : undefined,
  });
  if (!res.ok) {
    const err = await res.text();
    throw new Error(`Webflow API ${res.status}: ${err}`);
  }
  return res.json().catch(() => ({}));
}

Set these secrets on your deployment:

WEBHOOK_SECRET — the whsec_... secret shown when you create the webhook in FlareBuilder
WEBFLOW_TOKEN — your Webflow API token

Triggering a Webflow Rebuild on Publish

Even if you’re using the dynamic embed approach, you may want Webflow to republish the site when FlareBuilder content changes — for example, to update an OG image, a static event listing, or a sitemap.

You can do this without a full CMS sync by calling the Webflow publish API directly from a lightweight webhook handler:

// Minimal handler: just republish Webflow when anything is published in FlareBuilder
export default {
  async fetch(request, env) {
    const rawBody = await request.text();
    const signature = request.headers.get('x-webhook-signature');
    const encoder = new TextEncoder();
    const key = await crypto.subtle.importKey(
      'raw', encoder.encode(env.WEBHOOK_SECRET),
      { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']
    );
    const sig = await crypto.subtle.sign('HMAC', key, encoder.encode(rawBody));
    const hex = Array.from(new Uint8Array(sig)).map(b => b.toString(16).padStart(2, '0')).join('');
    if (signature !== `sha256=${hex}`) return new Response('Unauthorized', { status: 401 });

    await fetch(`https://api.webflow.com/v2/sites/${env.WEBFLOW_SITE_ID}/publish`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${env.WEBFLOW_TOKEN}`,
        'Content-Type':  'application/json',
      },
      body: JSON.stringify({ publishToWebflowSubdomain: true }),
    });

    return new Response('OK');
  }
};

ICS Calendar

Add a subscription link anywhere on a Webflow page using an Embed element:

<a href="https://your-org.flarebuilder.com/feed?format=ics&templates=event">
  Subscribe to calendar (.ics)
</a>

Or if you’ve added a Google Calendar integration to Webflow, subscribe that Google Calendar to your ICS feed URL and embed it natively:

https://your-org.flarebuilder.com/feed?format=ics&templates=event