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
- Easy translation in every language. For more information check our Translation heading.
Props
type LeaderboardManagerProps = {
fansUnitedApiKey: string;
fansUnitedClientId: string;
fansUnitedLanguage?: string;
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). -
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.
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',
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',
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',
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 goals',
marketOverOneGoals: 'Over one goals',
marketOverTwoGoals: 'Over two goals',
marketOverThreeGoals: 'Over three goals',
marketOverFourGoals: 'Over four goals',
marketOverFiveGoals: 'Over five goals',
marketOverSixGoals: 'Over six goals',
marketOverSixCorners: 'Over six corners',
marketOverSevenCorners: 'Over seven corners',
marketOverEightCorners: 'Over eight corners',
marketOverNineCorners: 'Over nine corners',
marketOverTenCorners: 'Over ten corners',
marketOverElevenCorners: 'Over eleven corners',
marketOverTwelveCorners: 'Over twelve corners',
marketOverThirteenCorners: 'Over thirteen 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",
rules: "Rules",
rulesDescription: "Describe your rules for participating in template. You can type plain text or html tags.",
flagsLabel: "Flags",
flagsPlaceholder: "Type your flag and hit enter",
repeatedFlagMessage: "You have entered a repeated flag. Please enter a different one.",
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.",
provideNameTemplateErrorMessage: "You need to provide a name to your template!",
provideDurationTemplateErrorMessage: "You need to provide a duration to your template!",
createTemplateErrorMessage: "There was a problem with creating the template. Please try again."
};
const App = () => {
return (
<LeaderboardManager
fansUnitedApiKey={'your-api-key'}
fansUnitedClientId={'your-client-id'}
labels={labels}/>
);
}
Here is all information about LabelsModel
:
Key | Description | Default Value |
---|---|---|
userNotFound | On login screen when client gives invalid information about email or password. | User not found. Please try again. |
clientConfigErrorMessage | react-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. |
featureDisabled | Title for NoPermissionModal. This Modal is displayed when client does NOT have permission to use Fans United Match Quiz Widget. | Feature disabled!. |
noPermissionMessage | Description 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! |
tryAgainButton | Label for name of a game | Name |
noTemplatesFound | When 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' |
createTemplate | Used as label on create button and as a title on screen when creating a template. | Create template |
name | Label for name of a template or participant | Name |
type | Displayed in header of list of templates. | Type |
markets | Displayed in header of list of templates. | Markets |
fromDate | Displayed in header of list of templates. | From Date |
toDate | Displayed in header of list of templates. | To Date |
actions | Displayed in header of list of games. Two icon buttons with different actions. | Actions |
primaryTemplate | Template type label. | Primary |
customTemplate | Template type label. | Custom |
edit | Tooltip for icon button edit. | Edit |
report | Tooltip for icon button report. | Report |
timeFormat | Timeformat for displaying dates. Widgets uses dayjs as a date dependency. | DD.MM.YYYY |
back | Tooltip for back button. | Back |
namePlaceholder | Placeholder/desciption about input field for template name when creating/editing a template. | Please provide a name for your template leaderboard. |
description | Title for desciption input field when creating/editing a template. | Description |
descriptionPlaceholder | Placeholder/desciption about input field for template description when creating/editing a template. | Please describe your template leaderboard. |
templateDuration | Title for template duration input field | Template leaderboard duration |
templateDurationDescription | Description about template duration input | Users can participate in this template during given period. |
clear | Tooltip for clear button. | Clear |
clearDurationTimeMessage | react-toastify info message when template duration is cleared. | You have cleared your duration template time. |
marketSelection | Title for market selection. | Market Selection |
marketSelectionDescription | Description about market selection. | Check what market users can predict for the specified template. |
marketFt1x2 | Label for market full Time | Full time |
marketHt1x2 | Label for market half Time | Half time |
marketBothTeamsScore | Label for market both teams score | Both teams score |
marketDoubleChance | Label for market double chance | Double chance |
marketHtFt | Label for market half time/full time | Half time/Full time |
marketRedCardMatch | Label for market read card match | Red card in match |
marketPenaltyMatch | Label for market penalty match | Pentalty in match |
marketCornersMatch | Label for market corners match | Corners in match |
marketCorrectScore | Label for market correct score | Correct score |
marketPlayerScore | Label for market player score | Player score |
marketPlayerYellowCard | Label for market player yellow card | Yellow card for player |
marketPlayerRedCard | Label for market player red card | Red card for player |
marketPlayerScoreFirstGoal | Label for market player score first goal | Player to score first goal |
marketPlayerScoreTwice | Label for market player score twice | Player to score twice |
marketPlayerScoreHattrick | Label for market player score hattrick | Player to score hattrick |
marketOverZeroGoals | Label for market over zero goals | Over zero goals |
marketOverOneGoals | Label for market over one goals | Over one goals |
marketOverTwoGoals | Label for market over two goals | Over two goals |
marketOverThreeGoals | Label for market over three goals | Over three goals |
marketOverFourGoals | Label for market over four goals | Over four goals |
marketOverFiveGoals | Label for market over five goals | Over five goals |
marketOverSixGoals | Label for market over six goals | Over six goals |
marketOverSixCorners | Label for market over six corners | Over six corners |
marketOverSevenCorners | Label for market over seven corners | Over seven corners |
marketOverEightCorners | Label for market over eight corners | Over eight corners |
marketOverNineCorners | Label for market over nine corners | Over nine corners |
marketOverTenCorners | Label for market over ten corners | Over ten corners |
marketOverElevenCorners | Label for market over eleven corners | Over eleven corners |
marketOverTwelveCorners | Label for market over twelve corners | Over twelve corners |
marketOverThirteenCorners | Label for market over thirteen corners | Over thirteen corners |
competitionsSelection | Title for competitions selection. | Competitions Selection |
competitionsSelectionDescription | Description about competitions selection. | Type the name of the competition and select one. You can add as many as you want. |
teamsSelection | Title for teams selection | Teams Selection |
teamsSelectionDescription | Description about teams selection | Type the name of the team and select one. You can add as many as you want. |
matchesSelection | Title about matches selection. | Matches Selection |
matchesSelectionDescription | Description about matches selection. | Type the name of the team and select one. Then there will be loaded next matches for teams. |
selectCompetitionsNoCompetitionFound | Placeholder when no competitions were found. | No competitions were found. Please try again. |
selectCompetitionsPlaceholder | Placeholder for competitions selection input. | Type the name of your competition |
selectTeamsNoTeamFound | Placeholder for teams selection input when no teams were found. | No teams were found. Please try again. |
selectTeamsNoMatchesFound | Heading when no matches were found for provided teams. | No matches were found for these teams |
selectTeamsPlaceholder | Placeholder for teams selection input. | Type the name of your team |
loadingMessage | Loading message when creating/editing template. | Loading... |
loadMore | Label for button to load more next matches for provided teams. | Load more |
rules | Title for choosing template leaderboard rules. | Rules |
rulesDescription | Description about choosing template leaderboard rules. | Describe your rules for participating in template. You can type plain text or html tags. |
flagsLabel | Title for choosing template leaderboard flags. | Flags |
flagsPlaceholder | Placeholder on input field for template leaderboard flags | Type your flag and hit enter |
repeatedFlagMessage | react-toastify warning message when client submits same flag. | You have entered a repeated flag. Please enter a different one. |
getTemplatesErrorMessage | react-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. |
createTemplateMessage | react-toastify succesful message when creating a template. | You have successfully created a template. |
editTemplateMessage | react-toastify succesful message when editing a template. | You have successfully edited the template. |
provideNameTemplateErrorMessage | react-toastify error message when trying to create/edit template with empty input name field. | You need to provide a name to your template! |
provideDurationTemplateErrorMessage | react-toastify error message when trying to create/edit template with empty duration field. | You need to provide a duration to your template! |
createTemplateErrorMessage | react-toastify error message when creating new template. | There was a problem with creating the template. Please try again. |
editTemplateErrorMessage | react-toastify error message when editing new template. | There was a problem with editing the template. Please try again. |
Updated 9 months ago