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.

<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-operator-id="betano-bg"
	data-betslip-affiliate-id="your-affiliate-id"
	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={selectionIds}",
		brandingLogoUrl: "https://example.com/brand-logo.png",
		operatorId: "betano-bg",
		affiliateId: "your-affiliate-id",
	},
});

Choosing a Bookmaker

The odds feed returns prices from every bookmaker configured for a match, and the betslip renders one bookmaker at a time. Without operatorId it uses whichever one the response happens to list first, which is not guaranteed to stay the same. Set data-betslip-operator-id (or betslip.operatorId) to pin the widget to one bookmaker:

<div data-component="fu-widget" data-content-type="betslip" data-betslip-operator-id="betano-bg"></div>

Everything the betslip derives from the bookmaker follows: the odds themselves, the accent colour, the header and CTA logo, and the deep link to its betslip. Markets the chosen bookmaker does not price are dropped from the widget, and if it prices nothing at all, the panel stays hidden. The id is sent with the odds request, so the other bookmakers' prices are never downloaded.

Available operator ids:

betano-bg
efbet-bg
inbet-bg-online
inbet-bg-offline
betwild-bg
bet-bg
sesame-bg
winbet-bg

Operators are configured on the Fans United side, so this list can change — check with your account manager if the one you need is not listed.

Inside the Predictor or TopX widget you don't need to set it twice: the first operator of the widget's own data-predictor-odds-operators / data-top-x-odds-operators (or predictor.odds.operators / topX.odds.operators) also pins its built-in betslip, unless betslip.operatorId says otherwise. See Predictor → Odds.

The Place-Bet CTA and Affiliate Attribution

The CTA link resolves in three steps, first match wins:

1. ctaUrlTemplate, if you set one — your own destination.
2. The operator's betslip deep link from the odds response — this is the one that lands the user on a pre-filled betslip at the bookmaker, and it needs no configuration.
3. The operator's homepage — a last resort that opens the bookmaker with an empty slip.

So in the normal case you configure nothing. Set ctaUrlTemplate only when the CTA has to go somewhere other than the bookmaker's betslip.

Operator links carry an affiliate placeholder that the API fills only when the request supplies one — otherwise the tag comes back empty. Set affiliateId so clicks through the CTA are attributed to you:

<div
	data-component="fu-widget"
	data-content-type="betslip"
	data-betslip-operator-id="betano-bg"
	data-betslip-affiliate-id="your-affiliate-id"
></div>

Placeholders available in ctaUrlTemplate:

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.

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
• Bookmaker pinning via operatorId, with affiliate attribution via affiliateId
• 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.