Guides

API Reference

The FuWidget.betslip API, shared prediction market types, and browser support.

Betslip API

The FuWidget.betslip namespace exposes methods for controlling the Betslip widget from your own page code. This is the primary way to connect your odds display to the betslip — for example, wiring up "Add to Betslip" buttons next to odds on your page.

// Add a selection
FuWidget.betslip.setSelection("fb:m:328701:FT_1X2:1");

// Remove a selection
FuWidget.betslip.removeSelection("fb:m:328701:FT_1X2:1");

// React to every state change (e.g. update a selection counter badge)
const unsubscribe = FuWidget.betslip.subscribe(function (state) {
	console.log(state); // { selections: [...], totalOdds: number, stake: number }
});

// Stop listening when no longer needed
unsubscribe();

Available Methods

MethodDescription
setSelection(selectionId: string)Adds a selection. If the same event + market already exists, the outcome is replaced.
removeSelection(selectionId: string)Removes a selection by its exact ID. No-op if not present.
getState()Returns a synchronous snapshot of the current state. See note below.
subscribe(listener: (state) => void): () => voidSubscribes to state changes. Returns an unsubscribe function.
📘

Note on getState():

The betslip loads odds asynchronously after mount. Calling getState() immediately will return the current selections but totalOdds will not yet reflect live data. Use subscribe to react to state once odds have been fetched. getState() is most useful inside event handlers (e.g. on a button click) where the component has already been running for some time.

Usage with loadWidget()

FuWidgetLoader.load({
	onReady: function (FuWidget) {
		FuWidget.loadWidget({
			apiKey: "your-api-key",
			clientId: "your-client-id",
			configId: "your-config-id",
			contents: [{ type: "betslip", container: "betslip-container" }],
		});

		// Wire up your own "Add to Betslip" buttons
		document.querySelectorAll("[data-selection-id]").forEach((btn) => {
			btn.addEventListener("click", () => {
				FuWidget.betslip.setSelection(btn.getAttribute("data-selection-id"));
			});
		});
	},
});

Usage with FuWidget.init()

FuWidget.init({ /* ... config */ });

// Anywhere on the page after init
FuWidget.betslip.setSelection("fb:m:328701:FT_1X2:1");
📘

Important:

Pre-mount calls are queued automatically — you can safely call setSelection before the Betslip component has finished rendering and the selection will be applied once it mounts.

📘

See Widgets → Betslip for the widget markup, attributes, and label customisation.

Market Types

Both prediction widgets (Match Prediction and Team Next Match Prediction) support various market types that can be specified using the data-market attribute.

1X2 Markets

For 1X2 markets, the widget displays three prediction options: Home win, Draw, and Away win.

Supported 1X2 markets:

  • FT_1X2 — Full-time match result (default)
  • HT_1X2 — Half-time match result

Yes/No Markets

For Yes/No markets, the widget displays two prediction options: Yes and No.

Supported Yes/No markets:

  • BOTH_TEAMS_SCORE — Whether both teams will score
  • PENALTY_MATCH — Whether there will be a penalty in the match
  • RED_CARD_MATCH — Whether there will be a red card in the match

Other Available Markets

Additional markets are available depending on your implementation needs. These include:

  • Player-specific markets (PLAYER_SCORE, PLAYER_YELLOW_CARD, etc.)
  • Over/under markets
  • Correct score markets
📘

Note:

Some markets may be unavailable for certain competitions or matches, depending on data provider coverage.

📘

The Match Quiz widget supports an even wider set of markets — see its Supported Markets subsection on the Widgets page.

Browser Support

The widget library supports the following browsers:

  • Chrome (latest 2 versions)
  • Firefox (latest 2 versions)
  • Safari (latest 2 versions)
  • Edge (latest 2 versions)
  • iOS Safari (latest 2 versions)
  • Android Chrome (latest 2 versions)