Guides

User-centric widgets

Suggest Edits

Quick Start

Installation

Add the widget script to your HTML page:

<script src="https://cdn.jsdelivr.net/npm/fansunited-widgets-cdn@<version>/fu-widgets.iife.js"></script>

Important: Replace <version> with the latest version number. You can check the latest version on the npm registry page for fansunited-widgets-cdn. The current example uses version 0.0.14, but newer versions may be available.

Basic Configuration

Initialize the widget with required configuration:

FuWidget.init({
	fansUnited: {
		apiKey: "1111-333-your-fu-api-key",
		clientId: "your-client-id",
		environment: "prod", // "dev", "prod", "staging", "watg", "yolo"
		idSchema: "native",
		lang: "en", // Language code
	},
	firebase: {
		apiKey: "your-firebase-api-key",
		authDomain: "your-app.firebaseapp.com",
		projectId: "your-project-id",
		appId: "your-app-id",
	},
	language: "en", // Widget UI language
});

Language Support

The widget supports multiple languages for both the UI and content:

  • language: Controls the widget UI language
  • fansUnited.lang: Controls the content language from Fans United API

Available languages for UI (language):

  • "bg" - Bulgarian
  • "en" - English
  • "ro" - Romanian
  • "pt" - Portuguese
  • "sr" - Serbian
  • "fr" - French
  • "de" - German
  • "it" - Italian
  • "fr-be" - Belgian French
  • "pl" - Polish
  • "pt-br" - Brazilian Portuguese

Available languages for content (fansUnited.lang):

  • "bg" - Bulgarian
  • "en" - English
  • "ro" - Romanian
  • "el" - Greek
  • "sk" - Slovak
  • "pt" - Portuguese
  • "sr" - Serbian
  • "hu" - Hungarian
  • "sv" - Swedish
  • "es" - Spanish
  • "fr" - French
  • "nl" - Dutch
  • "de" - German
  • "it" - Italian

Lead Collection Configuration

Lead collection in the widget follows a hierarchy of configurations, allowing for both global and content-specific settings.

Configuration Hierarchy

  1. Management Portal Configuration

    • Set in Management Portal under Configuration -> Auth Requirement
    • Enables/disables lead collection for specific content
    • Options: "FREE", "LEAD", "REGISTERED"

  2. Global Widget Configuration

    • Set during widget initialization
    • Applies to all content unless overridden

  3. HTML Attribute Configuration

    • Set per widget instance
    • Overrides global configuration

Example Configuration

  1. Enable leads in Management Portal:

    Configuration -> Auth Requirement -> LEAD

  2. Global configuration in widget initialization:

FuWidget.init({
	// ... other config
	leads: {
		defaultFields: ["fullName", "email"], // Default fields for all widgets
		position: "after", // Default position
		campaignId: "default-campaign", // Default campaign ID
		campaignName: "Default Campaign", // Default campaign name
	},
});
  1. Individual widget configuration:
<div
    data-component="fu-widget"
    data-content-type="classic-quiz"
    data-content-id="quiz-123"
    data-lead-fields="firstName,lastName,email"  // Overrides defaultFields
    data-lead-position="before"                  // Overrides position
    data-campaign-id="summer-campaign"           // Overrides campaignId
    data-campaign-name="Summer Campaign 2024"    // Overrides campaignName
></div>

Available Lead Fields

  • fullName - Full name input
  • firstName - First name input
  • lastName - Last name input
  • email - Email input
  • gender - Gender selection
  • country - Country selection
  • phoneCountryCode - Phone country code
  • phoneNumber - Phone number input

Lead Form Position

  • before - Lead form appears before content
  • after - Lead form appears after content

Important: Lead collection must be enabled in the Management Portal (Auth Requirement = "LEAD") for any lead collection configuration to take effect.

Widget Types

Classic Quiz Widget

A quiz widget that presents questions with multiple choice answers.

<div
	data-component="fu-widget"
	data-content-type="classic-quiz"
	data-content-id="your-quiz-id"
	data-lead-fields="fullName,email"
	data-lead-position="after"
	data-campaign-id="campaign-1"
	data-campaign-name="Summer Campaign"
></div>

Features

  • Multiple choice questions
  • Timer support
  • Score tracking
  • Results display
  • Prize support
  • Lead collection
  • Responsive design

Either/Or Widget

A game where users make quick decisions between two options.

<div
	data-component="fu-widget"
	data-content-type="either-or"
	data-content-id="your-game-id"
	data-lead-fields="fullName,email"
	data-lead-position="after"
	data-campaign-id="campaign-1"
	data-campaign-name="Summer Campaign"
></div>

Features

  • Quick decision gameplay
  • 3 lives system
  • Streak tracking
  • Leaderboard
  • Timer-based rounds
  • Personal best tracking
  • Prize support

Poll Widget

A widget for collecting user votes on various topics.

<div
	data-component="fu-widget"
	data-content-type="poll"
	data-content-id="your-poll-id"
	data-lead-fields="fullName,email"
	data-lead-position="after"
	data-campaign-id="campaign-1"
	data-campaign-name="Summer Campaign"
></div>

Features

  • Single or multiple choice voting
  • Real-time results
  • Percentage visualization
  • Total votes tracking
  • Lead collection integration
  • Prize support

List Widget

A widget that displays a collection of different content types.

<div
	data-component="fu-widget"
	data-content-type="list"
	data-content-id="your-list-id"
	data-classic-quiz-url="/quiz"
	data-either-or-url="/either-or"
	data-poll-url="/poll"
></div>

Additional Attributes

  • data-classic-quiz-url: URL pattern for quiz content
  • data-either-or-url: URL pattern for either/or games
  • data-poll-url: URL pattern for polls

Features

  • Mixed content display
  • Responsive grid layout
  • Content type filtering
  • Dynamic loading
  • Click-through navigation

Configuration Options

Theme Configuration

theme: {
    mode: "light", // "light" or "dark"
    primaryColor: {
        50: "#ebfff3",
        100: "#d1ffe4",
        200: "#a3ffc8",
        300: "#66f59d",
        400: "#2ce97a",
        500: "#0cd664",
        600: "#09b954",
        700: "#078f42",
        800: "#056b31",
        900: "#034d23",
    }
}

Content Labels

Custom labels can be set for each content piece from the management portal under the Labels configuration:

Prize Labels

  • prizeCardTitle - Title of the prize card
  • prizeCardDescription - Description in the prize card
  • prizeCta - Call to action for prize details

Lead Form Labels

  • leadTitle - Title of the lead form
  • leadDescription - Description text for lead collection
  • leadCta - Submit button text
  • leadSuccessTitle - Success message title
  • leadSuccessDescription - Success message description

Browser Support

  • Chrome (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Edge (latest 2 versions)
  • iOS Safari (latest 2 versions)
  • Android Chrome (latest 2 versions)

Updated 2 days ago