WebSDK

Styling & Theming

Customize the look and feel of the FanID Widget and gated content overlays.

The widget automatically inherits your organization's branding from FanID. Every visual property is configurable via CSS custom properties.

Automatic branding

When the widget initializes, it fetches your organization's branding settings from FanID and applies them everywhere the widget renders. No configuration is needed.

FanID brand setting	Widget surface
Title	Floating widget heading (falls back to `<orgName> ID`, then `Fan ID`)
Sub Title	Floating widget subtext (falls back to `Sign in to access exclusive content`)
Logo	Floating widget brand row and gated content overlays
Primary color	Sign-in button background (`--fanid-primary-color`, `--fanid-gate-button-bg`)
Accent color	Text and secondary elements (`--fanid-secondary-color`, `--fanid-gate-title-color`, `--fanid-gate-message-color`)

Brand fields are edited in the FanID admin dashboard under Brand Settings. Changes propagate to all embeds the next time the widget initializes.

You can still override any value via CSS variables in your own stylesheet — the table below documents every property.

Floating widget styles

The floating sign-in/profile panel uses global BEM-style CSS classes. Override any of them in your own stylesheet.

Widget CSS variables

Override the floating widget's color scheme globally:

Variable	Default	Used for
`--fanid-primary-color`	`#f26522`	Sign-in button, user avatar, spinner accent
`--fanid-primary-color-hover`	`#002b5c`	Button hover state
`--fanid-secondary-color`	`#002b5c`	Text, close button, user name, email

:root {
  --fanid-primary-color: #e94560;
  --fanid-primary-color-hover: #c23152;
  --fanid-secondary-color: #1a1a2e;
}

Available CSS classes

Class	Element
`.fanid-widget`	Outer container (position, size, shadow, border-radius)
`.fanid-widget__container`	Inner wrapper
`.fanid-widget__close`	Close button (top-right corner)
`.fanid-widget__content`	Login state content area
`.fanid-widget__brand`	Brand row (logo + text)
`.fanid-widget__brand-label`	Organization name text
`.fanid-widget__text`	Subtitle / description text
`.fanid-widget__button`	Sign-in button
`.fanid-widget__content--logged-in`	Logged-in state content area
`.fanid-widget__user-avatar`	User initial avatar
`.fanid-widget__user-name`	Display name
`.fanid-widget__user-email`	Email address
`.fanid-widget__actions`	Action buttons container
`.fanid-widget__redirect-button`	"My profile" button
`.fanid-widget__logout-button`	Sign-out icon button
`.fanid-widget__loading`	Loading state
`.fanid-widget__spinner`	Loading spinner

Examples

/* Move to bottom-right */
.fanid-widget {
  top: auto;
  bottom: 16px;
  right: 16px;
}

/* Custom button */
.fanid-widget__button {
  border-radius: 4px;
  text-transform: uppercase;
}

/* Round avatar */
.fanid-widget__user-avatar {
  border-radius: 50%;
  background: #333;
}

Dark theme for floating widget

:root {
  --fanid-primary-color: #f26522;
  --fanid-primary-color-hover: #d4551a;
  --fanid-secondary-color: #e6edf3;
}

.fanid-widget {
  background: #161b22;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.fanid-widget__close {
  background: #21262d;
  color: #e6edf3;
}

.fanid-widget__redirect-button {
  color: #e6edf3;
  border-color: rgba(255, 255, 255, 0.12);
}

Gated content overlays use CSS custom properties for every visual property. The internal class names are randomized at init time for ad-blocker resistance, but you never need to target them — just set the variables on the gate element, a parent, or :root.

Quick example

/* Dark theme for all gated content */
wmt-fanid-protected {
  --fanid-gate-panel-bg: #1a1a2e;
  --fanid-gate-panel-radius: 8px;
  --fanid-gate-title-color: white;
  --fanid-gate-message-color: rgba(255, 255, 255, 0.7);
  --fanid-gate-button-bg: #e94560;
  --fanid-gate-button-radius: 4px;
  --fanid-gate-overlay-bg: rgba(0, 0, 0, 0.6);
}

Complete CSS custom properties reference

Root container

Variable	Default	Description
`--fanid-gate-root-position`	`relative`	Root container position
`--fanid-gate-root-overflow`	`hidden`	Root container overflow
`--fanid-gate-min-height`	`280px`	Minimum height of the gated area

The gated host element also receives an inline max-height style when the maxHeight config (or data-fanid-max-height / max-height attribute) is set — see Configuration › gatedContent.maxHeight.

Overlay

