Sports Data Management

Welcome to Fans United Sport Data Management Widget. The widget lets staff members with sufficient permissions browse the shared sport catalogue — competitions, teams, athletes, coaches, staff, venues and countries — and tailor it for a single client. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to manage sport data. Entities can be renamed and translated, given logos, brand colors, socials, related entities, season history and provider references, and any entity can be overridden for one client without disturbing the version every other client reads. With successful installation, you can search, create, edit and override sport entities, and see exactly how each one will be found by the Search API.

Installation and usage

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

npm install fansunited-widget-sports-data

or:

yarn add fansunited-widget-sports-data

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

import 'fansunited-widget-sports-data/style.css';
import { SportsDataManager } from 'fansunited-widget-sports-data';

const App = () => {
  return (
    <SportsDataManager
      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. One important thing is that you need to import style.css file from package folder:

import 'fansunited-widget-sports-data/style.css';

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

• Easy translation in every language. For more information check our Translation heading.

• Access is decided by the signed-in account's roles, not by a prop. For more information check our Permissions heading.

Props

type SportsDataManagerProps = {
  fansUnitedApiKey: string;
  fansUnitedClientId: string;
  fansUnitedClientName?: string;
  fansUnitedEnvironment?: string;
  labels?: LabelsModel;
  hideSignOutButton?: boolean;
};

Fans United Sport Data 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:

• fansUnitedClientName - the name used whenever the widget refers to the client in copy, for example "Sport data for Ludogorets only". Display only, and never used to address an index — if no value is given the client ID is shown instead.

• fansUnitedEnvironment - You can run the widget in the following environments: staging and production. 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 Sport Data Management Widget is available in English so if no value is given, the widget will be translated in English.

• hideSignOutButton - The prop is used to hide the sign out button which is positioned on the top right corner on the main screen of the widget.

Unlike the other management widgets, there is no fansUnitedLanguage prop. This widget reads and writes sport entities through the Ikebana proxy and calls no localized sports API, so there is no response language to choose. The widget's own wording is set with labels, and per-language entity names are data you edit in the Translations section — neither depends on such a prop.

The catalogue and overrides

This is the one concept worth reading before using the widget, because it decides who sees your changes.

Sport data lives in two places:

An entity read by a client is the global entity, unless that client has an override for it — in which case the override replaces it entirely.

An override is a client-owned copy of a global entity. It keeps the same ID as the global entity, which is what lets it shadow it. It starts from the global values at the moment you create it, and from then on it is independent: later changes to the global entity no longer reach that client. Removing the override deletes only the copy and the client falls back to the global entity again — the global entity is never touched by any of this.

You can also create an entity directly in the Overrides scope. That is not an override of anything: it is a client-only entity with a newly generated ID, it never enters the global catalogue, and no other client can see it.

Entities can be overridden one at a time from a row, or in bulk by ticking several rows. Rows already overridden are badged and cannot be selected, since a second override would only overwrite the first.

Overrides are removed the same way — from a row, or by ticking several in the Overrides scope and removing them together. Removing one deletes only the client's copy; the entity itself is untouched and that client goes back to reading the global version.

Permissions

The widget reads a roles custom claim from the signed-in account's token.

What you can manage

Seven entity types: competitions, teams, athletes, coaches, staff, venues and countries. Every type except countries is scoped to a sport — Football, Basketball, Tennis, Hockey, American Football or Formula 1 — which is encoded in its ID and cannot be changed after it is created.

Depending on the type, an entity carries some of: General (naming), Translations, Assets, Branding, Socials, Related, Season History, Additional Information and Provider References. Only the sections that apply to a type are offered.

Each entity also has a How people find this entity panel, which shows in plain language how the Search API will match it: the name, the other terms it answers to, the links apps can filter by, and the popularity score that breaks ties. It updates as you edit.

Translation

You can easily translate Fans United Sport Data 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-sports-data/style.css';
import { SportsDataManager } from 'fansunited-widget-sports-data';

const labels = {
  sportDataTitle: 'Sport Data',
  createLabel: 'Create',
  saveLabel: 'Save',
  editAction: 'Edit',
  overrideAction: 'Override',
};

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

Every key is optional — anything you leave out keeps its English default.

Some labels contain placeholders in braces, such as {name}, {client}, {count} or {entities}. These are filled in at runtime, so keep them in your translation. A placeholder you drop simply will not be shown; one you misspell is printed as written.

The full list follows, grouped by where it appears.

Access and session

Shown before the catalogue is reachable, or in the header.

Page header

Title and standfirst above the tabs.

Scope tabs

The two scopes the catalogue is browsed in.

Scope notes

The banner under the tabs. Which one shows depends on the scope and on the role.

Toolbar

Search, sport filter and Create.

Entity list

Column headings, row actions and list-level messages.

Editor and saving

The editor shell: save bar, toasts and the banner naming what is being edited.

How people find this entity

The panel explaining how the Search API will match this entity.

Creating an entity

The create form and its outcomes.

Translations section

Localized names, one row per language.

Assets section

One image per asset key, uploaded or pointed at an external URL.

Branding section

Brand and shirt colors.

Socials section

Links to official channels.

Related section

Links to other entities, which become the filters apps search by.

Season history section

Per-season links, assets and attributes.

Attributes and provider references

Key/value attributes, and the external IDs per data provider.

Pagination

Below the list.

Overrides, JSON preview and bulk actions

Creating and removing client overrides, and the read-only JSON drawer.

Changelog

1.0.0 - 2026-09-17

• Initial Release:
  • Browse the global sport catalogue across seven entity types, with search, sport filter and pagination
  • Create and edit entities, with per-type sections for translations, assets, branding, socials, related entities, season history, additional information and provider references
  • Client overrides: create one from a row or several at once, see which fields differ from the global entity, and remove an override to fall back
  • "How people find this entity" panel explaining name matching, variations, filterable links and popularity ranking
  • Read-only JSON preview of the entity data being saved
  • Role-aware UI for platform_operator and client_admin