Webflow Integration

There are two ways to bring FlareBuilder content into a Webflow site, and they suit different use cases:

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

Approach 1: Dynamic Embed

Webflow’s Embed element lets you add arbitrary HTML and JavaScript to any page. You can fetch content from FlareBuilder’s Feed API at page load and inject it directly into the DOM — no Webflow CMS required.

1. Add a Container and an Embed

In the Webflow Designer:

Add a Div Block where your content list should appear. Give it an ID (e.g. flarebuilder-list) in the element settings panel.
Add an Embed element anywhere on the page (the bottom of the <body> is ideal). This is where the JavaScript goes.

2. Add the JavaScript

Paste this into the Embed element, replacing your-org and the section/field IDs to match your template:

<script>
(function () {
  const FEED_URL = 'https://your-org.flarebuilder.com/feed';
  const container = document.getElementById('flarebuilder-list');
  if (!container) return;

  async function loadFeed(params) {
    const qs  = new URLSearchParams(params);
    const res = await fetch(FEED_URL + (qs.size ? '?' + qs : ''));
    return res.json();
  }

  function renderItems(items) {
    for (const item of items) {
      const section = item.sections.find(s => s.id === 'content')?.data ?? {};

      const card = document.createElement('div');
      card.className = 'fb-card';
      card.innerHTML = [
        `<h3><a href="/item?id=${item.id}">${escHtml(item.title)}</a></h3>`,
        section.summary ? `<p>${escHtml(section.summary)}</p>` : '',
        `<time datetime="${item.date_published}">`,
          new Date(item.date_published).toLocaleDateString(),
        `</time>`,
      ].join('');
      container.appendChild(card);
    }
  }

  function escHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;')
             .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  // Initial load
  let nextUrl = null;
  loadFeed({ limit: 10, types: 'news' }).then(data => {
    renderItems(data.items);
    nextUrl = data.pagination.has_more ? data.pagination.next : null;
    if (!nextUrl) document.getElementById('fb-load-more')?.remove();
  });

  // Load More button
  const loadMoreBtn = document.getElementById('fb-load-more');
  if (loadMoreBtn) {
    loadMoreBtn.addEventListener('click', async () => {
      if (!nextUrl) return;
      loadMoreBtn.textContent = 'Loading…';
      const data = await fetch(nextUrl).then(r => r.json());
      renderItems(data.items);
      nextUrl = data.pagination.has_more ? data.pagination.next : null;
      if (!nextUrl) loadMoreBtn.remove();
      else loadMoreBtn.textContent = 'Load more';
    });
  }
})();
</script>

Add a Load More button anywhere on the page with the ID fb-load-more:

<button id="fb-load-more">Load more</button>

3. Display a Single Item

Create a new Webflow page (e.g. /item) with placeholder Div Blocks for each piece of content. Give them IDs like fb-title, fb-body, fb-date. Add this Embed to that page:

<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();

      // rich_text fields can be set via innerHTML — they come from your editor
      const bodyEl = document.getElementById('fb-body');
      if (bodyEl && content.body) bodyEl.innerHTML = content.body;
    });
})();
</script>

4. Filtering by Tag or Type

Change the params object passed to loadFeed to filter results. Use any Feed API parameters:

// Only events
loadFeed({ limit: 10, types: 'event' })

// Tagged "featured"
loadFeed({ limit: 10, tags: 'featured' })

// Events in June, Eastern time
loadFeed({ limit: 10, types: 'event',
           event_start: '2025-06-01', event_end: '2025-06-30',
           timezone: 'America/New_York' })

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 secret
    const secret = request.headers.get('x-webhook-secret');
    if (secret !== env.WEBHOOK_SECRET) {
      return new Response('Unauthorized', { status: 401 });
    }

    const event = await request.json();

    // 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.content_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 secret you configure 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 secret = request.headers.get('x-webhook-secret');
    if (secret !== env.WEBHOOK_SECRET) 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