Squarespace Integration

Squarespace’s Code Block accepts arbitrary HTML and JavaScript directly on a page, which makes the embed widget a straightforward drop-in — no plugin or developer mode required.

Caution

Code Blocks are a per-page content element and are generally available on current Squarespace plans, but code execution can be restricted depending on your plan and site version (7.0 vs 7.1). If pasting the snippet below renders as plain text instead of executing, check Settings → Advanced → Code Injection permissions for your plan, or contact Squarespace support to confirm custom code is enabled for your site.

Embed the Widget

1. Edit the page and click an insert point (+) where you want the feed to appear.

2. Choose Code from the block menu.

3. Paste:

   <script type="module" src="https://flarebuilder.com/widget/v1/flare-feed.min.js"></script>
   
   <flare-feed
     src="https://your-org.flarebuilder.com/feed"
     max-items="10"
     show-image
     show-date
     show-tags
   ></flare-feed>

4. Click outside the block to preview it inline in the editor.

5. Save and publish the page.

Filtering (by tag, template, date range) and styling (CSS custom properties, dark theme, custom item templates) all work exactly as documented in the widget guide — nothing Squarespace-specific to configure.

<!-- Example: only "Event" content, styled to match a brand color -->
<flare-feed
  src="https://your-org.flarebuilder.com/feed?templates=event"
  style="--ff-primary: #c9184a; --ff-font-family: inherit;"
  show-date
  show-image
></flare-feed>

Tip

--ff-font-family: inherit (the widget’s default) picks up whatever font is active on the surrounding page, so a widget embedded in a Squarespace Code Block will typically match your site’s typography automatically — Squarespace Code Blocks aren’t sandboxed in an iframe the way some other site builders’ embeds are.

Adding It Sitewide (Header/Footer)

If you want the widget’s loader <script> once per site instead of repeated on every page, move it to Settings → Advanced → Code Injection → Header, and keep only the <flare-feed> element itself in each page’s Code Block:

<!-- Site-wide Header code injection -->
<script type="module" src="https://flarebuilder.com/widget/v1/flare-feed.min.js"></script>

<!-- Per-page Code Block -->
<flare-feed src="https://your-org.flarebuilder.com/feed" show-date show-image></flare-feed>

Note

Site-wide Code Injection is a Squarespace plan-gated feature (typically Business plan and above). If it’s unavailable, keep the <script> tag and <flare-feed> element together in the same per-page Code Block instead — that works on any plan that allows Code Blocks at all, and is what the Quick Start above uses.

Events

For event content, see Calendar Integration. Squarespace has a native Events page type with its own calendar view; if you want FlareBuilder events to appear inside a native Squarespace calendar rather than the widget’s card list, subscribe a Google Calendar to your FlareBuilder ICS feed and embed that calendar’s iframe in a Code Block instead.