Data Attributes
Use the data-fanid-gated attribute to gate any standard HTML element. This approach works with CMSes that strip
unknown HTML tags.
Basic usage
<div data-fanid-gated>
<h2>Premium Player Statistics</h2>
<table>...</table>
</div>
The SDK automatically scans for [data-fanid-gated] elements when it initializes, and watches for new ones added
dynamically (SPA support via MutationObserver).
Per-element configuration
Use additional data attributes to override global settings:
<div
data-fanid-gated
data-fanid-title="VIP Content"
data-fanid-message="Sign in to see exclusive stats"
data-fanid-button="Join Now"
data-fanid-style="gradient"
>
<p>Protected content here</p>
</div>
Attribute reference
| Attribute | Description |
|---|---|
data-fanid-gated | Marks the element for gating (required, no value needed) |
data-fanid-title | Override the overlay heading |
data-fanid-message | Override the overlay description |
data-fanid-button | Override the CTA button label |
data-fanid-style | Override visual style: blur, gradient, or cover |
data-fanid-min-height | Minimum height (px) for the gated overlay |
data-fanid-max-height | Maximum height (px) — collapses content below and clips overflow |
data-fanid-overlay-align | Prompt placement: top (default), center, or bottom |
Keeping the prompt above the fold
When a section is tall, the sign-in CTA can land below the viewport. Set data-fanid-max-height to cap the gated area,
and the overlay sits at the top by default — the user sees the prompt without scrolling.
<div
data-fanid-gated
data-fanid-max-height="360"
data-fanid-overlay-align="top"
>
<article>...long premium article...</article>
</div>
How it differs from the Custom Element
| Custom Element | Data Attributes | |
|---|---|---|
| Tag | <wmt-fanid-protected> | Any standard element |
| Overlay injection | Inside the custom element | Inside the target element |
| CMS compatible | May be stripped by some CMSes | Works everywhere |
| Ad-blocker resistance | Randomized CSS class names | Randomized CSS class names |
Dynamic content (SPA)
Elements with data-fanid-gated that are added to the DOM after page load are automatically detected and gated. This
works with single-page applications, client-side routing, and dynamically loaded content.
// This element will be automatically gated when appended
const el = document.createElement('div')
el.setAttribute('data-fanid-gated', '')
el.innerHTML = '<p>Dynamically gated content</p>'
document.body.appendChild(el)