Squarespace Integration

Overview

This guide shows you how to add a FlareBuilder content feed to your Squarespace website using code blocks.

Step 1: Get Your Code

Log in to your FlareBuilder dashboard and navigate to Integrations. Use the Code Generator to create your embed code:

1. Select JavaScript Snippet as your framework
2. Configure filters (tags, types, limit)
3. Copy the generated HTML, Script, and Style code

Step 2: Add a Code Block

In your Squarespace editor:

1. Navigate to the page where you want to add the feed
2. Click an Insert Point (the + icon)
3. Select Code from the menu
4. In the code block settings, select HTML

Step 3: Paste Your Code

Paste your complete FlareBuilder code into the code block:

<style>
  #flare-feed {
    max-width: 100%;
    padding: 1rem;
  }
  .feed-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .feed-item h3 {
    margin-top: 0;
  }
  .tags {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
    flex-wrap: wrap;
  }
  .tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.875rem;
  }
</style>

<div id="flare-feed"></div>

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant',
    container: '#flare-feed',
    filters: {
      limit: 10,
      status: 'active'
    },
    render: {
      item: (item) => {
        let html = `<article class="feed-item">`;
        html += `<h3>${item.title}</h3>`;

        if (item.tags && item.tags.length > 0) {
          html += '<div class="tags">';
          item.tags.forEach(tag => {
            html += `<span class="tag">${tag}</span>`;
          });
          html += '</div>';
        }

        if (item.sections) {
          for (const [sectionId, fields] of Object.entries(item.sections)) {
            for (const [fieldId, value] of Object.entries(fields)) {
              if (value === null) continue;

              if (fieldId === 'image' && value) {
                html += `<img src="${value}" style="max-width:100%;height:auto;border-radius:4px;" alt="">`;
              } else if (fieldId === 'content_html' && value) {
                html += `<div>${value}</div>`;
              }
            }
          }
        }

        html += `</article>`;
        return html;
      }
    }
  });
</script>

Step 4: Save and Publish

Click Apply to save the code block, then Save your page. Preview your site to see the feed, then Publish when ready.

Troubleshooting

Code block not available

• Make sure you have a Squarespace Business plan or higher
• Code blocks are not available on all templates - try a different page section

Feed not showing

• Replace 'your-tenant' with your actual tenant slug
• Check that you have published content
• Try refreshing the page after saving

Styling conflicts

• Squarespace templates have their own CSS - you may need to adjust styles
• Use more specific CSS selectors or !important to override
• Test on mobile and desktop

Next Steps

• SDK Reference - Customize your feed rendering
• API Reference - Add filters and sorting
• Webhooks - Trigger updates when content changes