fansunited-widget-client-configuration

v1.8.0

Published

4 days ago

Downloads

162

0High
0Medium
0Low

viktorfansunited

dobromirpenchev

borislavfansunited

Configuration Management Widget

Welcome to Fans United Configuration Management Widget. The widget allows staff members with sufficient permissions to update their different configurations. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to manage your configuration. With successful installation, you can manage your language, cache TTL and football assets configurations.

Installation and usage

The easiest way to use fansunited-widget-client-configuration is to install it from npm as follows:

npm  install  fansunited-widget-client-configuration

or:

yarn  add  fansunited-widget-client-configuration

Here is an example how you can integrate Fans United Classic Quiz Management Widget:

import { ConfigurationManager } from  'fansunited-widget-client-configuration';

const  App = () => {
return (
<ConfigurationManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'} />
);
}

Notes

The widget is bundled as a React component and its usage is as simple as the above example
Don't worry about your project's CSS. The widget's styling is done with Joy UI which is based on headless unstyle react components. This means that the widget's CSS will NOT affect yours.
Easy translation in every language. For more information check our Translation heading.

Props

type ConfigurationManagerProps = {
	fansUnitedApiKey: string;
	fansUnitedClientId: string;
	fansUnitedLanguage?: string;
	fansUnitedEnvironment?: string;
	labels?: LabelsModel;
	hideSignOutButton?: boolean;
	sportal365Project?: string;
	sportal365Infrastructure?: 'shared' | 'betway';
};

Fans United Classic Quiz Management Widget depends on Fans United JS SDK and Fans United Client API. Thats why fansUnitedApiKey and fansUnitedClientId are required. They will be provided to you from Fans United team. For other optional props here is some information:

fansUnitedLanguage - for our sports APIs FansUnited platform supports different languages. For now they are Bulgarian (bg), English (en), Romanian (ro), Greek (el), Slovak (sk), Serbian (sr) and Hungarian (hu). If no value given it will be set to English (en).
fansUnitedEnvironment - You can run the widget in the following environments: staging, production, watg and yolo. If no value given it will be set to production (prod).
labels - you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Match Quiz Management Widget is available in English so if no value is given, the widget will be translated in English.
hideSignOutButton - By default on the top right corner of the widget will be displayed a sign out button. To hide that button set this prop to true.
sportal365Project - The Sportal365 project. Used as a request header when communicating with Sportal365 APIs.
sportal365Infrastructure - The Sportal365 infrastructure. Used to determine what authorization should be used when communicating with Sportal365 APIs. If no value given (when sportal365Project props is provided) it will be set to shared .

Translation

You can easily translate Fans United Configuration Management Widget in your language! You just need to pass an object to labels prop with concrete keys and values and that's it! Here's an example how you can do it:

import { ConfigurationManager } from  'fansunited-widget-client-configuration';

