Get FanFest Running in 5 Minutes
Add live fan engagement to your website in three steps. All you need is a FanFest account with channel admin access and a website to embed on.
Prerequisites
- A FanFest account with channel admin access. Sign up at fanfest.vip if you don't have one.
- A website where you can add a script tag and HTML.
Step 1: Add the SDK Script Tag
~30 secAdd the FanFest SDK to your page by including this script tag before your closing </body> tag:
Versioned (recommended for production):
<script src="https://sdk.production.fanfest.vip/1.0.20/fanfest-sdk.js"></script>Latest (always points to the most recent release):
<script src="https://sdk.production.fanfest.vip/latest/fanfest-sdk.js"></script>TIP
Use a versioned URL in production to avoid unexpected changes. The latest URL is convenient for development.
Step 2: Initialize and Embed
~1 minAdd a container element where you want the FanFest widget to appear, then initialize the SDK with your Web App ID:
<div id="fanfest-embed"></div>
<script>
FanFestSDK.init({
clientId: 'YOUR_WEB_APP_ID'
})
</script>Replace YOUR_WEB_APP_ID with the Web App ID from your FanFest channel settings. You can find it in the SSO Management section of your channel admin dashboard.
That's it -- FanFest is now live on your page. Your visitors will see the full fan engagement experience: shows, contests, chat, and leaderboards.
Step 3: Customize the Look
~3 minMake the embed match your site by setting a background color:
<script>
FanFestSDK.init({
clientId: 'YOUR_WEB_APP_ID',
iframe: {
backgroundColor: '#1a1a2e'
}
})
</script>Available init options:
| Option | Type | Required | Default |
|---|---|---|---|
clientId | string | Yes | -- |
apiBase | string | No | https://api.fanfest.vip |
appOrigin | string | No | https://fanfest.vip |
iframe.backgroundColor | string | No | var(--color-brand-background) |
Want login and rewards callbacks?
With an SSO integration, you can add hostLoginFn and hostRewardsFn callbacks to connect the embed with your site's own login and rewards flows. See Customization Options for details.
For full theming and brand customization, see the Brand Guidelines.
Complete Example
Here is a minimal, copy-paste-ready HTML page with everything wired together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Site with FanFest</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<!-- FanFest embed container -->
<div id="fanfest-embed"></div>
<!-- FanFest SDK -->
<script src="https://sdk.production.fanfest.vip/latest/fanfest-sdk.js"></script>
<script>
FanFestSDK.init({
clientId: 'YOUR_WEB_APP_ID',
iframe: {
backgroundColor: '#1a1a2e'
}
})
</script>
</body>
</html>What's Next?
You have a working FanFest embed. From here you can:
- Add SSO to identify users across your platform
- Add event tracking to award points for user actions on your site
- Connect your loyalty system for two-way data sync
- Explore all configuration options for advanced setups
See Next Steps for a full comparison of integration tiers.