Webflow Integration

Requirements

Webflow allows you to embed custom HTML and JavaScript code in your projects. FlareBuilder integrates seamlessly using Webflow's Custom Code feature.

Method 1: Page-Level Embed

Add a FlareBuilder feed to a specific page in your Webflow project:

Step 1: Add Embed Element

1. Open your page in the Webflow Designer
2. From the Add Elements panel (+), drag a Custom Code element onto your page
3. Place it where you want the feed to appear

Step 2: Add FlareBuilder Code

Click the Custom Code element and paste the following:

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

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant-slug',
    container: '#flarebuilder-feed',
    filters: {
      types: ['event', 'announcement'],
      limit: 10
    }
  });
</script>

Step 3: Style the Container

Webflow's Custom Code elements come with a purple placeholder. You can style the container div by targeting #flarebuilder-feed in your custom CSS or page settings.

Step 4: Publish

1. Click Publish in the top right
2. The feed will appear on the published site (not in the Designer preview)

Method 2: Site-Wide Embed (Header/Footer)

Add FlareBuilder globally across your entire site using Custom Code in Project Settings:

Step 1: Open Project Settings

1. Click the project name in the top left to open Project Settings
2. Navigate to Custom Code tab

Step 2: Add to Footer Code

In the Footer Code section, add the FlareBuilder SDK:

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>

Step 3: Add Feed Container to Pages

On each page where you want a feed, add an HTML Embed element with:

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

<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant-slug',
    container: '#flarebuilder-feed',
    filters: { limit: 10 }
  });
</script>

Method 3: Collection Template Pages

Display different feeds based on Collection item fields:

Step 1: Add Custom Field

1. Open your Collection settings
2. Add a Plain Text field named "Feed Type" or "Feed Tags"
3. Set values like "event", "announcement", etc. for each collection item

Step 2: Add Dynamic Embed

In your Collection Template page, add a Custom Code element with:

<div id="flarebuilder-collection-feed"></div>

<script src="https://flarebuilder.com/v1/flarebuilder.js"></script>
<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant-slug',
    container: '#flarebuilder-collection-feed',
    filters: {
      types: ['{{wf {"path":"feed-type","type":"PlainText"\} }}'],
      limit: 10
    }
  });
</script>

Styling Your Feed

Add custom CSS to match your Webflow design system:

Using Custom CSS

1. Go to Project Settings → Custom Code
2. In the Head Code section, add your styles:

<style>
/* FlareBuilder Feed Styles */
.flarebuilder {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.flare-item {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.flare-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.flare-title {
    font-family: inherit; /* Use Webflow's font */
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.flare-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.flare-tag {
    background: #f5f5f5;
    color: #333;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

.flare-section {
    margin-top: 1rem;
    line-height: 1.6;
    color: #555;
}

/* Match Webflow breakpoints */
@media (max-width: 991px) {
    .flarebuilder {
        padding: 1.5rem 1rem;
    }

    .flare-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .flare-item {
        padding: 1.5rem;
    }

    .flare-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 479px) {
    .flarebuilder {
        padding: 1rem 0.75rem;
    }

    .flare-item {
        padding: 1rem;
    }
}
</style>

Using Webflow's Typography

To inherit Webflow's font settings, you can target specific Webflow classes:

/* Make FlareBuilder titles use Webflow's H2 style */
.flare-title {
    font-family: var(--heading-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
}

/* Or reference Webflow classes directly */
.flare-item {
    font-family: inherit;
}

Responsive Design

Ensure your feed looks great on all devices by testing Webflow's breakpoints:

The CSS example above includes responsive adjustments for all Webflow breakpoints.

Troubleshooting

Feed Not Showing in Designer

This is expected behavior. Custom code (including FlareBuilder feeds) only renders on the published site, not in the Webflow Designer preview. You must publish to see your feed.

Feed Not Showing on Published Site

• Verify you have a paid Webflow site plan (not just an account plan)
• Check browser console for errors (F12 → Console)
• Ensure your tenant slug is correct
• Verify the container div ID matches the SDK configuration

Styling Conflicts

• Webflow's global styles may affect FlareBuilder elements
• Use more specific CSS selectors to override: #flarebuilder-feed .flare-item
• Check for conflicting class names in Webflow's style panel

Multiple Feeds on Same Page

Use unique IDs for each feed container:

<!-- First embed element -->
<div id="flarebuilder-events"></div>
<script>
  new FlareBuilder.Feed({
    tenant: 'your-tenant',
    container: '#flarebuilder-events',
    filters: { types: ['event'] }
  });
</script>

<!-- Second embed element -->
<div id="flarebuilder-news"></div>
<script>
  new FlareBuilder.Feed({
    tenant: 'your-tenant',
    container: '#flarebuilder-news',
    filters: { types: ['announcement'] }
  });
</script>

CMS Collection Dynamic Embeds

When using dynamic fields from Collections, make sure to use the Webflow dynamic embed UI (clicking the + icon) rather than manually typing the syntax. Webflow's dynamic embeds are processed at build time.