const labels = {
	clientConfigErrorMessage: "There was a problem fetching client's configuration. Please try again",
	userNotFound: 'User not found. Please try again',
	signOut: 'Sign Out',
	language: 'Language',
	profilePreferences: 'Profile Preferences',
	cacheTTL: 'Cache TTL',
	footballAssets: 'Football Assets',
	soon: 'Soon',
	update: 'Update Configuration',
	configTitle: 'Configure Fans United',
	configDescription: 'Customize different features of Fans United',
	configLanguageTitle: 'Language Configuration',
	defaultLanguage: 'Default language',
	defaultLanguageHelperText: 'What is the default language of your content? This field, if different from English, would be used in our translation tools.',
	availableLanguages: 'Available languages',
	availableLanguagesHelperText: 'In case your project is multi-lingual, select the available languages for your app.',
	translationRules: 'Translation rules',
	translationRulesHelperText: 'Select the default status when a game is automatically translated.',
	gameStatus: 'Game status',
	active: 'Active',
	inactive: 'Inactive',
	updateConfigMessage: 'You have successfully updated Language configuration',
	updateConfigErrorMessage: 'There was a problem updating configuration. Please try again',
	categories: 'Categories',
	delete: 'Delete',
	id: 'ID',
	name: 'Name',
	addCategory: 'Add Category',
	preferences: 'Preferences',
	addPreference: 'Add Preference',
	selectCategories: 'Select categories for new preference',
	uniqueCategoriesIdErrorMessage: `Categories' IDs must be unique!`,
	uniquePreferencesIdErrorMessage: `Preferences' IDs must be unique!`,
	uploadImage: 'Upload Image',
	sportal365Images: 'Sportal365 Images',
	search: 'Search',
	clearImage: 'Clear image',
	copyUrl: 'Copy URL',
	viewImage: 'View image',
	cropImage: 'Crop image',
	aspectRatio: 'Aspect ratio',
	crop: 'Crop',
	reset: 'Reset',
	urlCopiedToClipboardMessage: 'URL copied to clipboard',
	imageDeletedMessage: 'Image deleted',
	imageResetMessage: 'The initial size of the image has been restored',
	fromDate: 'From Date',
	toDate: 'To Date',
	uploadingImageMessage: 'You have successfully uploaded image',
	uploadingImageErrorMessage: 'There was a problem with uploading image to bucket. Please try again',
	generateSignedInUrlErrorMessage: 'There was a problem generating signed in URL to store the image in bucket. Please try again',
	encryptingImageErrorMessage: 'There was a problem with encrypting image before uploading it to bucket. Please try again',
	searchImage: 'Search image',
	hideFilters: 'Hide filters',
	showFilters: 'Show filters',
	searchSportal365ImagesErrorMessage: 'There was a problem with searching images from Sportal 365 API. Please try again',
	previous: 'Previous',
	next: 'Next',
	add: 'Add',
	branding: 'Branding',
	noBrandingsFound: 'No brandings found',
	createFirstBrandingTemplate: 'Create your first branding template to get started',
	createBranding: 'Create Branding',
	colors: 'Colors',
	noColorsDefined: 'No colors defined',
	image: 'image',
	images: 'images',
	noImages: 'No images',
	url: 'URL',
	urls: 'URLs',
	noUrls: 'No URLs',
	newBranding: 'New Branding',
	deleteBranding: 'Delete',
	deleteBrandingConfirmation: 'branding? This action cannot be undone.',
	close: 'Close',
	brandingCreatedMessage: 'Branding created successfully',
	brandingUpdatedMessage: 'Branding updated successfully',
	brandingDeletedMessage: 'Branding deleted successfully',
	createBrandingErrorMessage: 'There was a problem creating branding. Please try again',
	updateBrandingErrorMessage: 'There was a problem updating branding. Please try again',
	deleteBrandingErrorMessage: 'There was a problem deleting branding. Please try again',
	fetchBrandingsErrorMessage: 'There was a problem fetching brandings. Please try again',
	mainLogo: 'Main Logo',
    mobileLogo: 'Mobile logo',
    backgroundImage: 'Background image',
    mobileBackgroundImage: 'Mobile background image',
    additionalImage: 'Additional image',
	primaryColor: 'Primary color',
    secondaryColor: 'Secondary color',
    contentColor: 'Content color',
    backgroundColor: 'Background color',
    borderColor: 'Border color',
    additionalColor: 'Additional color',
	primaryUrl: 'Primary URL',
    secondaryUrl: 'Secondary URL',
    privacyPolicyUrl: 'Privacy policy URL',
    termsAndConditionsUrl: 'Terms and conditions URL',
    additionalUrl: 'Additional URL',
};

const  App = () => {
return (
<ConfigurationManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'}
	labels={labels}/>
);
}

Here is all information about LabelsModel:

Changelog

1.8.0 - 2026-03-04

Added:
- New options available for template layout in general misc setting in User-Centric Widgets
- New select dropdown control for chance game variant in general misc settings in User-Centric Widgets

1.6.0 - 2026-01-09

Added:
- Branding management with card based list view and modal based form
- Ability to copy the configuration ID of User-Centric Widgets to clipboard

1.5.0 - 2025-12-23

Added:
- New card container in miscellaneous configuration general settings for rules display
- Integration with Sportal365 Images API for image search and selection
Improved:
- Default image configuration now supports multiple input methods (URL input or image upload)
- Clients can choose between legacy URL input behavior or new image upload functionality

1.4.0 - 2025-11-29

Added:
- User-Centric Widgets configuration management tab with full CRUD operations
- Multi-tab configuration form with 6 sections: General, Firebase, Theme Options, Leads, Miscellaneous, and Legacy
- Raw JSON mode toggle for advanced configuration editing
- Integrated color pickers for theme customization
- Support for light and dark mode color schemes
- Customizable spacing scales, typography, border sizes, and border radius values
- Lead form configuration with field management and country code selection
- Firebase integration settings configuration

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme