Wix Integration

Use FlareBuilder as the content management layer for your Wix site. Your team manages content in FlareBuilder — events, announcements, news, whatever you publish — and your Wix site pulls it in automatically through the Feed API.

How It Works

FlareBuilder’s Feed API is a public JSON endpoint. Wix Velo’s wix-fetch module lets you call any HTTP API from your site’s code. You fetch your FlareBuilder content at page load, bind it to Wix UI elements, and display it — no sync jobs, no manual CMS entries in Wix.

Prerequisites

• A FlareBuilder organization with published content
• Your organization’s Feed API URL: https://your-org.flarebuilder.com/feed
• A Wix site with Velo by Wix enabled (Editor → Dev Mode toggle)

Tip

To enable Velo: open your site in the Wix Editor, click Dev Mode in the top bar, then Turn on Dev Mode. This adds a code panel at the bottom of the editor.

---

Display a List of Content Items

The most common use case: a page showing a list of items (articles, events, announcements) pulled from FlareBuilder.

1. Add a Repeater

In the Wix Editor, add a Repeater element to your page. Inside each repeater item, add:

• A Text element for the title — give it the ID #itemTitle
• A Text element for the summary — give it the ID #itemSummary
• A Text element for the date — give it the ID #itemDate
• An Image element (optional) — give it the ID #itemImage
• A Button or linked container for navigation

Give the Repeater itself the ID #contentRepeater.

2. Add Page Code

Open the code panel for the page (click the page name in the left panel → Add Code), then paste this:

import { fetch } from 'wix-fetch';

const FEED_URL = 'https://your-org.flarebuilder.com/feed';

$w.onReady(async function () {
  const items = await loadItems();
  bindRepeater(items);
});

async function loadItems({ tag, type, limit = 20 } = {}) {
  const params = new URLSearchParams({ limit });
  if (tag)  params.set('tag', tag);
  if (type) params.set('templates', type);

  try {
    const response = await fetch(`${FEED_URL}?${params}`);
    if (!response.ok) return [];
    const data = await response.json();
    return data.items ?? [];
  } catch (e) {
    console.error('FlareBuilder fetch failed:', e);
    return [];
  }
}

function bindRepeater(items) {
  if (items.length === 0) {
    // Show an empty state element if you have one
    $w('#contentRepeater').hide();
    return;
  }

  $w('#contentRepeater').data = items.map(item => ({
    _id: item.id,        // Wix Repeater requires a unique _id field
    ...item
  }));

  $w('#contentRepeater').onItemReady(($item, itemData) => {
    $item('#itemTitle').text   = itemData.title ?? '';
    $item('#itemSummary').text = itemData.summary ?? '';
    $item('#itemDate').text    = formatDate(itemData.date_published);

    if (itemData.feature_image) {
      $item('#itemImage').src = itemData.feature_image;
    }
  });
}

function formatDate(isoString) {
  if (!isoString) return '';
  return new Date(isoString).toLocaleDateString('en-US', {
    year: 'numeric', month: 'long', day: 'numeric'
  });
}

Replace your-org with your actual FlareBuilder subdomain.

Filter by Template or Tag

To show only a specific content type (e.g., only “Event” items) or tagged items, pass parameters to loadItems:

// Only events, sorted oldest-first
const items = await loadItems({ type: 'event', sort: 'oldest' });

// Only items tagged "featured"
const items = await loadItems({ tag: 'featured' });

---

Pagination: Load More

