Frameworks

Angular

Integrate FanID gated content into Angular applications.

Installation

npm install @wmt-fanid/widget

Setup

Enable custom elements in your module:

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule {}

Initialize the widget in your root component:

app.component.ts

import { Component, OnInit } from '@angular/core'
import FanIDWidget from '@wmt-fanid/widget'
import '@wmt-fanid/widget/dist/widget.css'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit() {
    FanIDWidget.init({ baseUrl: 'https://your-org.fanid.co' })
  }
}

Using in templates

component.html

<article>
  <h1>{{ article.title }}</h1>

  <wmt-fanid-protected
    placeholder-title="Members Only"
    placeholder-message="Sign in to continue"
    style-mode="blur"
  >
    <div [innerHTML]="article.body"></div>
  </wmt-fanid-protected>
</article>

Programmatic gating

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core'

@Component({
  selector: 'app-premium-stats',
  template: '<div #stats><table>...</table></div>',
})
export class PremiumStatsComponent implements AfterViewInit, OnDestroy {
  @ViewChild('stats') statsRef!: ElementRef

  ngAfterViewInit() {
    window.FanIDWidget.gate(this.statsRef.nativeElement, {
      placeholder: { title: 'Premium Stats' },
    })
  }

  ngOnDestroy() {
    window.FanIDWidget.ungate(this.statsRef.nativeElement)
  }
}

Add the global type declaration:

typings.d.ts

import type { FanIDWidget } from '@wmt-fanid/widget'

declare global {
  interface Window {
    FanIDWidget: FanIDWidget
  }
}

Vue / Nuxt

Integrate FanID gated content into Vue and Nuxt applications.

WordPress

Integrate FanID gated content into WordPress websites.