WMT FanID
Gated Content

Custom Element

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

The <wmt-fanid-protected> element is the simplest way to gate content. Wrap any HTML in the tag and the SDK handles the rest.

Basic usage

<wmt-fanid-protected>
  <h2>Exclusive Interview with Coach Smith</h2>
  <p>Full article content here...</p>
  <img src="behind-the-scenes.jpg" alt="Behind the scenes" />
</wmt-fanid-protected>

HTML attributes

Override global configuration on a per-element basis using attributes:

<wmt-fanid-protected
  placeholder-title="VIP Content"
  placeholder-message="Join our fan community to see this"
  placeholder-button-text="Join Now"
  style-mode="gradient"
  teaser-height="120"
>
  <p>Protected content here</p>
</wmt-fanid-protected>

Attribute reference

AttributeTypeDescription
placeholder-titlestringOverride the overlay heading
placeholder-messagestringOverride the overlay description text
placeholder-button-textstringOverride the CTA button label
style-mode'blur' | 'gradient' | 'cover'Override the visual style for this element
teaser-heightnumberPixels of content visible before the gate
min-heightnumberMinimum height (px) for the gated overlay
max-heightnumberMaximum height (px) — collapses content below and clips overflow
overlay-align'top' | 'center' | 'bottom'Prompt placement (top by default)

Keeping the CTA in view

Use max-height together with overlay-align="top" so the prompt is visible above the fold even when the wrapped content would otherwise be long:

<wmt-fanid-protected max-height="360" overlay-align="top">
  <article>...long premium article...</article>
</wmt-fanid-protected>

How it works internally

The Custom Element wraps your content in a container and injects the overlay as regular DOM elements with randomized class names (for ad-blocker resistance):

  • Your content stays in the DOM — visible to search engines
  • The overlay uses CSS classes with a random prefix generated at init time
  • All visual properties are configurable via --fanid-gate-* CSS custom properties
  • When the user authenticates, the overlay is removed and children are restored
<wmt-fanid-protected style="--fanid-gate-button-bg: #f26522;">
  <div class="_f3x9a_root">
    <div class="_f3x9a_content">
      <!-- your original children -->
    </div>
    <div class="_f3x9a_overlay" role="dialog">
      <div class="_f3x9a_gradient"></div>
      <div class="_f3x9a_panel">
        <h3 class="_f3x9a_title">...</h3>
        <p class="_f3x9a_msg">...</p>
        <button class="_f3x9a_btn">Sign In</button>
      </div>
    </div>
  </div>
</wmt-fanid-protected>

See Styling & Theming for the full list of CSS custom properties.

Custom tag name

If you need a different element name (e.g., to avoid hypothetical future ad-blocker targeting), configure it at init:

FanIDWidget.init({
  baseUrl: 'https://your-org.fanid.co',
  gatedContent: {
    customElementName: 'my-premium-section'
  }
})

Then use your custom name:

<my-premium-section>
  <p>Gated content</p>
</my-premium-section>

FOUC prevention

Add this to your <head> to prevent a flash of ungated content before the JavaScript loads:

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

If you're using a custom element name, update the selector accordingly.

Overview

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

Data Attributes

Gate content using data attributes on standard HTML elements.

Copyright © 2026