Frameworks

Plain HTML

Integrate FanID gated content into static HTML websites.

The simplest integration — add script tags and HTML elements.

Setup

<!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 site</h1>

<!-- Public content -->
<p>This is visible to everyone.</p>

<!-- Gated content (Custom Element) -->
<wmt-fanid-protected>
  <h2>Exclusive Article</h2>
  <p>This is gated behind FanID authentication.</p>
</wmt-fanid-protected>

<!-- Gated content (Data attribute) -->
<div data-fanid-gated data-fanid-title="Premium Stats">
  <table>...</table>
</div>

<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>

Self-hosting

For better ad-blocker resistance, download the widget files and serve them from your own domain:

Download fan-id-widget.iife.js and widget.css
Host them alongside your other static assets
Reference them with relative paths:

<link rel="stylesheet" href="/assets/widget.css" />
<script src="/assets/fan-id-widget.iife.js"></script>

When served from your own domain, ad blockers cannot distinguish the widget from your first-party code.

Styling & Theming

Customize the look and feel of the FanID Widget and gated content overlays.

React / Next.js

Integrate FanID gated content into React and Next.js applications.