WebSDK

Quick Start

Integrate FanID authentication and gated content into your website in under 5 minutes.

Add FanID authentication and gated content to any website in three steps.

Step 1: Add the script

Include the FanID Widget script on your page. Choose one of the following methods:

Via script tag (CDN)

<script src="https://unpkg.com/@wmt-fanid/widget/dist/fan-id-widget.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@wmt-fanid/widget/dist/widget.css" />

Via npm

npm install @wmt-fanid/widget

import FanIDWidget from '@wmt-fanid/widget'
import '@wmt-fanid/widget/dist/widget.css'

Call init() with your tenant's FanID domain. Every customer gets a dedicated tenant URL such as https://your-org.fanid.co or a custom domain like https://fans.your-site.com — the widget sends all API requests to this URL.

<script>
  FanIDWidget.init({
    baseUrl: 'https://your-org.fanid.co',
  })
</script>

Ask your FanID contact for your tenant URL, or look it up in the FanID admin dashboard. The widget logs an error and aborts if baseUrl is missing.

The same init works whether the page is served from the tenant host itself or from your own site (your team site at auburntigers.com against auburn.fanid.co). The widget uses the cookie transport only when the page host is exactly the baseUrl host — the tenant portal running the widget against itself, where the session cookie is first-party. Every other embed, including subdomains of the tenant, uses the bearer-token transport.

Any origin other than the tenant host uses the bearer transport, which requires that origin to be registered as one of your tenant's approved domains — the Domains list for your organization in the FanID admin dashboard. Add it before you test. If it is missing, the widget surfaces a "Domain not configured" error in the floating panel so the misconfiguration is obvious. See Cross-Domain Setup for details.

Step 3: Gate your content

Wrap any content you want to protect with the <wmt-fanid-protected> element:

<wmt-fanid-protected>
  <h2>Exclusive Interview</h2>
  <p>This content is only visible to authenticated FanID users.</p>
  <img src="behind-the-scenes.jpg" alt="Behind the scenes" />
</wmt-fanid-protected>

That's it. Unauthenticated visitors see a blurred overlay with a sign-in prompt. Authenticated users see the content normally. Search engines can still index the content.

Preventing content flash (FOUC)

Add this style tag in your <head> to prevent content from briefly appearing before the widget loads:

<style>
  wmt-fanid-protected:not(:defined) {
    visibility: hidden;
  }
</style>

Complete example

<!DOCTYPE html>
<html>
<head>
  <style>
    wmt-fanid-protected:not(:defined) {
      visibility: hidden;
    }
  </style>
  <link rel="stylesheet" href="https://unpkg.com/@wmt-fanid/widget/dist/widget.css" />
</head>
<body>
<h1>Welcome to our fan zone</h1>
<p>This content is public and visible to everyone.</p>

<wmt-fanid-protected>
  <h2>Members-Only Content</h2>
  <p>Sign in with FanID to read this exclusive article.</p>
</wmt-fanid-protected>

<script src="https://unpkg.com/@wmt-fanid/widget/dist/fan-id-widget.iife.js"></script>
<script>
  FanIDWidget.init({
    baseUrl: 'https://your-org.fanid.co',
  })
</script>
</body>
</html>

What's next

Configuration — Customize placeholder text, visual styles, and behavior
Gated Content Overview — Understand how content gating works
JavaScript API — Programmatic control over the widget

Configuration

Full reference for all FanID Widget configuration options.