Frameworks
WordPress
Integrate FanID gated content into WordPress websites.
Script tag method
Add to your theme's functions.php:
functions.php
function fanid_enqueue_scripts() {
wp_enqueue_style(
'fanid-widget',
'https://unpkg.com/@wmt-fanid/widget/dist/widget.css'
);
wp_enqueue_script(
'fanid-widget',
'https://unpkg.com/@wmt-fanid/widget/dist/fan-id-widget.iife.js',
array(),
'2.0.0',
true
);
wp_add_inline_script('fanid-widget', 'FanIDWidget.init({ baseUrl: "https://your-org.fanid.co" });');
wp_add_inline_style('fanid-widget', 'wmt-fanid-protected:not(:defined){visibility:hidden}');
}
add_action('wp_enqueue_scripts', 'fanid_enqueue_scripts');
Using in post content
WordPress allows custom HTML in the block editor. Switch to the Code editor view and wrap content:
<wmt-fanid-protected>
<p>This exclusive content is only for FanID members.</p>
</wmt-fanid-protected>
Or use the data-attribute approach if your editor strips unknown tags:
<div data-fanid-gated data-fanid-title="Members Only">
<p>Premium content here.</p>
</div>
Shortcode (custom plugin)
Create a simple shortcode for non-technical editors:
// In a custom plugin or functions.php
function fanid_protected_shortcode($atts, $content = null) {
$atts = shortcode_atts(array(
'title' => '',
'message' => '',
'button' => '',
'style' => '',
), $atts);
$attrs = '';
if ($atts['title']) $attrs .= ' placeholder-title="' . esc_attr($atts['title']) . '"';
if ($atts['message']) $attrs .= ' placeholder-message="' . esc_attr($atts['message']) . '"';
if ($atts['button']) $attrs .= ' placeholder-button-text="' . esc_attr($atts['button']) . '"';
if ($atts['style']) $attrs .= ' style-mode="' . esc_attr($atts['style']) . '"';
return '<wmt-fanid-protected' . $attrs . '>' . do_shortcode($content) . '</wmt-fanid-protected>';
}
add_shortcode('fanid_protected', 'fanid_protected_shortcode');
Usage in the WordPress editor:
[fanid_protected title="Exclusive Content" message="Sign in to read more"]
Premium article content here...
[/fanid_protected]