Wix Integration

Overview

This guide shows you how to add a FlareBuilder content feed to your Wix website using the HTML embed element.

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 HTML Embed to Wix

In your Wix editor:

1. Click the + (Add Elements) button on the left sidebar
2. Select Embed Code
3. Choose Embed HTML
4. Drag the HTML embed element to your desired location on the page

Step 3: Paste Your Code

Click on the HTML embed element, then click Enter Code. Paste your complete code including the HTML, script tags, and styles:

<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;
  }
  .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: Publish Your Site

Click Update or Apply to close the code editor, then Publish your site to make the feed live.

Troubleshooting

Feed not showing

• Make sure you've replaced 'your-tenant' with your actual tenant slug
• Check that you have published content in your FlareBuilder account
• Try refreshing the page after publishing

Styling issues

• Wix may inject its own styles - adjust the CSS in the embed to override
• Use !important if needed to force your styles
• Test on mobile and desktop views

Content not updating

• The SDK caches for 5 minutes - wait a bit and refresh
• Clear your browser cache if content still doesn't update

Next Steps

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