Match Quiz Management

npm  install  fansunited-widget-match-quiz

yarn  add  fansunited-widget-match-quiz

import  'fansunited-widget-match-quiz/style.css';
import { MatchQuizManager } from  'fansunited-widget-match-quiz';

const  App = () => {

return <MatchQuizManager fansUnitedApiKey={'your-api-key'} fansUnitedClientId={'your-client-id'}/>

}

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

import 'fansunited-widget-match-quiz/style.css';
import { MatchQuizManager } from  'fansunited-widget-match-quiz';

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',
	noGamesFound: "No games were found. You can create a game by clicking the button 'Create game'",
	signOut:  'Sign out',
	name: 'Name',
	status: 'Status',
	participants: 'Participants',
	acceptUntil: 'Accept Until',
	actions: 'Actions',
	pending: 'Pending',
	settled: 'Settled',
	live: 'Live',
	open: 'Open',
	canceled: 'Canceled',
	closed: 'Closed',
	edit: 'Edit',
	timeFormat: 'DD-MM-YYYY HH:mm',
	previous: 'Previous',
	next: 'Next',
	id: 'ID',
	description: 'Description',
	matchSelection: 'Match selection',
	matchSelectionDescription: 'Search for a match by competitions or teams. When you choose a match the defaults market will be displayed.',
	marketSelection: 'Market Selection',
	chosenMarkets: 'Chosen markets',
	otherMarkets: 'Other markets',
	marketSelectionCreateGameDescription: 'Drag and drop what market users can predict for the specified match. The default markets are automatically dropped in chosen markets.',
	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',
	marketPlayerScoreFirstGoal: 'Player to score first goal',
	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',
	gameStatus: 'Game status',
	timeTiebreaker: 'Time tiebreaker',
	timeTiebreakerDescription: `When enabled the game's leaderboard will have a classic user ranking (1,2,3). In case of same points, the user who placed their predictions eariler will be infront. When disabled the current game's leaderboard behavour is used - when 2 or more people have same points, the ranking will be 1,1,3,4,5,5,7,8.`,
	rules: 'Rules',
	adContent: 'Ad content',
	adContentDescription: 'Place your ad content in the game. It can be plain text or html tags.',
	flags: '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',
	related: 'Related',
	games: 'Games',
	templates: 'Templates',
	cutoffTime: 'Cutoff time',
	createCutoffTimeDescription: 'Predictions will be accepted until this time. If not provided it will be automatically generated 15 minutes from the first match played.',
	editCutoffTimeDescription: "Predictions will be accepted until this time. You need to provide a cutoff time to be able to edit the game. Keep in mind that cutoff time should be ATLEAST 15 minutes before match's kickoff time.",
	back: 'Back',
	loadMore: 'Load more',
	exportButton: 'Export',
	position: 'Position',
	points: 'Points',
	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...',
	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",
	createGameMessage: 'You have successfully created a game.',
	editGameMessage: 'You have successfully edited a game.',
	createGameErrorMessage:  'There was a problem with creating the game. Please try again.',
	editGameErrorMessage:  'There was a problem with editing the game. Please try again.',
	leaderboardErrorMessage:  'There was a problem with displaying leaderboard. Please try again.',
	manageWinners: 'Manage winners',
	title: 'Title',
	winnersDescription: 'Describe the winners...',
	note: 'Note',
	tags: 'Tags',
	tagsPlaceholder: 'Provide tags for the winner...',
	save: 'Save',
	preview: 'Preview',
	positionAndWinnerRequiredMessage: 'Position and winner are required!',
	sameChosenWinnerMessage: 'You have selected same winners. Each winner has to be unique!',
	relatedEntitiesErrorMessage: 'There was a problem with fetching entities. Please try again.',
	labelsHeading: 'Labels',
	customFields: 'Custom fields',
	keyDynamicFields: 'Key',
	valueDynamicFields: 'Value',
	gameByIdErrorMessage: 'There was a problem retrieving full information about the game.',
	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',
	hideFilters: 'Hide filters',
	showFilters: 'Show filters',
	exportAllUsers: 'Export all users',
	usersExportMessage: 'All users have been exported successfully',
	usersExportErrorMessage: 'There was a problem with exporting users. Please try again',
	marketCorrectScoreHalfTime: 'Correct score at half-time',
	marketCorrectScoreAdvanced: 'Advanced correct score',
	schedule: 'Schedule',
	scheduledTaskNotAvailable: 'To configure scheduled tasks you need to first create your game',
	createScheduledTaskMessage: 'You have successfully created scheduled task',
	createScheduledTaskErrorMessage: 'An error occurred while creating scheduled task. Please try again later',
	updateScheduledTaskMessage: 'You have successfully updated scheduled task',
	updateScheduledTaskErrorMessage: 'An error occurred while updating scheduled task. Please try again later',
	deleteScheduledTaskMessage: 'You have successfully deleted scheduled task',
	deleteScheduledTaskErrorMessage: 'An error occurred while deleting scheduled task. Please try again later',
	changeStatusTo: 'Change status to:',
	at: 'At:',
	deleteScheduledTaskModalTitle: 'Delete scheduled task',
	deleteScheduledTaskModalParagraph: 'Are you sure you want to delete the following scheduled task: ',
	delete: 'Delete',
	close: 'Close',
	configuration: 'Configuration',
	branding: 'Branding',
	urls: 'URLs',
	primaryUrl: 'Primary URL',
	secondaryUrl: 'Secondary URL',
	privacyPolicyUrl: 'Privacy Policy URL',
	termsAndConditionsUrl: 'Terms and Conditions URL',
	additionalUrl: 'Additional URL',
	colors: 'Colors',
	primaryColor: 'Primary Color',
	secondaryColor: 'Secondary Color',
	contentColor: 'Content Color',
	backgroundColor: 'Background Color',
	borderColor: 'Border Color',
	additionalColor: 'Additional Color',
	mainLogo: 'Main Logo',
	mobileLogo: 'Mobile Logo',
	backgroundImage: 'Background Image',
	mobileBackgroundImage: 'Mobile Background Image',
	additionalImage: 'Additional Image',
	hideMoreImages: 'Hide more images',
	showMoreImages: 'Show more images',
	uploadImage: 'Upload Image',
	sportal365Images: 'Sportal365 Images',
	create: 'Create',
	createdAt: 'Created at',
	additionalInformation: 'Additional information',
	sortOrder: 'Sort order',
  ascending: 'Ascending',
  descending: 'Descending',
	itemsPerPage: 'Items per page',
	clone: 'Clone',
	pageNo: 'Page No',
	winnersErrorMessage: 'There was a problem with fetching information about game winners. Please try again.',
	createWinnersMessage: 'You have successfully created winners for the game.',
	createWinnersErrorMessage: 'There was a problem with creating winners for the game. Please try again.',
	editWinnersMessage: 'You have successfully edited winners for the game.',
	editWinnersErrorMessage: 'There was a problem with editing winners for the game. Please try again.',
	configureWinners: 'Configure Winners',
	noStandingsAvailable: 'No standings available',
	noStandingsAvailableExportUsers: 'Standings are currently not available, as not all matches have been played yet. However, you can still export all the users who have participated so far.',
	predictions: 'Predictions',
	nicknameAndName: 'Nickname & Name',
	clearWinner: 'Clear winner',
	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',
	manageGameTitle: 'Manage Match Quiz',
	manageGameDescription: 'Manage your Match Quiz game here',
	cloneGameTitle: 'Clone Match Quiz game',
	provideTitleGameErrorMessage: 'You need to provide a title to your game!',
	filters: 'Filters',
	competitionsSelectionPlaceholder: 'Search for competitions by their name',
	teamsSelectionPlaceholder: 'Search for teams by their name',
	searchCompetitionsErrorMessage: 'There was a problem searching for competitions',
	searchTeamsErrorMessage: 'There was a problem searching for teams',
	searchMatches: 'Search matches',
	getMatchesErrorMessage: 'An error occurred while fetching the matches. Please try again.',
	gameParticipationsReportErrorMessage: 'There was a problem with fetching information about game participation. Please try again',
	reports: 'Reports',
	performanceByDay: 'Performance by day',
	participations: 'Participations',
	standings: 'Standings',
	noProfileInformationAvailableMessage: 'There is no profile information available',
	showDetails: 'Show details',
	noMatchesFound: 'No matches are found for the provided filters',
	sortingFilterTooltip: 'Sort by earliest match kickoff time. Descending order shows games with the latest kickoffs first (newest to oldest). Ascending order shows games with the earliest kickoffs first (oldest to newest).',
	noSetWinnersMessage: 'No winners are set for this game.',
	getGamesErrorMessage: 'There was a problem retrieving information about the games.',
	titleRequiredFieldValidationMessage: 'Title field is required!',
	fixturesRequiredValidationMessage: 'You need to provide at least one fixture',
	selectedMatch: 'Selected match',
	usersLeadsExportMessage: 'All users leads have been exported successfully',
	usersLeadsExportErrorMessage: 'There was a problem with exporting all users leads. Please try again',
	exportAllUsersLeads: 'Export all users leads',
	notVerified: 'Not verified',
	updatedAt: 'Updated at',
	userGamePredictionErrorMessage: "There was a problem with fetching user's game prediction. Please try again",
	predictionBy: 'Prediction by',
	noPredictionAvailable: 'No prediction available',
	market: 'Market',
	correct: 'Correct',
	partiallyCorrect: 'Partially correct',
	incorrect: 'Incorrect',
	void: 'Void',
	match: 'Match',
	outcome: 'Outcome',
	settledAt: 'Settled at',
	resettledAt: 'Resettled at',
	dates: 'Dates',
	prediction: 'Prediction',
	type: 'Type',
	entity: 'Entity',
	relationship: 'Relationship',
	dynamicFieldsKeysValidationMessage: 'Only lowercase letters, numbers and underscore are accepted as keys!',
	scheduledTaskInOpenGameNotAvailable: `Scheduling is only available for games that need to be opened at a future time.`,
	noDataAvailable: 'No data available to display',
	add: 'Add',
	authRequirement: 'Auth Requirement',
	authRequirementDescription: 'Choose the type of authentication to be used.',
	free: 'Free',
	lead: 'Lead',
	registered: 'Registered',
	paid: 'Paid',
	widgetEmbedCodeTitle: 'Widget embed code',
	copyToClipboard: 'Copy to clipboard',
	divElementTextInfo: "The generated embed code can be copied directly into your website's HTML. For comprehensive implementation details, visit our documentation: ",
	widgetEmbedCodeNotAvailable: 'To configure embed code you need to first create your match quiz.',
	layoutTemplate: 'Layout template',
	layoutTemplateDescription: 'Standard: image takes 30% width with configurable position. Split: image takes 50% width on the left. Overlay: image as background with content overlay.',
	imagePosition: 'Image position',
	imagePositionDescription: 'Position of the image relative to the main content (only available for Standard layout).',
	showPredictionDetails: 'Show prediction details',
	showPredictionDetailsTooltip: 'When enabled and the game predictions are resolved, the widget will show a tabular view where users can view their prediction outcomes.',
	showCountdown: 'Show countdown',
	showCountdownTooltip: 'When enabled, the widget will show a countdown to the game cutoff time.',
	showPoints: 'Show points',
	showPointsTooltip: 'When enabled, the widget will show the points for each fixture question.',
	showTeamLabels: 'Show team labels',
	showTeamLabelsTooltip: 'When enabled, the widget will the team names where applicable.',
	configureAdditionalCta: 'Configure additional CTA',
	configureAdditionalCtaTooltip: 'The additional CTA is shown after the user submits their answers.',
	additionalCtaLabel: 'Label',
	additionalCtaLabelInfoMessage: 'Custom text displayed on the additional CTA button.',
	additionalCtaHandler: 'Handler',
	additionalCtaHandlerInfoMessage: 'JavaScript function code that executes when users click the additional CTA button. To evaluate the function, provide only the function name. Example: redirectToHomePage().',
	additionalCtaUrl: 'URL',
	additionalCtaUrlInfoMessage: 'URL that users are redirected to when clicking the additional CTA button.',
	additionalCtaTarget: 'Target',
	copiedToClipboard: 'HTML div element copied to clipboard!',
	configureLeads: 'Configure leads',
	configureLeadsDisabledMessage: 'Configure leads is enabled only when the authentication requirement is set to "Lead".',
	leadPosition: 'Lead position',
	addCampaignInfo: 'Add campaign info',
	campaignIdInfoMessage: 'Group multiple content items by a campaign ID. This field will be used for filtering later on, so make sure you have excatly the same ID across your multiple quizzes, polls and other games in general. We recommend using lowercase and -. Example: "adidas-december-2025"',
	campaignNameInfoMessage: 'A label for your campaign that will appear in the reports. You can use anything here. Example: "Adidas (December 2025)"',
	signInLabel: 'Label',
	signInLabelInfoMessage: 'Custom text displayed on the sign-in button. If empty, defaults to "Sign in to vote".',
	authenticationHandler: 'Authentication handler',
	authenticationHandlerInfoMessage: 'JavaScript function code that executes when users click the sign-in button. To evaluate the function, provide only the function name. Example: showLoginModal() or window.openAuth(). The function is required otherwise the sign-in button will just log dummy message in the console.',
	configureSignIn: 'Configure sign-in options',
	configureSignInDisabledMessage: 'Configure sign-in options is enabled only when the authentication requirement is set to "Registered".',
	signInUrl: 'URL',
	signInUrlInfoMessage: 'URL that users are redirected to when clicking the sign-in button.',
	signInTarget: 'Target',
	syncWithProfile: 'Sync with profile',
	syncWithProfileDescription: 'When enabled, the lead form data is synced with the user's profile data.',
	configureRulesDisplayOptions: 'Configure rules display options',
	configureRulesDisplayOptionsDisabledMessage: 'Rules display options are only available when match quiz has rules configured',
	rulesDisplayType: 'Display type',
	rulesDisplayUrl: 'URL',
	rulesDisplayUrlInfoMessage: 'URL to open when the rules UI element is clicked',
	rulesDisplayTarget: 'Target'
};

const  App = () => {

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