Widget Configurations: How to Set Up and Apply User-Centric Widget Configs

📖 How do I create a new widget configuration?

Creating a widget configuration is straightforward from the Management Portal:

1. Navigate to Configuration → User-Centric Widgets
2. Click the Add button
3. Enter a Title (mandatory) - choose a descriptive name that helps you identify this configuration later
4. Add a Description (optional) - highly recommended if you plan to create multiple configurations, as it helps distinguish between them

Once you've set the title and description, you'll configure six tabs. Once you've configured all necessary settings you need across the tabs, click Create to save your new widget configuration.

🗒️ Tab 1: SDK Configuration

• API Key: Select from your existing API keys (the same keys visible in your profile dropdown (right upper corner in the management portal) → API Keys). For widget implementations directly on websites, we recommend you use your Web API Key.
• ID Schema: Controls which data provider's ID format the widget expects. Options include: Native (Fans United's IDs), Enetpulse, Sportal365. We recommend keeping this set to "Native" unless you need to pass IDs from a specific data provider. For example, if you want to show specific players in the Player of the Match widget using player IDs from Sportal365, set the ID schema to "sportal365" so the widget knows how to interpret those IDs.
• Language: Choose the widget language
• Token Cookie Name: Used when widgets integrate with sites that have current authentication flow

🗒️ Tab 2: Firebase

• Configure Firebase credentials (Auth Domain, Project ID, App ID)
• Contact us if you need these credentials - we can provide them
• The great advantage: set these once, then reuse this configuration for all your games

🗒️ Tab 3: Leads

• Configure lead generation form fields and behavior
• Select which fields to show. You have full control over what information you collect from users—whether it's just name and email, phone numbers, country, gender, or any combination you need
• Position: Determine when to show the lead form - before or after users play the game
• Phone Country Code: Set default phone country code for the lead form
• Sync with Profile: Link lead form data with profile data. Particularly useful when widgets are exposed to non-authenticated users and you have leaderboards where you want to display their names.
• Campaign Tracking: Assign custom campaign names or IDs to organize collected leads. This helps you filter and export leads based on different campaigns or promotions later.

🗒️ Tab 4: Theme Options

• Light/Dark Mode: Set the default theme mode for your widgets
• Configure visual appearance with expandable sections:
  • Spacing: Control padding and margins
  • Colors: Customize color schemes
  • Font Family: Set typography
  • Radius: Adjust radius for elements (controls the roundness of corners for buttons, cards, inputs, and other UI elements)
  • Border: Configure border styles and widths
  • Image Background Gradient: Customize gradient overlays on images
  • Breakpoints: Define responsive breakpoints for different screen sizes
• All fields show default values as placeholders - only values you explicitly set will be saved

🎨 Deep Dive into Theme Options Customization: Want to explore every theme setting in detail? Check out our comprehensive guides for Classic Quiz widgets: Advanced Element-by-Element Customization and Advanced Theme Options Customization - these walk through different setting types individually for complete control over your widget's appearance. While these guides focus on Classic Quiz widgets, many theme customization concepts work similarly across different widget types (Polls, Personality Quizzes, etc.).

🗒️ Tab 5: Misc

• Contains optional settings organized in three sections:
  • General Settings
  • Display Settings
  • Widget-Specific Settings
• All settings are optional and serve as default values
• Each widget can override these settings individually through the embed code

🗒️ Tab 6: Legacy

• This tab contains theme configuration (that will be deprecated in the future) for older widgets (Either/Or, Match Prediction, Team Next Match Prediction)
• These older widgets will eventually be migrated to the new theme system
• Once migrated, they'll have access to all the configuration options available in the Theme Options tab

📖 How do I apply the widget configuration to my games?

Once you've created your widget configurations, applying them is effortless:

1. When you open a game in the Management Portal, navigate to the Widget embed code section
2. In the Approach dropdown, ensure "Auto-Update with Loader" is selected - this is the default option and the correct choice for using the new configuration ID system
3. In the Configuration ID dropdown, you'll see all your saved configurations listed
4. Select the configuration you want to use for this game
5. The system automatically generates the embed code that includes:
   • Our widget loader script
   • Your selected configuration ID
   • The specific game/content details
   • Everything needed to auto-fetch settings and render the widget

