Leaderboard Management

Welcome to Fans United Leaderboard Management Widget. The widget allows staff members with sufficient permissions to create new template leaderboard. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to create template leaderboard. Leaderboards can be linked to competitions, teams, matches or markets. With successfull installiation, you can create and edit template leaderboard or see the report about specific template.

Installation and usage

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

npm install fansunited-widget-leaderboard

or:

yarn add fansunited-widget-leaderboard

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

import  'fansunited-widget-leaderboard/style.css';
import { LeaderboardManager } from  'fansunited-widget-leaderboard';

const  App = () => {
return (
<LeaderboardManager
	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 Tailwind CSS and all classes are prefixed to avoid collisions with your existing CSS. This means that the widget's CSS will NOT affect yours. One important thing is that you need to import style.css file from package folder:

import 'fansunited-widget-leaderboard/style.css';

N.B: If you are using an entry point for importing all your stylings, you need to import fansunited-widget-leaderboard/style.css there as well

Props

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

Fans United Leaderboard 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) and Romanian (ro). If no value given it will be set to English (en).

  • fansUnitedEnvironment - You can run the widget in the following environments: staging, production and watg. 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.

  • 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 Leaderboard 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  'fansunited-widget-leaderboard/style.css';
import { LeaderboardManager } from  'fansunited-widget-leaderboard';

const labels = {
	userNotFound:  'User not found. Please try again.',
	clientConfigErrorMessage:  "There was a problem fetching client's configuration. Please check again your API key and client ID. For more information contact Fans United staff.",
	featureDisabled: "Feature disabled!",
	noPermissionMessage: "You have no permission for this feature!",
	tryAgainButton: "Try again",
	noTemplatesFound:  "No templates were found. You can create a template by clicking the button 'Create template'",
	createTemplate:  'Create template',
	signOut:  'Create template',
	name:  'Name',
	type:  'Type',
	markets: "Markets",
	fromDate:  'From Date',
	toDate:  'To Date',
	actions:  'Actions',
	primaryTemplate:  'Primary',
	customTemplate:  'Custom',
	edit:  'Edit',
	report:  'Report',
	timeFormat:  'DD-MM-YYYY',
	back:  'Back',
	id:  'ID',
	namePlaceholder:  'Please provide a name for your template leaderboard.',
	description:  'Description',
	descriptionPlaceholder:  'Please describe your template leaderboard.',
	templateDuration: "Template leaderboard duration",
	templateDurationDescription: "Users can participate in this template during given period.",
	clear: "Clear",
	clearDurationTimeMessage: "You have cleared your duration template time.",
	marketSelection:  'Market Selection',
	marketSelectionDescription: "Check what market users can predict for the specified template.",
	marketFt1x2:  'Full time',
	marketHt1x2:  'Half time',
	marketBothTeamsScore:  'Both teams score',
	marketDoubleChance:  'Double chance',
	marketHtFt:  'Half time/Full time',
	marketRedCardMatch:  'Red card in match',
	marketPenaltyMatch:  'Pentalty in match',
	marketCornersMatch:  'Corners in match',
	marketCorrectScore:  'Correct score',
	marketCorrectScoreHalfTime:  'Half time correct score',
	marketCorrectScoreAdvanced:  'Advanced correct score',
	marketPlayerScore:  'Player score',
	marketPlayerYellowCard:  'Yellow card for player',
	marketPlayerRedCard:  'Red card for player',
	marketPlayerScoreFirstGoal:  'Player to score first goal',
	marketPlayerScoreTwice:  'Player to score twice',
	marketPlayerScoreHattrick:  'Player to score hattrick',
	marketOverZeroGoals:  'Over zero and a half goals',
	marketOverOneGoals:  'Over one and a half goals',
	marketOverTwoGoals:  'Over two and a half goals',
	marketOverThreeGoals:  'Over three and a half goals',
	marketOverFourGoals:  'Over four and a half goals',
	marketOverFiveGoals:  'Over five and a half goals',
	marketOverSixGoals:  'Over six and a half goals',
	marketOverSixCorners:  'Over six and a half corners',
	marketOverSevenCorners:  'Over seven and a half corners',
	marketOverEightCorners:  'Over eight and a half corners',
	marketOverNineCorners:  'Over nine and a half corners',
	marketOverTenCorners:  'Over ten and a half corners',
	marketOverElevenCorners:  'Over eleven and a half corners',
	marketOverTwelveCorners:  'Over twelve and a half corners',
	marketOverThirteenCorners:  'Over thirteen and a half corners',
	competitionsSelection: "Competitions Selection",
	competitionsSelectionDescription: "Type the name of the competition and select one. You can add as many as you want.",
	teamsSelection: "Teams Selection",
	teamsSelectionDescription: "Type the name of the team and select one. You can add as many as you want.",
	matchesSelection: "Matches Selection",
	matchesSelectionDescription: "Type the name of the team and select one. Then there will be loaded next matches for teams.",
	selectCompetitionsNoCompetitionFound: "No competitions were found. Please try again.",
	selectCompetitionsPlaceholder: "Type the name of your competition",
	selectTeamsNoTeamFound: "No teams were found. Please try again.",
	selectTeamsNoMatchesFound: "No matches were found for these teams",
	selectTeamsPlaceholder: "Type the name of your team",
	loadingMessage: "Loading...",
	loadMore: "Load more",
	exportButton: "Export",
	rules: "Rules",
	rulesDescription: "Describe your rules for participating in template. You can type plain text or html tags.",
	adContent: 'Ad content',
	adContentDescription: 'Place your ad content in the template. It can be plain text or html tags.',
	flagsLabel: "Flags",
	flagsPlaceholder: "Type your flag and hit enter",
	repeatedValueMessage: "You have entered a repeated value. Please enter a different one.",
	images: "Images",
	mainImage: "Main",
	coverImage: "Cover",
	mobileImage: "Mobile",
	imagePlaceholder: "Paste your image as valid URL or as relative path",
	related: "Related",
	relatedDescription: "Choose which games or templates you wish to be related to this template.",
	games: "Games",
	gamesPlaceholder: "Select which games (TOP_X and MATCH_QUIZ) are related to this template",
	templates: "Templates",
	templatesPlaceholder: "Select which templates are related to this template",
	position: "Position",
	points: "Points",
	reportFor: "Report for",
	leaderboardNotAvailable: "There is no leaderboard for this template yet. Please come back later.",
	csvModalTitle: "Enter how many users should be exported",
	csvModalDescription: "Download a .csv file with the first 100 number of users.",
	csvModalPlaceholder: "Export the first X users...",
	cancel: "Cancel",
	csvModalDownloadButton: "Download as CSV file",
	csvModalValidationMessage: "Input value has to be an integer number between 1 and 100",
	csvModalErrorMessage: "There was a problem with fetching game's report data",
	leaderboardErrorMessage: "There was a problem with displaying leaderboard. Please try again.",
	getTemplatesErrorMessage: "There was a problem with fetching templates. Please try again. For more information contact Fans United staff.",
	createTemplateMessage: "You have successfully created a template.",
	editTemplateMessage: "You have successfully edited the template.",
	editTemplateErrorMessage: "There was a problem with editing the template. Please try again.",
	provideNameTemplateErrorMessage: "You need to provide a name to your template!",
	provideDurationTemplateErrorMessage: "You need to provide a duration to your template!",
	durationExceededTemplateErrorMessage: "The template duration should be no longer than a year!",
	createTemplateErrorMessage: "There was a problem with creating the template. Please try again.",
	manageWinners: 'Manage winners',
	winners: 'Winners',
	title: 'Title',
	winnersDescription: 'Describe the winners...',
	winner: 'Winner',
	winnerDescription: 'Select the winner of the template',
	insertWinners: 'Insert winners',
	insertWinnersDescription: 'Type information about each winner of the template.',
	note: 'Note',
	notePlaceholder: 'Provide some note for the winner...',
	tags: 'Tags',
	tagsPlaceholder: 'Provide tags for the winner...',
	save: 'Save',
	preview: 'Preview',
	addWinner: 'Add winner',
	removeWinner: 'Remove winner',
	templateWinnersErrorMessage: 'There was a problem with fetching information about template winners. Please try again.',
	templateNoSetWinnersMessage: 'No winners are set for this template.',
	positionAndWinnerRequiredMessage: 'Position and winner are required!',
	sameChosenWinnerMessage: 'You have selected same winners. Each winner has to be unique!',
	createTemplateWinnersMessage: 'You have successfully created winners for the template.',
	createTemplateWinnersErrorMessage: 'There was a problem with creating winners for the template. Please try again.',
	editTemplateWinnersMessage: 'You have successfully edited winners for the template.',
	editTemplateWinnersErrorMessage: 'There was a problem with editing winners for the template. Please try again.',
	relatedEntitiesErrorMessage: "There was a problem with fetching entities. Please try again.",
	labelsHeading: 'Labels',
	customFields: 'Custom fields',
	dynamicFieldsDescription: 'You can create your custom records for easier way to connect your template.',
	keyDynamicFields: 'Key',
	valueDynamicFields: 'Value',
	addRecord: 'Add record',
	dynamicFieldsKeysErrorMessage: 'Only lowercase letters, numbers and underscore are accepted as keys!',
	templateByIdErrorMessage: 'There was a problem retrieving full information about the template.',
	uploadingImageMessage: 'You have successfully uploaded image',
	generateSignedInUrlErrorMessage: 'There was a problem generating signed in URL to store the image in bucket. Please try again',
	uploadingImageErrorMessage: 'There was a problem with uploading image to bucket. Please try again',
	encryptingImageErrorMessage: 'There was a problem with encrypting image before uploading it to bucket. Please try again',
	searchSportal365ImagesErrorMessage: 'There was a problem with searching images from Sportal 365 API. Please try again',
	searchImage: 'Search image',
	clearFromToFilterSportal365ImagesMessage: 'You have cleared from/to filter for Sportal365 search images',
	hideFilters: 'Hide filters',
	showFilters: 'Show filters',
	dateFromTo: 'Date from/to',
	dateFromToPlaceholder: 'Select Date...'
};

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

Here is all information about LabelsModel:

KeyDescriptionDefault Value
userNotFoundOn login screen when client gives invalid information about email or password.User not found. Please try again.
clientConfigErrorMessagereact-toastify error message when client is providing invalid value to fansUnitedApiKey or fansUnitedClientId prop.There was a problem fetching client's configuration. Please check again your API key and client ID. For more information contact Fans United staff.
featureDisabledTitle for NoPermissionModal. This Modal is displayed when client does NOT have permission to use Fans United Match Quiz Widget.Feature disabled!.
noPermissionMessageDescription for NoPermissionModal. This Modal is displayed when client does NOT have permission to use Fans United Match Quiz Widget.You have no permission for this feature!
tryAgainButtonLabel for name of a gameName
noTemplatesFoundWhen there are no created templates for specific client, this message will appear on screen.No templates were found. You can create a template by clicking the button 'Create template'
createTemplateUsed as label on create button and as a title on screen when creating a template.Create template
signOutUsed as label on sign out button.Sign out
manageWinnersUsed as label in Winners screen heading.Manage winners
nameLabel for name of a template or participantName
typeDisplayed in header of list of templates.Type
marketsDisplayed in header of list of templates.Markets
fromDateDisplayed in header of list of templates.From Date
toDateDisplayed in header of list of templates.To Date
actionsDisplayed in header of list of games. Two icon buttons with different actions.Actions
primaryTemplateTemplate type label.Primary
customTemplateTemplate type label.Custom
editTooltip for icon button edit.Edit
reportTooltip for icon button report.Report
winnersTooltip for icon button winners.Winners
timeFormatTimeformat for displaying dates. Widgets uses dayjs as a date dependency.DD.MM.YYYY
backTooltip for back button.Back
idLabel for template ID read only input field.ID
namePlaceholderPlaceholder/desciption about input field for template name when creating/editing a template.Please provide a name for your template leaderboard.
titleLabel in Winners screen headingTitle
descriptionTitle for desciption input field when creating/editing a template.Description
descriptionPlaceholderPlaceholder/desciption about input field for template description when creating/editing a template.Please describe your template leaderboard.
templateDurationTitle for template duration input fieldTemplate leaderboard duration
templateDurationDescriptionDescription about template duration inputUsers can participate in this template during given period.
templateGameTypeTitleTitle for template game type input fieldGame type template
clearTooltip for clear button.Clear
searchImageLabel for search image inputSearch image
hideFiltersLabel for hyperlink to hide filters for image searchHide filters
showFiltersLabel for hyperlink to show filters for image searchShow filters
dateFromToLabel for date from/to filter for image searchDate from/to
dateFromToPlaceholderPlaceholder for input date from/to filter for image searchSelect Date...
clearDurationTimeMessagereact-toastify info message when template duration is cleared.You have cleared your duration template time.
marketSelectionTitle for market selection.Market Selection
marketSelectionDescriptionDescription about market selection.Check what market users can predict for the specified template.
marketFt1x2Label for market full TimeFull time
marketHt1x2Label for market half TimeHalf time
marketBothTeamsScoreLabel for market both teams scoreBoth teams score
marketDoubleChanceLabel for market double chanceDouble chance
marketHtFtLabel for market half time/full timeHalf time/Full time
marketRedCardMatchLabel for market read card matchRed card in match
marketPenaltyMatchLabel for market penalty matchPentalty in match
marketCornersMatchLabel for market corners matchCorners in match
marketCorrectScoreLabel for market correct scoreCorrect score
marketCorrectScoreHalfTimeLabel for market half time correct scoreHalf time correct score
marketCorrectScoreAdvancedLabel for market advanced correct scoreAdvanced correct score
marketPlayerScoreLabel for market player scorePlayer score
marketPlayerYellowCardLabel for market player yellow cardYellow card for player
marketPlayerRedCardLabel for market player red cardRed card for player
marketPlayerScoreFirstGoalLabel for market player score first goalPlayer to score first goal
marketPlayerScoreTwiceLabel for market player score twicePlayer to score twice
marketPlayerScoreHattrickLabel for market player score hattrickPlayer to score hattrick
marketOverZeroGoalsLabel for market over zero goalsOver zero and a half goals
marketOverOneGoalsLabel for market over one goalsOver one and a half goals
marketOverTwoGoalsLabel for market over two goalsOver two and a half goals
marketOverThreeGoalsLabel for market over three goalsOver three and a half goals
marketOverFourGoalsLabel for market over four goalsOver four and a half goals
marketOverFiveGoalsLabel for market over five goalsOver five and a half goals
marketOverSixGoalsLabel for market over six goalsOver six and a half goals
marketOverSixCornersLabel for market over six cornersOver six and a half corners
marketOverSevenCornersLabel for market over seven cornersOver seven and a half corners
marketOverEightCornersLabel for market over eight cornersOver eight and a half corners
marketOverNineCornersLabel for market over nine cornersOver nine and a half corners
marketOverTenCornersLabel for market over ten cornersOver ten and a half corners
marketOverElevenCornersLabel for market over eleven cornersOver eleven and a half corners
marketOverTwelveCornersLabel for market over twelve cornersOver twelve and a half corners
marketOverThirteenCornersLabel for market over thirteen cornersOver thirteen and a half corners
competitionsSelectionTitle for competitions selection.Competitions Selection
competitionsSelectionDescriptionDescription about competitions selection.Type the name of the competition and select one. You can add as many as you want.
teamsSelectionTitle for teams selectionTeams Selection
teamsSelectionDescriptionDescription about teams selectionType the name of the team and select one. You can add as many as you want.
matchesSelectionTitle about matches selection.Matches Selection
matchesSelectionDescriptionDescription about matches selection.Type the name of the team and select one. Then there will be loaded next matches for teams.
selectCompetitionsNoCompetitionFoundPlaceholder when no competitions were found.No competitions were found. Please try again.
selectCompetitionsPlaceholderPlaceholder for competitions selection input.Type the name of your competition
selectTeamsNoTeamFoundPlaceholder for teams selection input when no teams were found.No teams were found. Please try again.
selectTeamsNoMatchesFoundHeading when no matches were found for provided teams.No matches were found for these teams
selectTeamsPlaceholderPlaceholder for teams selection input.Type the name of your team
loadingMessageLoading message as a button label when creating/editing template.Loading...
loadMoreLabel for button to load more next matches for provided teams.Load more
rulesTitle for choosing template leaderboard rules.Rules
rulesDescriptionDescription about choosing template leaderboard rules.Describe your rules for participating in template.
adContentTitle for template's ad content.Ad content
adContentDescriptionDescription for template's ad content.Place your ad content in the template.
flagsLabelTitle for choosing template leaderboard flags.Flags
flagsPlaceholderPlaceholder on input field for template leaderboard flagsType your flag and hit enter
repeatedValueMessagereact-toastify warning message when client submits same value.You have entered a repeated value. Please enter a different one.
imagesTitle for images container.Images
mainImageTitle for main image.Main
coverImageTitle for cover image.Cover
mobileImageTitle for mobile image.Mobile
imagePlaceholderPlaceholder for image inputs.Paste your image as valid URL or as relative path
relatedTitle for related container.Related
relatedDescriptionDescription for related container.Choose which games or templates you wish to be related to this template.
gamesTitle for games select.Games
gamesPlaceholderPlaceholder for games select input.Select which games (TOP_X and MATCH_QUIZ) are related to this template
templatesTitle for templates select.Templates
templatesPlaceholderPlaceholder for templates select input.Select which templates are related to this template
labelsHeadingTitle for labels container.Labels
customFieldsTitle for custom fields container.Custom fields
dynamicFieldsDescriptionDescription about labels and custom fields.You can create your custom records for easier way to connect your template.
keyDynamicFieldsLabel for key input.Key
valueDynamicFieldsLabel for value input.Value
addRecordTooltip for add button in labels and custom fields containers.Add record
positionLabel for Position cell in Report ScreenPosition
pointsLabel for Points cell in Report ScreenPoints
winnersDescriptionDescription for winners descriptionDescribe the winners...
winnerTitle of card and label for the single winner inputWinner
winnerDescriptionDescription for the single winnerSelect the winner of the game
insertWinnersHeading for the single winner containerInsert winners
insertWinnersDescriptionDescription for the single winner containerType information about each winner of the game.
noteLabel for note inputNote
notePlaceholderPlaceholder for note inputProvide some note for the winner...
tagsLabel for tags inputTags
tagsPlaceholderPlaceholder for tags inputProvide tags for the winner...
saveLabel for save buttonSave
previewHeading for preview containerPreview
addWinnerLabel for add button. This add button is displayed on Winners screen.Add winner
removeFixtureLabel for remove button. Remove button is displayed on your winner.Remove winner
reportForFirst part of the title of Report ScreenReport for
leaderboardNotAvailableLabel for alert message when there is no leaderboard available yet.There is no leaderboard for this template.
exportButtonLabel for button to open export modal screen on Report screen.Export
csvModalTitleTitle of the export modal.Enter how many users should be exported
csvModalDescriptionDescription of the export modal.Download a .csv file with the first 100 number of users.
csvModalPlaceholderPlaceholder for input on export modal.Export the first X users...
cancelLabel for cancel button to exit export modal.Cancel
csvModalDownloadButtonLabel for button to download report as CSV file. Keep in mind that this label is uppercase.Download as CSV file
csvModalValidationMessageError message when invalid value is provided in input.Input value has to be an integer number between 1 and 100
csvModalErrorMessageError message when exporting leaderboard as CSV file.There was a problem with fetching game's report data
leaderboardErrorMessagereact-toastify error message when GET request fails for displaying leaderboard.There was a problem with displaying leaderboard. Please try again.
getTemplatesErrorMessagereact-toastify error message when GET request fails for displaying templates.There was a problem with fetching templates. Please try again. For more information contact Fans United staff.
createTemplateMessagereact-toastify succesful message when creating a template.You have successfully created a template.
editTemplateMessagereact-toastify succesful message when editing a template.You have successfully edited the template.
provideNameTemplateErrorMessagereact-toastify error message when trying to create/edit template with empty input name field.You need to provide a name to your template!
provideDurationTemplateErrorMessagereact-toastify error message when trying to create/edit template with empty duration field.You need to provide a duration to your template!
durationExceededTemplateErrorMessagereact-toastify error message when trying to create/edit template with exceeded duration (one year).The template duration should be no longer than a year!
createTemplateErrorMessagereact-toastify error message when creating new template.There was a problem with creating the template. Please try again.
editTemplateErrorMessagereact-toastify error message when editing new template.There was a problem with editing the template. Please try again.
templateNoSetWinnersMessageWhen winners are set for the first time this message will appear in the preview block.No winners are set for this template.
positionAndWinnerRequiredMessageWhen managing winners for a template displaying a react-toastify validation error message.Position and winner are required!
sameChosenWinnerMessageWhen managing winners for a template displaying a react-toastify validation error message.You have selected same winners. Each winner has to be unique!
templateWinnersErrorMessageWhen fetching winners for a template displaying a react-toastify error message.There was a problem with fetching information about template winners. Please try again.
createTemplateWinnersMessageWhen creating winners for a template displaying a react-toastify success message.You have successfully created winners for the template.
createTemplateWinnersErrorMessageWhen creating winners for a template displaying a react-toastify error message.There was a problem with creating winners for the template. Please try again.
editTemplateWinnersMessageWhen editing winners for a template displaying a react-toastify success message.You have successfully edited winners for the template.
editTemplateWinnersErrorMessageWhen editing winners for a template displaying a react-toastify error message.There was a problem with editing winners for the template. Please try again.
relatedEntitiesErrorMessageWhen creating or editing a template displaying a react-toastify error message when the request fails for fetching related entities.There was a problem with fetching entities. Please try again.
dynamicFieldsKeysValidationMessageError react-toastify message when provided keys are invalid.Only lowercase letters, numbers and underscore are accepted as keys!
templateByIdErrorMessageWhen editing a game displaying a react-toastify error message when request fails for retrieving full information about the game.There was a problem retrieving full information about the template.
uploadingImageMessagereact-toastify success message when uploading image to bucketYou have successfully uploaded image
generateSignedInUrlErrorMessagereact-toastify error message when trying to receive a signed in URL.There was a problem generating signed in URL to store the image in bucket. Please try again
uploadingImageErrorMessagereact-toastify error message when uploading image to bucketThere was a problem with uploading image to bucket. Please try again
encryptingImageErrorMessagereact-toastify error message when encrypting image before uploading it to bucketThere was a problem with encrypting image before uploading it to bucket. Please try again
clearFromToFilterSportal365ImagesMessagereact-toastify info message when clearing date from/to filterYou have cleared from/to filter for Sportal365 search images
searchSportal365ImagesErrorMessagereact-toastify error message when searching images from Sportal 365 APIThere was a problem with searching images from Sportal 365 API. Please try again