Odds

Betting odds for one event: the operator's branded box, then each outcome of one market — 1 · X · 2, both teams to score, or an over/under line. Prices refresh on an interval and show an arrow when they move. Clicking a price opens the operator's page and hands the selection to your callback, so it can feed a betslip.

It's the same strip that Predictor, TopX, CompetitorCard, CompetitionStatistics and EventCard render, with the same settings.

Import

import { Odds } from "fansunited-frontend-components";
import { OddsProps } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`eventId`	`string`	Sports API event id, e.g. `"fb:m:536871"`. Any sport.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`market`	`OddsMarket`	The market to show. Defaults to `"FT_1X2"`. See Markets.
`size`	`"default" \| "dense" \| "compact"`	How much room the strip takes. Defaults to `"default"`. `"compact"` is a fixed-height row.
`mode`	`"default" \| "flash"`	`"flash"` alternates the operator and the prices instead of showing both. Defaults to `"flash"` for `size: "compact"` and `"default"` otherwise.
`flashInterval`	`number`	Flash interval in ms. Defaults to `3000`. Ignored unless flashing.
`pollingInterval`	`number`	Refresh interval in ms. Defaults to `30000`. `0` fetches once.
`operators`	`string[]`	Operator config ids in order of preference, e.g. `["betano-bg", "efbet-bg"]`. See Operators.
`affiliateId`	`string`	Substituted into every operator URL carrying an `{affiliate_id}` placeholder.
`affiliateIds`	`Record<string, string>`	Per-operator affiliate ids, e.g. `{ "betano-bg": "aff-123" }`. Wins over `affiliateId`.
`labels`	`OddsLabels`	Overrides for `title` ("Match odds", shown while the compact strip flashes), `yes`, `no`, `over` and `under`. `over` / `under` take a `{{line}}` placeholder.
`callbacks`	`OddsCallbacks`	`onAddToBetslip(selection)`. See Betslip.

These are the settings that the widgets take under their odds prop (OddsConfig). Here they sit at the top level.

Markets

`market`	Outcomes
`FT_1X2`	1 · X · 2 — or 1 · 2 (`WINNER_OT`) for a sport that can't be drawn
`HT_1X2`	1 · X · 2 at half-time
`BOTH_TEAMS_SCORE`	Yes · No
`OVER_GOALS_0_5` … `OVER_GOALS_6_5`	Over · Under the line
`OVER_CORNERS_6_5` … `OVER_CORNERS_13_5`	Over · Under the line

FT_1X2 follows the sport. Football and ice hockey are priced three ways and fall back to the two-way WINNER_OT. Basketball, tennis and American football go the other way round. The component reads the event's sport from the Sports API to decide.

An operator only qualifies with every outcome of the market. Some publish one side of an over/under line, or repeat a code. When no operator prices the market completely, nothing renders. There's no error state for a missing price.

HT_1X2 currently renders nothing. The odds API publishes it under the first-half scope, and the SDK only passes ordinary-time markets through. No operator published OVER_CORNERS_* when this component shipped.

Operators

One operator is shown: the first in operators that prices the market completely. The order is a preference, not a filter that widens the strip. A second id covers the first on an event it doesn't price. Without operators, the first operator the API lists is shown. That isn't guaranteed to stay the same between requests.

See Choosing a bookmaker on the Betslip page for the available operator ids.

Betslip

callbacks.onAddToBetslip receives { matchId, market, pick, odd, operatorId } on every price click:

market is the market the price came from, which is "WINNER_OT" where FT_1X2 fell back.
pick is "1" / "X" / "2", "YES" / "NO" or "OVER" / "UNDER".

The component owns no betslip. With the Fans United Betslip, adding the selection is one call. The operator's own link still opens either way.

Examples

Basic

<Odds eventId="fb:m:536871" sdk={sdk} language="en" />

Over/under with a preferred operator

<Odds
  eventId="fb:m:536871"
  sdk={sdk}
  language="en"
  market="OVER_GOALS_2_5"
  operators={["betano-bg", "efbet-bg"]}
  affiliateId="your-affiliate-id"
/>

Compact, feeding the Betslip

import { Betslip, Odds, betslipApi } from "fansunited-frontend-components";

<>
  <Odds
    eventId="fb:m:536871"
    sdk={sdk}
    language="en"
    size="compact"
    callbacks={{
      onAddToBetslip: ({ matchId, market, pick }) =>
        betslipApi.setSelection(`${matchId}:${market}:${pick}`),
    }}
  />
  <Betslip sdk={sdk} language="en" />
</>