To add a Load More button (#loadMoreBtn):

import { fetch } from 'wix-fetch';

const FEED_URL = 'https://your-org.flarebuilder.com/feed';
let nextCursor = null;
let allItems   = [];

$w.onReady(async function () {
  const { items, cursor } = await loadPage();
  allItems  = items;
  nextCursor = cursor;
  bindRepeater(allItems);

  $w('#loadMoreBtn').onClick(async () => {
    if (!nextCursor) return;
    const { items: more, cursor: next } = await loadPage(nextCursor);
    allItems   = [...allItems, ...more];
    nextCursor = next;
    bindRepeater(allItems);
    if (!nextCursor) $w('#loadMoreBtn').hide();
  });
});

async function loadPage(cursor = null) {
  const params = new URLSearchParams({ limit: 10 });
  if (cursor) params.set('cursor', cursor);

  const response = await fetch(`${FEED_URL}?${params}`);
  const data     = await response.json();
  return {
    items:  data.items ?? [],
    cursor: data.pagination?.has_more ? data.pagination.next_cursor : null
  };
}

---

Display a Single Item

To show the full content of one item, use the /p/:slug endpoint. This works well with a Wix Dynamic Page where the slug comes from the URL.

In a dynamic page’s code:

import { fetch } from 'wix-fetch';
import wixLocation from 'wix-location';

$w.onReady(async function () {
  // The slug is the last segment of the URL path
  const slug = wixLocation.path[wixLocation.path.length - 1];

  try {
    const response = await fetch(
      `https://your-org.flarebuilder.com/p/${encodeURIComponent(slug)}`
    );
    if (!response.ok) {
      $w('#errorMsg').show();
      return;
    }

    const item = await response.json();

    $w('#pageTitle').text   = item.title   ?? '';
    $w('#pageSummary').text = item.summary ?? '';
    $w('#pageBody').html    = item.content ?? '';   // requires an HTML component

    if (item.feature_image) {
      $w('#pageImage').src = item.feature_image;
    }
  } catch (e) {
    console.error('Failed to load item:', e);
  }
});

Note

Wix’s built-in Text elements don’t render HTML. To display item.content (rich HTML), add an HTML Component (iframe) to your page and set its src to a data: URL, or use a third-party HTML embed element.

const html = `<html><body style="font-family:sans-serif;padding:16px">${item.content}</body></html>`;
$w('#htmlEmbed').postMessage(html);

---

Events and ICS Calendar

For event content, you can embed a subscribable calendar feed directly in Wix.

Subscribe via Google Calendar

1. Copy your FlareBuilder ICS feed URL:

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

2. Open Google Calendar → Other calendars → From URL → paste the URL → Add calendar.

3. In Wix Editor, add a Google Calendar embed app from the Wix App Market and connect it to your calendar.

Embed the ICS URL Directly

Alternatively, provide the ICS URL as a direct subscription link on your page:

$w('#subscribeBtn').onClick(() => {
  const icsUrl = 'https://your-org.flarebuilder.com/feed?format=ics&type=event';
  // Open in a new tab — browsers/OS will offer to subscribe
  wixLocation.to(icsUrl);
});

---

Keeping Content Fresh

The Feed API is cached at Cloudflare’s edge for up to 15 minutes. This means new content may take up to 15 minutes to appear on your Wix site after publishing — no action needed on the Wix side.

For near-real-time updates on a specific page, you can force a fresh fetch by appending a timestamp:

const response = await fetch(`${FEED_URL}?limit=20&_t=${Date.now()}`);

Caution

Bypassing the cache on every page load increases latency and load on your origin. Use it only where freshness is critical, such as an internal dashboard — not a public-facing page.

---

Backend Fetching (Optional)

If you prefer to keep the API call server-side — for example, to add request logging or merge FlareBuilder data with other sources — you can move the fetch to a Velo backend file.

Create a file backend/flarebuilder.jsw:

import { fetch } from 'wix-fetch';

export async function getItems(params = {}) {
  const qs = new URLSearchParams({ limit: 20, ...params }).toString();
  const response = await fetch(`https://your-org.flarebuilder.com/feed?${qs}`);
  if (!response.ok) return { items: [], pagination: {} };
  return response.json();
}

Then call it from your page code:

import { getItems } from 'backend/flarebuilder';

$w.onReady(async function () {
  const { items } = await getItems({ tag: 'news' });
  bindRepeater(items);
});

Tip

Backend .jsw functions run on Wix’s servers, not in the visitor’s browser. This is useful if you ever need to call authenticated FlareBuilder channel feeds without exposing a token in client-side code.