Gated Content

Programmatic Gating

Gate and ungate any DOM element using the JavaScript API.

Use the JavaScript API for full control over what content is gated, when, and how.

`FanIDWidget.gate()`

Gate any element by CSS selector or DOM reference:

// By selector
FanIDWidget.gate('#premium-section')

// By DOM reference
const el = document.querySelector('.exclusive-content')
FanIDWidget.gate(el)

With options

FanIDWidget.gate('#premium-stats', {
  placeholder: {
    title: 'Premium Stats',
    message: 'Get access to advanced player statistics',
    buttonText: 'Unlock with FanID',
  },
  style: 'gradient',
  teaserHeight: 100,
  minHeight: 300,
})

Capping height and pinning the CTA to the top

Pass maxHeight together with overlayAlign: 'top' to collapse a long section to a fixed height and keep the sign-in prompt visible at the top of the gated area:

FanIDWidget.gate('#long-article', {
  maxHeight: 360,
  overlayAlign: 'top',
})

Per-call options take precedence over data-fanid-* attributes on the element, which in turn override the global gatedContent.maxHeight / gatedContent.overlayAlign config.

`FanIDWidget.element()`

Alternative syntax using a config object:

FanIDWidget.element({
  el: '#premium-section',
  placeholder: {
    title: 'Members Only',
  },
  style: 'blur',
  blurAmount: 12,
})

// With a DOM reference
const el = document.getElementById('random-generated-uuid')
FanIDWidget.element({ el: el })

`FanIDWidget.ungate()`

Remove gating from an element:

FanIDWidget.ungate('#premium-section')

`FanIDWidget.isGated()`

Check whether an element is currently gated:

if (FanIDWidget.isGated('#premium-section')) {
  console.log('Content is gated')
}

Complete example

<div id="premium-stats">
  <table>
    <tr><th>Player</th><th>Points</th><th>Assists</th></tr>
    <tr><td>Smith</td><td>28.5</td><td>7.2</td></tr>
    <tr><td>Johnson</td><td>24.1</td><td>10.3</td></tr>
  </table>
</div>

<script>
  FanIDWidget.init({ baseUrl: 'https://your-org.fanid.co' })

  FanIDWidget.on('ready', () => {
    FanIDWidget.gate('#premium-stats', {
      placeholder: {
        title: 'Premium Stats',
        message: 'Sign in to view full player statistics',
        buttonText: 'View Stats',
      },
      style: 'blur',
    })
  })
</script>

Data Attributes

Gate content using data attributes on standard HTML elements.

Full-Page Gating

Gate the entire page with a full-screen overlay.