Betslip

A floating betslip overlay that lets users build and submit a bet slip directly on your page. Unlike other widgets, the Betslip has no content ID — it works as a persistent element positioned anywhere on the screen. Selections are added and removed from your own code using the FuWidget.betslip API.

📘

For the programmatic methods (setSelection, removeSelection, subscribe, getState), see API Reference → Betslip API.

<div
	data-component="fu-widget"
	data-content-type="betslip"
	data-betslip-position="bottom-right"
	data-betslip-currency="USD"
	data-betslip-max-selections="10"
	data-betslip-stake-presets="5,10,20,50"
	data-betslip-cta-url-template="https://bookmaker.com/betslip?s={SELECTIONS}"
	data-betslip-branding-logo-url="https://example.com/brand-logo.png"
></div>

Configuration Attributes

No Content ID Required

The Betslip is the only widget type that does not require a content id. When using loadWidget(), simply omit the id field:

FuWidget.loadWidget({
	apiKey: "your-api-key",
	clientId: "your-client-id",
	configId: "your-config-id",
	contents: [
		{
			type: "betslip",          // No id needed
			container: "betslip-container",
		},
	],
	configOverrides: {
		betslip: {
			position: "bottom-right",
			currency: "EUR",
			maxSelections: 8,
		},
	},
});

<div id="betslip-container"></div>

Global Configuration

Set defaults for all Betslip widgets in FuWidget.init():

FuWidget.init({
	// ... other config
	betslip: {
		position: "bottom-right",
		maxSelections: 10,
		stakePresets: [5, 10, 20, 50],
		oddsPollingInterval: 5000,
		currency: "USD",
		ctaUrlTemplate: "https://bookmaker.com/betslip?s={SELECTIONS}",
		brandingLogoUrl: "https://example.com/brand-logo.png",
	},
});

Managing Selections Programmatically

The betslip itself renders no UI until it has at least one selection. Add and remove selections using FuWidget.betslip:

// Add a selection (e.g. from a match odds click on your page)
FuWidget.betslip.setSelection("fb:m:328701:FT_1X2:1");

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

Selection IDs follow the format {match_id}:{market}:{outcome}. The exact values depend on your data provider and the odds feed — refer to your odds provider documentation for the correct format.

📘

Note: FuWidget.betslip is available after the widget bundle has loaded (i.e. inside onReady when using the loader, or after your <script> has executed). See API Reference → Betslip API.

Customising Labels

Use data-betslip-labels (or betslip.labels in global config) to override the text displayed inside the widget. All fields are optional — only provide the ones you want to change.

<div
	data-component="fu-widget"
	data-content-type="betslip"
	data-betslip-labels='{"title":"My Betslip","placeBetLabel":"Place Bet","emptyTitle":"No selections yet","emptyDescription":"Add selections to get started"}'
></div>

Available label fields (BetslipLabels):

Nested outcome labels (BetslipOutcomeLabels):

Features

• Floating overlay — positioned anywhere on the page, independent of page layout
• Live odds polling with configurable refresh interval
• Accumulator support with combined odds calculation
• Configurable stake presets for quick bet amounts
• Suspended and settled selection states
• Branding / sponsor logo support
• Fully customisable labels
• Custom theming via themeOptions

Implementation Tips

• Position near odds: Place the betslip widget close to where your odds are displayed so users don't have to scroll to see their selections.
• Use loadWidget() with a container: For most pages, passing a container keeps the betslip anchored to a predictable spot in the DOM.
• Call setSelection after onReady: Always wait for the widget bundle to finish loading before calling FuWidget.betslip.setSelection().
• Pair with Predictor: If you use the Predictor widget, enable its built-in betslip integration via predictor.betslip instead of running both widgets side-by-side.

📘

Related: API Reference → Betslip API · Predictor widget.