Variable	Default	Description
`--fanid-gate-overlay-position`	`absolute`	Overlay position
`--fanid-gate-overlay-inset`	`0`	Overlay inset
`--fanid-gate-overlay-display`	`flex`	Overlay display
`--fanid-gate-overlay-align`	`flex-start`	Overlay vertical alignment (see `overlayAlign` config)
`--fanid-gate-overlay-justify`	`center`	Overlay horizontal alignment
`--fanid-gate-overlay-padding-top`	`24px`	Distance from top of host to the prompt panel
`--fanid-gate-overlay-padding-bottom`	`24px`	Distance from bottom of host to the prompt panel
`--fanid-gate-overlay-z-index`	`1`	Overlay z-index
`--fanid-gate-overlay-bg`	`rgba(255,255,255,0.1)`	Overlay background (blur mode) / `#f8f9fa` (cover mode)
`--fanid-gate-overlay-backdrop`	`blur(2px)`	Overlay backdrop filter (blur mode)

Gradient layer

Variable	Default	Description
`--fanid-gate-gradient-position`	`absolute`	Gradient layer position
`--fanid-gate-gradient-inset`	`0`	Gradient layer inset
`--fanid-gate-gradient-pointer-events`	`none`	Gradient layer pointer events
`--fanid-gate-gradient-bg`	(mode-dependent)	Gradient background

Gradient mode specific

Variable	Default	Description
`--fanid-gate-overlay-align-gradient`	`flex-end`	Overlay alignment in gradient mode
`--fanid-gate-overlay-padding-bottom`	`24px`	Overlay bottom padding in gradient mode

Placeholder panel

Variable	Default	Description
`--fanid-gate-panel-position`	`relative`	Panel position
`--fanid-gate-panel-z-index`	`2`	Panel z-index
`--fanid-gate-panel-bg`	`white`	Panel background
`--fanid-gate-panel-radius`	`12px`	Panel border radius
`--fanid-gate-panel-padding`	`32px 28px`	Panel padding
`--fanid-gate-panel-text-align`	`center`	Panel text alignment
`--fanid-gate-panel-max-width`	`380px`	Panel maximum width
`--fanid-gate-panel-width`	`90%`	Panel width
`--fanid-gate-panel-shadow`	`0 8px 32px rgba(0,0,0,0.12)`	Panel box shadow
`--fanid-gate-font`	system font stack	Panel font family

Logo

Variable	Default	Description
`--fanid-gate-logo-height`	`40px`	Logo max height
`--fanid-gate-logo-max-width`	`160px`	Logo max width
`--fanid-gate-logo-fit`	`contain`	Logo object-fit
`--fanid-gate-logo-margin`	`16px`	Logo bottom margin

Title

Variable	Default	Description
`--fanid-gate-title-size`	`18px`	Title font size
`--fanid-gate-title-weight`	`700`	Title font weight
`--fanid-gate-title-color`	`#002b5c`	Title text color
`--fanid-gate-title-margin`	`0 0 8px`	Title margin
`--fanid-gate-title-line-height`	`1.3`	Title line height

Message

Variable	Default	Description
`--fanid-gate-message-size`	`14px`	Message font size
`--fanid-gate-message-color`	`#002b5c`	Message text color
`--fanid-gate-message-opacity`	`0.7`	Message opacity
`--fanid-gate-message-margin`	`0 0 20px`	Message margin
`--fanid-gate-message-line-height`	`1.5`	Message line height

Button

Variable	Default	Description
`--fanid-gate-button-display`	`inline-flex`	Button display
`--fanid-gate-button-align`	`center`	Button vertical alignment
`--fanid-gate-button-justify`	`center`	Button horizontal alignment
`--fanid-gate-button-width`	`100%`	Button width
`--fanid-gate-button-height`	`44px`	Button height
`--fanid-gate-button-padding`	`0 20px`	Button padding
`--fanid-gate-button-bg`	org primary / `#f26522`	Button background
`--fanid-gate-button-color`	`white`	Button text color
`--fanid-gate-button-border`	`none`	Button border
`--fanid-gate-button-radius`	`30px`	Button border radius
`--fanid-gate-button-size`	`15px`	Button font size
`--fanid-gate-button-weight`	`600`	Button font weight
`--fanid-gate-button-cursor`	`pointer`	Button cursor
`--fanid-gate-button-transition`	`filter 0.2s ease`	Button transition
`--fanid-gate-button-font`	`inherit`	Button font family
`--fanid-gate-button-hover-filter`	`brightness(0.9)`	Button hover filter
`--fanid-gate-button-active-transform`	`scale(0.98)`	Button active transform

Overlay host (programmatic gate)

