Gated Content
Full-Page Gating
Gate the entire page with a full-screen overlay.
Gate the entire page behind a full-viewport overlay that blurs all content and displays a centered sign-in prompt.
Usage
FanIDWidget.init({ baseUrl: 'https://your-org.fanid.co' })
FanIDWidget.on('ready', () => {
FanIDWidget.gateFullPage({
title: 'Welcome to the Fan Zone',
message: 'Sign in with FanID to access this page',
buttonText: 'Continue with FanID',
})
})
Options
FanIDWidget.gateFullPage({
title: 'Members Only', // Overlay heading
message: 'Sign in to continue', // Overlay description
buttonText: 'Sign In', // CTA button label
allowClose: false, // Allow dismissing without auth (default: false)
backdropBlur: 8, // Blur intensity for page content (default: 8)
})
| Option | Type | Default | Description |
|---|---|---|---|
title | string | From global config | Overlay heading |
message | string | From global config | Overlay description |
buttonText | string | From global config | CTA button label |
allowClose | boolean | false | Show a close button on the overlay |
backdropBlur | number | 8 | Blur intensity in pixels for the page behind the overlay |
Removing the full-page gate
FanIDWidget.ungateFullPage()
The full-page gate is also automatically removed when the user authenticates.
Declarative alternative
You can also use the Custom Element in fullpage mode:
<wmt-fanid-protected mode="fullpage">
<main>
...entire page content...
</main>
</wmt-fanid-protected>