Quick Start Guide

Get your FlareBuilder feed running in 5 minutes with the JavaScript SDK

Overview

This guide will walk you through embedding a FlareBuilder content feed into your website using our JavaScript SDK. No build tools required - just copy and paste!

Prerequisites:
  • A FlareBuilder account with published content
  • Your tenant slug (e.g., your-tenant from your-tenant.flarebuilder.com)
  • Basic HTML/JavaScript knowledge

Step 1: Add the SDK Script

Add the FlareBuilder SDK to your HTML page, just before the closing </body> tag:

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

Step 2: Create a Container

Add a container element where you want the feed to appear:

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

Step 3: Initialize the Feed

Add a script to initialize your feed with basic configuration:

<script>
  const feed = new FlareBuilder.Feed({
    tenant: 'your-tenant',           // Replace with your tenant slug
    container: '#flare-feed',
    filters: {
      limit: 10,
      status: 'active'
    },
    render: {
      item: (item) => {
        let html = `<article class="feed-item">`;

        // Title
        html += `<h3>${item.title}</h3>`;

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

        // Content sections
        if (item.sections) {
          for (const [sectionId, fields] of Object.entries(item.sections)) {
            html += `<div class="section">`;

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

              if (fieldId === 'image' && value) {
                html += `<img src="${value}" alt="" loading="lazy">`;
              } else if (fieldId === 'content_html' && value) {
                html += `<div class="content">${value}</div>`;
              } else if (fieldId.includes('date') && value) {
                html += `<p><strong>Date:</strong> ${new Date(value).toLocaleDateString()}</p>`;
              } else if (typeof value === 'string') {
                html += `<p>${value}</p>`;
              }
            }

            html += `</div>`;
          }
        }

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

Step 4: Add Basic Styling

Add some CSS to make your feed look good:

<style>
  #flare-feed {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
  }

  .feed-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
  }

  .feed-item h3 {
    margin-top: 0;
    color: #1a1a1a;
  }

  .tags {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
  }

  .tag {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 16px;
    font-size: 0.875rem;
  }

  .feed-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
  }

  .content {
    line-height: 1.6;
    color: #333;
  }
</style>

Complete Example

Here's a complete working example you can copy and paste:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My FlareBuilder Feed</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 0;
            background: #f5f5f5;
        }

        #flare-feed {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }

        .feed-item {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .feed-item h3 {
            margin-top: 0;
        }

        .tags {
            display: flex;
            gap: 0.5rem;
            margin: 1rem 0;
        }

        .tag {
            background: #e3f2fd;
            color: #1976d2;
            padding: 0.25rem 0.75rem;
            border-radius: 16px;
            font-size: 0.875rem;
        }

        .feed-item img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <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}" alt="" loading="lazy">`;
                                } else if (fieldId === 'content_html' && value) {
                                    html += `<div>${value}</div>`;
                                }
                            }
                        }
                    }

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

Next Steps

Now that you have a basic feed running, explore these resources:

🎉 You're all set!
Your FlareBuilder feed is now live. Visit your page to see your content in action.