Embed Setup Details

This page provides additional detail on embedding FanFest. If you have not completed the quickstart yet, start with the main quickstart guide.

Container Element

The SDK automatically creates an iframe inside your page when init() is called. The embed attaches to the page body by default. No specific container div is required, but you can control placement with CSS if needed.

Script Loading

The SDK is distributed as an IIFE (Immediately Invoked Function Expression) that attaches FanFestSDK to the global window object. It is also available as ES module and CommonJS formats:

Format	URL
IIFE (recommended)	/1.0.20/fanfest-sdk.js
ES Module	/1.0.20/esm/fanfest-sdk.esm.js
CommonJS	/1.0.20/cjs/fanfest-sdk.cjs.js

All URLs are relative to https://sdk.production.fanfest.vip.

Using the ES Module

If you use a bundler or native ES modules:

import FanFestSDK from 'https://sdk.production.fanfest.vip/1.0.20/esm/fanfest-sdk.esm.js'

FanFestSDK.init({
  clientId: 'YOUR_WEB_APP_ID'
})

Async Loading

To avoid blocking page rendering, load the SDK asynchronously:

<script
  src="https://sdk.production.fanfest.vip/latest/fanfest-sdk.js"
  async
  onload="FanFestSDK.init({ clientId: 'YOUR_WEB_APP_ID' })"
></script>

Troubleshooting

The embed does not appear

1. Check the console for errors. The SDK logs validation errors if clientId is missing or invalid.
2. Verify the script loaded by checking for window.FanFestSDK in your browser console.
3. Check CSP headers -- if your site uses a Content Security Policy, ensure frame-src and script-src allow fanfest.vip and sdk.production.fanfest.vip.

CORS errors

The SDK communicates with api.fanfest.vip via the embedded iframe. CORS is handled by the iframe origin, not your host page. If you see CORS errors, ensure you are not setting a restrictive apiBase that conflicts with your CSP.

Iframe sandbox restrictions

The FanFest iframe requires these sandbox permissions to function:

• allow-scripts
• allow-same-origin
• allow-popups (for external links)
• allow-forms (for user input)

If your hosting environment applies additional iframe restrictions, ensure these permissions are allowed.

Next Steps

• Customize the embed -- Background color, callbacks, and theming
• Full configuration reference -- Every init option documented
• Advanced patterns -- Multiple embeds, responsive sizing, action mappings