Embed Styling

When you embed FanFest on your website, you want it to feel like a natural part of your page. This guide covers how the embed inherits theme colors, how to control its appearance from the host page, and common styling patterns.

How the Embed Gets Its Theme

The FanFest embed loads inside an iframe. When the embed initializes, it fetches your channel's active theme via the getBrandTheme GraphQL query and applies all design tokens as CSS custom properties inside the iframe. This means:

• The embed automatically inherits your channel's brand colors
• If you update your theme in Channel Settings, the embed reflects the changes on next load
• Community themes apply when a user selects a community within the embed

You do not need to pass theme colors to the SDK --- the embed handles this automatically.

SDK Styling Options

The SDK init() call accepts one styling-related option:

iframe.backgroundColor

Controls the background color of the iframe element on the host page. This is visible while the embed content loads and behind any transparent areas.

FanFestSDK.init({
  clientId: 'YOUR_WEB_APP_ID',
  iframe: {
    backgroundColor: '#100B1E'  // Match your channel's --bg color
  }
});

Option	Type	Default	Description
iframe.backgroundColor	string	"var(--color-brand-background)"	CSS background-color for the iframe element

Recommendation: Set this to your channel's --bg value (e.g., #100B1E for the default FanFest theme) so there is no visual flash while the embed loads.

Styling the Host Page

The embed itself is styled by the channel theme inside the iframe. To make the surrounding host page complement the embed, use CSS on your container elements.

Container Background

Match your page section background to the embed's background color:

<style>
  .fanfest-section {
    background-color: #100B1E;  /* Match your channel's --bg */
    padding: 0;
  }
</style>

<div class="fanfest-section">
  <div id="fanfest-embed" style="width: 100%; height: 600px;"></div>
</div>

Full-Page Embed

For a full-page embed experience:

<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #100B1E;
  }
  #fanfest-embed {
    width: 100vw;
    height: 100vh;
  }
</style>

<div id="fanfest-embed"></div>

Responsive Sizing

The embed iframe uses width: 100% and height: 100% internally. Set the dimensions on the container element:

<style>
  .embed-container {
    width: 100%;
    max-width: 1280px;
    height: 80vh;
    min-height: 500px;
    margin: 0 auto;
  }
</style>

<div class="embed-container" id="fanfest-embed"></div>

Common Patterns

Light Host Page with Dark Embed

If your website uses a light theme but FanFest uses a dark theme, create a visual transition:

.fanfest-section {
  background: linear-gradient(to bottom, #ffffff 0%, #100B1E 10%);
  padding-top: 40px;
}

Rounded Embed Container

Add visual polish with rounded corners and a subtle border:

.embed-wrapper {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(135, 90, 249, 0.2); /* Brand color at 20% */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

Brand-Matched Loading State

Show a branded placeholder while the embed initializes:

.embed-container {
  background-color: #100B1E;
  display: flex;
  align-items: center;
  justify-content: center;
}

.embed-container::before {
  content: 'Loading...';
  color: #875AF9;
  font-family: sans-serif;
  font-size: 14px;
}

What You Cannot Customize from the Host

The following are controlled by your channel theme and cannot be overridden from the host page:

• Internal UI colors --- Button colors, text colors, card backgrounds, etc. are all driven by your channel's design tokens
• Typography --- The embed uses Inter as the primary font
• Component layout --- The arrangement of shows, contests, leaderboards, and chat within the embed

To change any of these, update your channel theme through the theme editor in Channel Settings. See Theming for details.

Verifying Your Embed Appearance

1. Set your iframe.backgroundColor to match your channel's --bg value
2. Open your page and check for visual consistency between the host and embed
3. Test at different viewport widths --- the embed is responsive
4. Check that there is no color flash on initial load
5. Verify the embed looks correct in both your light and dark page themes (if applicable)