What happens when the widget loads: The loader script contacts our API using the configuration ID, fetches all your settings (theme, leads, authentication, etc.), and applies them to render the widget. Your configuration doesn't need to be manually coded into the embed—it's all fetched automatically.

This approach means you don't need to manually copy settings for every individual game. Just select your pre-defined config from the dropdown, and the auto-generated embed code handles everything else.

📖 What happens after I copy the widget embed code?

1. Copy the generated embed code from the Management Portal (it includes the loader script and your config ID)
2. Navigate to your CMS (Content Management System) or wherever you create articles/content on your platform
3. Paste the embed code into your content - most CMS platforms have a way to embed HTML/JavaScript code
4. Publish your content - the widget loader will automatically fetch your configuration from our API and render the fully-styled widget

📖  Why can't we provide exact CMS instructions?

Each client uses different content management systems (WordPress, Sportal365 CMS, etc.), so the exact steps for embedding code vary. However, the good news is that in most cases, it's literally just copying the generated code from our portal and pasting it into your CMS's HTML/code editor.

This is typically the step where our clients ask us during demos: "Okay, we understand what to do on your side - but what then?" The answer: just copy-paste the code into your own CMS, and the widget auto-loads everything from our servers!

📖  Q: What if I need different settings for just one specific game?

This is where config overrides become incredibly useful. Imagine you have two configuration types that normally work perfectly for you, but for one specific game you want a different layout template, different image position, or any other customized setting. Instead of creating an entirely new configuration for just one game, you can override specific settings directly in the embed code while keeping all other settings from your selected config ID intact.

How Config Overrides Work:

The widget loader supports a configOverrides parameter that lets you customize specific settings for individual widgets. When the loader fetches your configuration, it applies your overrides on top of the fetched settings.

Example: Changing Image Position for One Game

Let's say you want to change the image position to "right" for just one specific game:

<script src="https://cdn.jsdelivr.net/npm/fansunited-widgets-cdn@latest/fu-widgets-loader.js"></script>
<script>
	FuWidgetLoader.load({
		onReady: function (FuWidget, manifest) {
			FuWidget.loadWidget({
				clientId: "client_id_here",
				apiKey: "example-key-here",
				configId: "config-id-here",
				contents: [
					{
						id: "1PD49J2PwZHWZf1vAQoagO",
						type: "classic-quiz",
						container: "",
					},
				],
                configOverrides: {
                  imagePosition: "right"
                }
			});
		},
		onError: function (error) {
			// Handle error
		},
	});
</script>

In this example, the widget loader will:

1. Fetch all settings from your configuration ID
2. Apply your override (image position = "right") on top of those fetched settings
3. Render the widget with the combined configuration

📖 Want to dive deeper into config overrides? Our technical documentation provides a complete list of all available override parameters, examples, and implementation details.

📖 When to Use Config Overrides?

Config overrides are ideal for testing different visual arrangements and making one-off customizations for any embedded widget—especially when it's a single setting change you're unlikely to need again anytime soon. No need to create an entirely new configuration for temporary or unique tweaks.

📖 For a complete list of available override options, explore our comprehensive widget documentation.

📖 When to Create a New Configuration instead?

Create a new configuration when you need the same customization across multiple games or when building a brand or style variant you'll reuse repeatedly.

• Technical Documentation: User-centric widgets
• Do you still have any questions? Check out our vast Widget related articles: Classic Quiz Widget, Personality Quiz Widget & Polls Widget

See and Learn: Your Visual Configuration Tutorial

Navigate to Configuration → User-Centric Widgets and click the Add button to create a new widget configuration. Your existing configurations are listed below with their titles and descriptions.

Enter a Title for your configuration. Configure the API Key, ID Schema, and Language settings in the SDK Configuration tab. The remaining tabs (Firebase, Leads, Theme Options, Misc, Legacy) are equally straightforward to configure—simply fill in the settings you need. Click Create when finished.

Open your game's editing page, scroll down the right sidebar, and expand the Widget embed code section to access widget configuration options.

Select Auto-Update with Loader as the approach, choose your desired Configuration ID from the dropdown, then copy the auto-generated embed code to paste into your CMS.