Customization Options

The FanFest embed inherits your channel's theme automatically. This page covers additional customization you can apply from the SDK side.

Background Color

Set the embed iframe's background color to match your page while the embed loads:

FanFestSDK.init({
  clientId: 'YOUR_WEB_APP_ID',
  iframe: {
    backgroundColor: '#1a1a2e'
  }
})

This prevents a flash of white (or mismatched color) before the embed content renders.

Host Callbacks

SSO Required

hostLoginFn and hostRewardsFn only work when you have an SSO integration set up. Without SSO, these callbacks are not triggered. If you're using the embed-only tier, skip this section.

The SDK provides two callback hooks that let you integrate the embed with your site's own login and rewards experiences.

hostLoginFn

Called when a user taps "Log in" inside the FanFest embed. Use this to trigger your own authentication flow instead of (or alongside) FanFest's built-in login:

FanFestSDK.init({
  clientId: 'YOUR_WEB_APP_ID',
  hostLoginFn: function () {
    // Open your site's login modal
    document.getElementById('login-modal').showModal()
  }
})

hostRewardsFn

Called when a user taps "Rewards" inside the embed. Use this to route users to your own rewards experience:

FanFestSDK.init({
  clientId: 'YOUR_WEB_APP_ID',
  hostRewardsFn: function () {
    window.location.href = '/rewards'
  }
})

Channel Theming

The visual appearance of the embed (colors, branding, logo) is controlled by your channel's theme in the FanFest dashboard. Changes to your channel theme are reflected in the embed automatically.

See the Brand Guidelines for details on:

• Design tokens -- All 79 color tokens and their defaults
• Theming -- How to create and apply custom themes
• Embed styling -- Making the embed match your brand

All Init Options

Option	Type	Required	Default	Description
clientId	string	Yes	--	Your FanFest Web App ID
apiBase	string	No	https://api.fanfest.vip	API base URL (override for staging/dev)
appOrigin	string	No	https://fanfest.vip	FanFest app origin (override for staging/dev)
iframe.backgroundColor	string	No	var(--color-brand-background)	Embed iframe background color
hostLoginFn	() => void	No	undefined	Callback when user taps Log in
hostRewardsFn	() => void	No	undefined	Callback when user taps Rewards

For a deeper dive into all configuration options and advanced patterns, see the Embed Configuration Reference.