Variable	Default	Description
`--fanid-gate-host-position`	`absolute`	Overlay host position
`--fanid-gate-host-inset`	`0`	Overlay host inset
`--fanid-gate-host-z-index`	`1`	Overlay host z-index

Full-page gate

Variable	Default	Description
`--fanid-gate-fullpage-position`	`fixed`	Full-page overlay position
`--fanid-gate-fullpage-inset`	`0`	Full-page overlay inset
`--fanid-gate-fullpage-z-index`	`999998`	Full-page overlay z-index
`--fanid-gate-fullpage-display`	`flex`	Full-page overlay display
`--fanid-gate-fullpage-align`	`center`	Full-page overlay vertical alignment
`--fanid-gate-fullpage-justify`	`center`	Full-page overlay horizontal alignment
`--fanid-gate-fullpage-bg`	`rgba(255,255,255,0.85)`	Full-page overlay background
`--fanid-gate-fullpage-backdrop`	`blur(4px)`	Full-page overlay backdrop filter
`--fanid-gate-fullpage-panel-pointer-events`	`auto`	Full-page panel pointer events

Close button (full-page)

Variable	Default	Description
`--fanid-gate-close-position`	`absolute`	Close button position
`--fanid-gate-close-top`	`12px`	Close button top offset
`--fanid-gate-close-right`	`16px`	Close button right offset
`--fanid-gate-close-bg`	`none`	Close button background
`--fanid-gate-close-border`	`none`	Close button border
`--fanid-gate-close-size`	`28px`	Close button font size
`--fanid-gate-close-cursor`	`pointer`	Close button cursor
`--fanid-gate-close-color`	`#002b5c`	Close button color
`--fanid-gate-close-opacity`	`0.5`	Close button opacity
`--fanid-gate-close-transition`	`opacity 0.2s`	Close button transition
`--fanid-gate-close-line-height`	`1`	Close button line height
`--fanid-gate-close-hover-opacity`	`1`	Close button hover opacity

Content (gated state)

Variable	Default	Description
`--fanid-gate-content-filter`	`blur(8px)`	Content blur filter (blur mode)
`--fanid-gate-content-user-select`	`none`	Content user-select when gated
`--fanid-gate-content-pointer-events`	`none`	Content pointer-events when gated
`--fanid-gate-content-cover-opacity`	`0`	Content opacity (cover mode)
`--fanid-gate-content-cover-height`	`0`	Content height (cover mode)
`--fanid-gate-content-cover-overflow`	`hidden`	Content overflow (cover mode)

Reveal animation

Variable	Default	Description
`--fanid-gate-reveal-animation`	`fade 0.3s` / `slide 0.4s`	Reveal animation

Theming examples

Dark theme

wmt-fanid-protected,
[data-fanid-gated] {
  --fanid-gate-panel-bg: #161b22;
  --fanid-gate-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --fanid-gate-title-color: #e6edf3;
  --fanid-gate-message-color: #8b949e;
  --fanid-gate-message-opacity: 1;
  --fanid-gate-button-bg: #f26522;
  --fanid-gate-overlay-bg: rgba(0, 0, 0, 0.6);
}

Minimal / flat

wmt-fanid-protected {
  --fanid-gate-panel-shadow: none;
  --fanid-gate-panel-radius: 0;
  --fanid-gate-panel-padding: 24px;
  --fanid-gate-button-radius: 4px;
  --fanid-gate-button-height: 36px;
  --fanid-gate-button-size: 13px;
}

Centered large panel

wmt-fanid-protected {
  --fanid-gate-panel-max-width: 500px;
  --fanid-gate-panel-padding: 48px 40px;
  --fanid-gate-title-size: 24px;
  --fanid-gate-message-size: 16px;
  --fanid-gate-button-height: 52px;
  --fanid-gate-button-size: 17px;
}

Per-element override

<wmt-fanid-protected style="--fanid-gate-panel-bg: #fff3e0; --fanid-gate-button-bg: #ff9800;">
  <p>This specific block has a warm theme.</p>
</wmt-fanid-protected>

Hiding the floating widget

Disable the floating panel at init and show it programmatically when needed:

FanIDWidget.init({
  baseUrl: 'https://your-org.fanid.co',
  floatingWidget: false,
})

// Show it later (e.g., on a button click)
FanIDWidget.showFloatingWidget()

// Hide it at any time
FanIDWidget.hideFloatingWidget()

Auth state, gated content, and the JavaScript API all continue to work without the floating panel.

JavaScript API

Complete reference for all FanID Widget methods, events, and types.

Plain HTML

Integrate FanID gated content into static HTML websites.