Gated Content
Visual Styles
Three built-in visual styles for gated content overlays.
The SDK ships with three visual styles for gated content. Set the style globally in init() or per-element via
attributes.
Blur (default)
Content is visible but unreadable behind a frosted-glass effect. A centered CTA overlay prompts sign-in.
FanIDWidget.init({
baseUrl: 'https://your-org.fanid.co',
gatedContent: { style: 'blur', blurAmount: 8 }
})
+-----------------------------------+
| ░░░ Blurred content text ░░░░░░░ |
| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
| +---------------------------+ |
| | Exclusive Content | |
| | Sign in to view | |
| | [ Sign In ] | |
| +---------------------------+ |
| ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ |
+-----------------------------------+
Best for: articles, long-form text, images.
Gradient
A teaser showing the first portion of content, fading to white with a CTA at the bottom. Use teaserHeight to control
how much content is visible.
FanIDWidget.init({
baseUrl: 'https://your-org.fanid.co',
gatedContent: { style: 'gradient', teaserHeight: 120 }
})
+-----------------------------------+
| Visible teaser content here... |
| First paragraph is readable... |
| ░░░░░ fading gradient ░░░░░░░░░░ |
| +---------------------------+ |
| | Continue reading? | |
| | [ Sign In with FanID ] | |
| +---------------------------+ |
+-----------------------------------+
Best for: blog posts, news articles where a preview encourages sign-up.
Cover
Content is completely hidden behind a solid branded panel. Nothing is visible.
FanIDWidget.init({
baseUrl: 'https://your-org.fanid.co',
gatedContent: { style: 'cover' }
})
+-----------------------------------+
| |
| [ FanID Logo ] |
| |
| This content is exclusive |
| to FanID members |
| |
| [ Sign In with FanID ] |
| |
+-----------------------------------+
Best for: pages where no teaser is desired (e.g., premium video, downloads).
Per-element override
Mix styles on the same page:
<wmt-fanid-protected style-mode="gradient" teaser-height="100">
<p>Article with teaser...</p>
</wmt-fanid-protected>
<wmt-fanid-protected style-mode="cover">
<video src="premium.mp4"></video>
</wmt-fanid-protected>
Or with data attributes:
<div data-fanid-gated data-fanid-style="gradient">
<p>Gradient style content</p>
</div>