WMT FanID
Gated Content

Overview

How FanID gated content works — visual content gating for engagement, not security.

Gated Content Overview

FanID gated content is a visual content gating system. It encourages website visitors to sign in with FanID by obscuring content behind a blur or overlay — while keeping the content in the HTML source for search engines.

How it works

  1. Content is rendered normally in the HTML source (the DOM)
  2. The FanID Widget applies a visual overlay (blur, gradient, or cover) on top of gated sections
  3. Visitors see a call-to-action prompting them to sign in
  4. After authentication, the overlay is removed and content is revealed
  5. Search engine crawlers see the raw HTML — they don't execute the JavaScript that applies the gate

Gated content vs. server-side authorization

AspectServer-Side AuthGated Content
Content in HTML sourceNo — server withholds itYes — content is in the DOM
SEO indexableNoYes
Bypass difficultyImpossible without credentialsPossible with DevTools
PurposeSecurityEngagement funnel
Gated content is not a security boundary. A technically savvy user could inspect the DOM and read the content. This is by design — the goal is to convert casual visitors into FanID users, not to protect secrets. The same model is used by Medium, LinkedIn, and news paywalls.

Four ways to gate content

The SDK supports four methods, all available from day one. The first three apply a visual gate that keeps content in the DOM (good for SEO). The fourth removes content entirely on logged-out visitors (good for non-indexable UI like account links and CDN-cacheable layouts).

1. Custom Element (declarative)

Zero-configuration approach for non-technical users:

<wmt-fanid-protected>
  <p>This content is gated.</p>
</wmt-fanid-protected>

See Custom Element for details.

2. Data attributes

For CMSes that strip unknown HTML tags:

<div data-fanid-gated>
  <p>This content is gated.</p>
</div>

See Data Attributes for details.

3. Programmatic (JavaScript API)

Full developer control over any DOM element:

FanIDWidget.gate('#premium-stats')

See Programmatic Gating for details.

4. CSS-only soft gating

The widget sets data-fanid-authed on <body> whenever the user is signed in. Pure CSS rules can read that attribute and show or hide elements without any JS, which keeps the page CDN-cacheable:

[data-fanid-locked] { display: none; }
body[data-fanid-authed] [data-fanid-locked] { display: block; }

See Soft Gating with CSS for details.

Ad-blocker resistance

The gating overlay uses randomized CSS class names generated at init time. Since the class names change on every page load, ad blockers cannot add them to static filter lists. The injected <style> tag is also monitored and re-injected if removed. See Ad-Blocker Resistance for the full strategy.

Configuration

Full reference for all FanID Widget configuration options.

Custom Element

Use the <wmt-fanid-protected> element to gate content with zero JavaScript.

Copyright © 2026