goma-betslip-floating

Floating-action-button (FAB) betslip: a fixed-position circular, icon-only button with a top-right selection-count badge that, on tap, opens a full-screen native <dialog> containing the shared betslip panel (selections list, stake input, single/multiple summary, place-bet button). Sister widget to goma-betslip-sidebar — same shared-storage selection sync, same place-bet contract, same theming. Use this one in mobile-first layouts where a permanent sidebar would steal too much real estate.

The dialog renders as a centred modal on desktop and as a bottom-sheet below the configured mobileBreakpoint. The iOS-safe native-<dialog> recipe from <goma-sports-navigation-dialog> is reused: top-layer showModal(), manual useScrollLock, dim ::backdrop with allow-discrete transitions.

Live demo

Open in the playground → — toggle Betslip (floating) alongside Events horizontal in the widget rail. Tap odds in the event cards to populate the shared goma:betslip:v3 envelope, then tap the floating pill to open the modal and inspect the selections / stake / place-bet flow.

Install

bash

pnpm add @gomagaming/betslip-floating vue pinia vue-router vue-i18n @vueuse/core

Element

html

<goma-betslip-floating id="bf"></goma-betslip-floating>

The widget renders only the FAB in its closed state — a circular, icon-only cyan button (a built-in betslip glyph by default, overridable via triggerIcon) with a top-right count badge. The host element is positionally fixed and does not occupy normal flow. Tapping the FAB opens the modal; the modal closes on the close button, backdrop click, or Escape. A successful Place Bet does not auto-close the modal — the receipt surfaces inline at the top of the panel so the user can confirm it and (optionally) switch to the My Bets tab.

Configuration

const el = document.getElementById('bf')
el.config = {
  // Optional — only needed when placeBetMode is 'api' and the endpoint is a
  // relative path. Resolves placeBetEndpoint against this base.
  bettingApiBaseUrl: 'https://sports-api.example.com',
  locale: 'en',
  // Optional host-supplied formatters for multi-currency / locale-specific
  // display. Receive the raw number; return a string. Default behaviour
  // when omitted: payouts use `Number#toFixed(2)`, odds use the truncate-
  // not-round convention from `formatDisplayOdds`.
  formatStake: (n) => new Intl.NumberFormat('pt-PT', { style: 'currency', currency: 'EUR' }).format(n),
  formatOdds:  (n) => n.toFixed(2),
}

config is the runtime configuration object. None of the keys are required for placeBetMode='event'; only bettingApiBaseUrl matters in 'api' mode (and only if placeBetEndpoint is a path rather than an absolute URL). Locale propagates to Accept-Language on the API request and to the bundled i18n.

Selection source

The betslip widget itself doesn't capture selections. It reads a single cross-widget shared envelope at goma:betslip:v3 (backed by localStorage + BroadcastChannel):

{
  selections: [{ outcomeId, bettingOfferId, eventId, eventName, marketId,
                 marketName, outcomeName, sportId, competitionId,
                 homeParticipantName, awayParticipantName, eventDate,
                 tournamentName, idfosport, venueId, venueName,
                 bettingTypeId, eventPartId }],   // identity ONLY
  activeBetslipId, stake, activeTab, acceptOddsChange,
}

Persistence model. Each persisted selection carries identity fields PLUS the last-known live state (odd, isAvailable, isLive) so a re-mount or peer hydration shows a real value immediately. The betslip widget's own per-instance WAMP subscription (useBetslipSelectionsSubscription + useBetslipOddsSync) refreshes those fields on the next tick. Pure UI flash flags (priceUp, priceDown) are NEVER serialised — the component derives its own up/down indicator from a local watch on selection.odd. Selection-row flicker is prevented by updates.js no longer pushing stale isAvailable from the events-horizontal pipeline — leaving the betslip widget's WAMP feed as the single authoritative writer for live fields.

Role separation under one key. Events-horizontal calls useSharedBetslipSync({ subscribeToState: false }): it neither reads nor writes the slip-state fields (stake / activeTab / acceptOddsChange), and its selections-out write spreads ...shared.value so peer-written state survives. The betslip widgets read AND write the full envelope.

Tapping an odd in events-horizontal calls betslipStore.addSelection(…) which writes the new selection (identity only) into the envelope. This widget's useSharedBetslipSync applies the inbound change into its local Pinia and the panel re-renders. Live odds + availability for that selection arrive a moment later via this widget's own WAMP feed; until the first tick lands, peer-driven rows render the placeholder (-) for odds. The widget also listens on window for goma:outcome-select (composed events bubble out of any shadow root), so a host can populate the slip from a custom UI without <goma-events-horizontal> on the page.

A one-shot migration runs on first widget mount in any tab — older goma:betslip:v2 envelopes (full shape) and the short-lived goma:betslip-selections:v1 + goma:betslip-state:v1 split are merged into v3 (transient flash flags stripped on the way in; identity + last-known live state preserved) and the legacy entries deleted. Idempotent across tabs.

Live odds

The widget opens its own WAMP subscription per instance — independent of <goma-events-horizontal>. When config.socketUrl/config.socketRealm is set, it watches the active betslip's selections and registers a single topic keyed on the current set of bettingOfferIds. The default URL shape:

/<sportsNamespace>/<ucsOperatorId>/<lang>/bettingOffers/<id1>,<id2>,...

The subscription re-keys whenever the slip's selection set changes. On dump and update the per-instance betting.bettingOffers store is patched; useBetslipOddsSync's deep watcher then rewrites each matching selection's odd/priceUp/priceDown/isAvailable. Without socketUrl the widget still mounts and placeBet still works against the snapshot prices captured at addSelection time.

Place-bet transport

Two modes, controlled by placeBetMode:

Mode Behaviour

'event' (default) Emits goma:place-bet-request with the payload, then resolves with a mock receipt after ~300 ms (slip cleared, goma:bet-placed fires). The host integrates its own backend by listening to goma:place-bet-request — the mock receipt keeps the UI honest while you wire the real call.

'api' POSTs the payload to placeBetEndpoint (absolute URL or path resolved against config.bettingApiBaseUrl). Adds Content-Type: application/json + Accept: application/json + Accept-Language: <locale> plus any keys from placeBetHeaders. Spreads placeBetBody into the request body so the host supplies identity (userId, username, currency, ucsOperatorId, …) without the widget knowing the provider's specifics. Treats either !response.ok or response.body.success === false as failure.

Mode	Behaviour
`'event'` (default)	Emits `goma:place-bet-request` with the payload, then resolves with a mock receipt after ~300 ms (slip cleared, `goma:bet-placed` fires). The host integrates its own backend by listening to `goma:place-bet-request` — the mock receipt keeps the UI honest while you wire the real call.
`'api'`	POSTs the payload to `placeBetEndpoint` (absolute URL or path resolved against `config.bettingApiBaseUrl`). Adds `Content-Type: application/json` + `Accept: application/json` + `Accept-Language: <locale>` plus any keys from `placeBetHeaders`. Spreads `placeBetBody` into the request body so the host supplies identity (`userId`, `username`, `currency`, `ucsOperatorId`, …) without the widget knowing the provider's specifics. Treats either `!response.ok` or `response.body.success === false` as failure.

The base request body (always included):

json

{
  "type": "SINGLE" | "MULTIPLE",
  "amount": 10,
  "oddsValidationType": "ACCEPT_ANY" | "ACCEPT_HIGHER",
  "terminalType": "DESKTOP",
  "freeBet": null,
  "ubsWalletId": null,
  "selections": [
    {
      "bettingOfferId": "…",
      "priceValue": 2.5,
      "eventId": "…",
      "marketId": "…",
      "bettingTypeId": "…",
      "outcomeId": "…",
      "betBuilderPriceValue": 3.2
    }
  ],
  "userId": "…",
  "currency": "…",
  "lang": "en",
  "ucsOperatorId": "…",
  "sessionId": "…",
  "...placeBetBody": "spread last so host can override base fields"
}

type is uppercase (SINGLE / MULTIPLE / future SYSTEM) — matches the EM place-bet/v2/bets contract.
marketId is a single string (provider-confirmed shape — not a marketIds array as some older EM samples show).
bettingTypeId is populated when the selection carries one (it travels through the cross-widget storage envelope as part of the identity fields); null otherwise.
betBuilderPriceValue only appears on legs that the provider's bettingOptionsV2 response flagged as part of a BetBuilder group; it carries the group's combined odds so the provider can score the combo correctly.
Auto-filled by the widget once useSession + useUserBalance populate the user store: userId, currency, lang, ucsOperatorId. Omitted when unpopulated so the payload doesn't lie about an unauthenticated state.
Host-supplied via placeBetBody (fields the widget can't derive from the session probe): username, userCountry, and any free-bet / wallet routing fields (freeBet, ubsWalletId).
Wire conversion: in api mode, amount (and per-leg amount in single-bet mode) is serialised as a 2-decimal string ("10.00") to match the EM contract. The in-process goma:place-bet-request event payload keeps amount as a number for host ergonomics.

Request headers (api mode)

In addition to Content-Type, Accept, and Accept-Language, the widget auto-adds:

X-SessionId: <sessionId> — when the sessionId prop is set.
userId: <userId> — when useSession has populated the user store.
X-OperatorId: <ucsOperatorId> — when config.ucsOperatorId is set.

Explicit entries in placeBetHeaders win over these auto-set values — use that to add X-SessionToken (format {userId}_{ucsOperatorId}_{random}) when your EM deployment requires it. X-SessionToken isn't returned by /v1/player/session/player so the widget can't auto-derive it.

sessionId is only present when the sessionId prop is set; otherwise the key is omitted.

The shape mirrors the Everymatrix place-bet/{ucsOperatorId}/v2/bets contract; other backends can either follow the same shape or remap on the host side via goma:place-bet-request.

Authenticated submissions

Set the sessionId prop with the user's session token to authenticate the request without having to wire it through placeBetHeaders / placeBetBody by hand:

el.placeBetMode = 'api'
el.placeBetEndpoint = '/place-bet/2838/v2/bets'
el.sessionId = currentUser.sessionId

In 'api' mode the widget adds X-SessionId: <sessionId> to the request headers automatically. In 'event' mode the same token appears on the goma:place-bet-request payload as sessionId, so a host listener can forward it to its own backend:

el.addEventListener('goma:place-bet-request', async (e) => {
  await fetch('/my/internal/bets', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-SessionId': e.detail.sessionId },
    body: JSON.stringify(e.detail),
  })
})

If the host needs a different header or body key (e.g. Authorization: Bearer …, or a backend that calls the field token), use placeBetHeaders / placeBetBody — explicit values still win over the sessionId shortcut.

Authenticated session surface

Setting sessionId does more than thread the token onto the place-bet request. When the prop is populated AND config.playerApiBaseUrl is configured, the widget:

Probes the session — GET {playerApiBaseUrl}/v1/player/session/player with header X-SessionId. The response shape { IsAuthenticated: true, UserID } populates a per-instance user store. Any failure or IsAuthenticated: false clears the session and gates everything below back off.
Fetches the user's balance — GET {playerApiBaseUrl}/v2/player/{userId}/balance with X-Session-Type: others + X-SessionId. The response (a { [currency]: amount } map under totalAmount) is normalised onto the user store as balance / currency.
Opens an SSE balance stream — GET {playerApiBaseUrl}/v2/player/{userId}/information/updates. Messages of type: 'BALANCE_UPDATE_V2' trigger a balance re-fetch; messages of type: 'SESSION_EXPIRATION_V2' emit goma:session-expired and clear the session. The stream uses a fetch-based reader (not native EventSource) so the auth headers travel with the request; it reconnects with exponential backoff up to 5 attempts (1 s → 30 s).
Loads MyBets — once ucsOperatorId is set (via config.ucsOperatorId) and betsApiBaseUrl is configured, GET {betsApiBaseUrl}/bets-api/v1/{ucsOperatorId}/open-bets (or /settled-bets for the won / cashout / settled tabs) populates the user's bet history on the betting store. Active tab is settable via useMyBets().setActiveTab('won' | 'cashout' | 'settled' | 'open'). Auto-reloads on login and after every successful place-bet. Cursor paging: the first request uses placedBefore=now()&limit=20; subsequent pages fire via useMyBets().loadMore() and send placedBefore=<oldest placedDate seen>. A short page (response shorter than limit) marks the tab as exhausted (hasMore=false) so further requests no-op.
Resolves BetBuilder grouping — when 2+ selections share an eventId, the widget calls the provider's bettingOptionsV2 RPC to fetch combined odds + combinability metadata. Selections whose bettingOfferId is not in the combinable set get isCombinable: false and the place-bet button is gated with placeBetBlockedReason: 'place_bet_blocked_incompatible'. The betBuilderPriceValue per leg is appended to the place-bet payload so the provider scores the combo correctly. Falls back gracefully when the resolved provider adapter doesn't expose getBettingOptions — combinability stays at its default (true) and grouping degrades to "the same event isn't combined server-side".

Reactive state (balance, currency, MyBets list, BetBuilder groups, combinability) lands on the user / betting stores. The MyBets UI is shipped — see My Bets tab below. The accompanying balance chip + BetBuilder card surfaces consume these same stores in a follow-up.

My Bets tab

When the tab is shown, the panel header grows a second tab — My bets — alongside the existing Betslip tab. Tapping it swaps the body to a list of the user's placed bets (powered by the same useMyBets feed described above), with a sub-pill row to switch between Open / Closed / Won.

Visibility is controlled by the myBetsTab prop: 'auto' (default) shows the tab only once a sessionId is set, so anonymous embeds keep the v1 single-tab shape; 'always' shows it even without a session (it renders the empty "no open bets yet" state until the user signs in); 'never' hides it entirely.

The cards list infinite-scrolls: when the user scrolls past ~70% of the list, the panel fires useMyBets().loadMore() to fetch the next 20 older bets (cursor-paged via placedBefore) and a small spinner row renders at the bottom of the list until the page resolves. Switching tabs resets the scroll position to the top so the new tab doesn't auto-page off the previous tab's cursor.

Each bet card shows the bet meta (Multiple/Single + status, placed-at timestamp, bet ID), one card per leg (sport icon, tournament, kick-off, teams + fixture score at place-bet time, market + outcome, odds), and a footer triple (Total Odds | Bet Amount | Possible Winnings / Returned). Terminal statuses (Won / Lost / Cashed Out) get a colour-coded top strip and an appropriate payout label and tint.

Sport + flag glyphs resolve off iconBaseUrl (path icons/sports/dark_mode/{sportId}.svg) and flagBaseUrl (path {venueId}.png) — same convention as <goma-sports-navigation-horizontal> and <goma-region-filter>. Both are optional; the glyphs are omitted entirely when unset.

Required configuration

el.config = {
  apiBaseUrl: 'https://sports-api.example.com',        // existing
  bettingApiBaseUrl: 'https://sports-api.example.com', // existing — place-bet
  playerApiBaseUrl:  'https://player-api.example.com', // NEW — session + balance
  betsApiBaseUrl:    'https://bets-api.example.com',   // NEW — MyBets
  ucsOperatorId: '2838',                                // already required for place-bet path
  locale: 'en',                                         // existing — also used for X-language
}

If playerApiBaseUrl is omitted, the widget falls back to apiBaseUrl. Same for betsApiBaseUrl → bettingApiBaseUrl → apiBaseUrl. CORS is the host's responsibility — the widget makes vanilla cross-origin fetch calls; the host needs to ensure the relevant Access-Control-Allow-* headers are in place (or front the requests with a same-origin reverse proxy).

Props (HTML attributes + JS properties)

Property	Attribute	Default	Description
`open`	`open`	`false`	Programmatic open/close. Two-way: tapping the FAB flips it `true`; placing or closing flips it `false`.
`fabPosition`	`fab-position`	`'bottom-right'`	FAB anchor on the viewport. `'bottom-right'` / `'bottom-left'` / `'bottom-center'`.
`triggerIcon`	`trigger-icon`	`''`	Raw inline-SVG string used as the FAB icon. The SVG should use `fill="currentColor"` / `stroke="currentColor"` so it inherits the FAB's contrast colour; the widget sizes it to fill the icon slot. Empty (default) renders a built-in betslip glyph.
`mobileBreakpoint`	`mobile-breakpoint`	`'sm'`	Viewport width below which the dialog renders as a bottom-sheet (full-width, anchored to bottom, slide-up animation) instead of a centred modal. Tailwind token (`'sm'` 640 / `'md'` 768 / `'lg'` 1024 / `'xl'` 1280 / `'2xl'` 1536) or a raw pixel value (number `480` or string `'480px'`).
`placeBetMode`	`place-bet-mode`	`'event'`	`'event'` (default) or `'api'`. See above.
`placeBetEndpoint`	`place-bet-endpoint`	`''`	Absolute URL or path (resolved against `config.bettingApiBaseUrl`). Required when `placeBetMode='api'`.
`placeBetHeaders`	`place-bet-headers`	`{}`	JSON-encoded extra request headers (auth tokens, `X-OperatorId`). Merged on top of the default `Content-Type` / `Accept` / `Accept-Language`. For `X-SessionId` prefer the dedicated `sessionId` prop.
`placeBetBody`	`place-bet-body`	`{}`	JSON-encoded extra body fields (e.g. `{ userId, username, currency, ucsOperatorId, lang }`). Spread last so the host can override base fields.
`sessionId`	`session-id`	`''`	Authenticated-session token. When set, the widget auto-adds it as the `X-SessionId` request header (api mode) and includes it as `sessionId` on the request payload (so `goma:place-bet-request` listeners in event mode can forward it to their own backend). Explicit `placeBetHeaders['X-SessionId']` / `placeBetBody.sessionId` still win — `sessionId` is the convenience surface; the existing maps are the override hatch.
`myBetsTab`	`my-bets-tab`	`'auto'`	Controls the My bets header tab. `'auto'` shows it only once `sessionId` is set; `'always'` shows it even when anonymous (renders the empty "no open bets yet" state until a session is wired); `'never'` hides it.
`requireSession`	`require-session`	`false`	When `true`, the Place Bet button stays disabled until a `sessionId` is set (with a "Sign in to place a bet" hint), so anonymous users can't submit. Only enforced in `api` mode — a no-op in event mode, where the host submits through its own backend and handles auth itself.
`quickAddAmounts`	`quick-add-amounts`	`[10, 20, 50]`	Quick-add chip amounts rendered next to each selection's stake input in single-bet mode. JSON-encoded array on the attribute. Each value is added to the current stake on click. Empty array hides the chips entirely.
`emptyStateImage`	`empty-state-image`	`''`	URL of a host-supplied illustration rendered above the empty-state label when the slip is empty. Omit to fall back to a small emoji glyph.
`emptyStateImageAlt`	`empty-state-image-alt`	`''`	Alt text for `emptyStateImage`.
`iconBaseUrl`	`icon-base-url`	`''`	Sport-icon CDN base for MyBets cards. Resolves to `{iconBaseUrl}/icons/sports/dark_mode/{sportId}.svg`. Omit to render cards without sport glyphs.
`flagBaseUrl`	`flag-base-url`	`''`	Country-flag CDN base for MyBets cards. Resolves to `{flagBaseUrl}{venueId}.png`. Omit to render cards without flag glyphs.

Custom FAB icon

Swap the built-in betslip glyph for your own by passing a raw inline-SVG string. Use currentColor so the icon inherits the FAB's contrast colour:

el.triggerIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 4h12l-1.5 14.5a2 2 0 0 1-2 1.8H9.5a2 2 0 0 1-2-1.8L6 4z"/></svg>'

Below mobileBreakpoint the panel renders as a bottom-sheet: full-width, anchored to the viewport bottom, rounded only at the top, with a small drag-handle pill above the header (purely visual — the sheet isn't draggable yet) and a slide-up entry/exit. At or above the breakpoint, the panel is a right-anchored modal capped at 460 px / 90 dvh with a scale + fade entry/exit. The transition is live — resizing across the breakpoint while open swaps the layout without re-mounting.

Behaviour

Open / close

Tapping the FAB sets el.open = true and opens the modal.
A successful Place Bet (api or event mode) does not auto-close the modal — the receipt renders inline at the top of the panel and the user dismisses the modal explicitly. Hosts that want auto-close can listen for goma:bet-placed and call el.open = false.
Tapping the Close button, the backdrop, or pressing Escape closes the modal.
Hosts can drive open/close programmatically: el.open = true / el.open = false. Each transition emits goma:dialog-open / goma:dialog-close.

Selection count badge

The FAB renders a circular badge with the current selection count from shared storage. Counts above 99 render as 99+. The badge hides at zero.

Single vs Multiple

Same semantics as <goma-betslip-sidebar>:

Multiple (default) — one combo bet, stake × product of all odds. The shared stake field feeds the payout.
Single — N independent bets, payout Σ stake_i × odd_i. Each selection carries its own stake; quick-add chips (+10 / +20 / +50, configurable via quickAddAmounts) increment the per-selection stake. The slip-level stake is unused in single mode.

Header chrome

The panel header contains: a settings cog (left, opens a popover with the Accept odds change toggle — visible on both tabs), a clear-all trash icon (right, alongside the dialog ✕ close — betslip tab only), an underline Betslip / My bets tab strip (the My bets tab's visibility follows the myBetsTab prop — by default it renders once sessionId is set), and a segmented pill row for the bet-type tabs (Single / Multiple / System — System is a v1 placeholder, disabled). The trash icon and bet-type pill row collapse on the My bets tab so its sub-pills (Open / Closed / Won) own the header below the tab strip; the settings cog stays in place so the odds-change preference is reachable from either tab.

Live odds tick into the panel via useBetslipOddsSync; the displayed odd truncates rather than rounds (1.8695 → "1.86", never "1.87") via the shared formatDisplayOdds() helper, matching the cards.

Events

Status	Event	Detail	Emitted when
Canonical	`ready`	`{}`	Widget mounted, initial render done.
Canonical	`goma:dialog-open`	`{}`	`state.open` transitioned false → true.
Canonical	`goma:dialog-close`	`{}`	`state.open` transitioned true → false.
Canonical	`goma:outcome-deselect`	`{ bettingOfferId }`	User removed a selection from the panel via the ✕ button. Pairs with `goma:outcome-select` from `<goma-events-horizontal>`.
Canonical	`goma:bet-removed`	`{ outcomeId }`	User removed a selection from the panel. Same trigger as `goma:outcome-deselect`, dispatched in parallel for hosts that only listen on the betslip surface.
Canonical	`goma:betslip-cleared`	`{}`	User cleared the entire slip via the "Clear" action.
Canonical	`goma:stake-change`	`{ stake }`	User changed the multiple-mode stake input (footer). Storage-driven sync from a peer betslip widget does not re-emit.
Canonical	`goma:selection-stake-change`	`{ outcomeId, stake }`	User changed a per-selection stake (single-bet mode) — typing in the input or clicking a quick-add chip. Storage-driven sync from a peer betslip widget does not re-emit.
Canonical	`goma:place-bet-request`	`{ type, amount, oddsValidationType, terminalType, selections[] }`	Fires before the place-bet transport runs. In `'event'` mode this is the host's integration hook; in `'api'` mode it's an observability tap for telemetry.
Canonical	`goma:bet-placed`	`{ success, betId, type, amount, odds, possibleWinnings, selections[], placedAt, raw? }`	Bet placed successfully (api response or event-mode mock). Slip cleared, receipt stored on the panel.
Canonical	`goma:bet-failed`	`{ message, payload, status?, body? }`	Place-bet failed (HTTP error, provider `success: false`, or thrown). Slip preserved so the user can retry.
Canonical	`goma:session-expired`	`{ reason }`	The balance SSE stream received a `SESSION_EXPIRATION` / `SESSION_EXPIRATION_V2` event. Widget tore down the stream and cleared the user session. Host listens to flush its own session state (cookie / store) and prompt for re-login.
Canonical	`goma:retry`	`{}`	User clicked Retry on the error-boundary banner.
Canonical	`goma:error`	`{ message, code, component? }`	Render or runtime error caught by the boundary.
Alias	`error`	Same as `goma:error`	Dispatched in parallel.

All events bubble + composed, so they cross the Shadow DOM boundary and are observable from window.addEventListener(…).

The widget also listens for goma:outcome-select on window (composed events from any source bubble up). A host that emits goma:outcome-select directly — without <goma-events-horizontal> on the page — populates the betslip the same way. betslip.addSelection dedups on outcomeId, so events from events-horizontal aren't double-counted.

Embedding examples

Vanilla HTML — event mode (consumer integrates own backend)

html

<goma-betslip-floating id="bf"></goma-betslip-floating>
<script type="module">
  import '@gomagaming/betslip-floating'

  const el = document.getElementById('bf')
  el.placeBetMode = 'event'
  el.addEventListener('goma:place-bet-request', async (e) => {
    await fetch('/my/internal/bets', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(e.detail),
    })
  })
  el.addEventListener('goma:bet-placed', (e) => console.log('receipt', e.detail))
</script>

Vanilla HTML — api mode (Everymatrix-shaped backend)

html

<goma-betslip-floating id="bf" place-bet-mode="api"></goma-betslip-floating>
<script type="module">
  import '@gomagaming/betslip-floating'

  const el = document.getElementById('bf')
  el.config = { bettingApiBaseUrl: 'https://sports-api.example.com', locale: 'en' }
  el.placeBetEndpoint = '/place-bet/2838/v2/bets'
  el.sessionId = sessionId
  el.placeBetHeaders = { 'X-OperatorId': '2838' }
  el.placeBetBody = {
    userId: '123',
    username: 'alice',
    currency: 'EUR',
    ucsOperatorId: '2838',
    lang: 'en',
  }
  el.addEventListener('goma:bet-placed', (e) => console.log('receipt', e.detail))
  el.addEventListener('goma:bet-failed', (e) => console.error(e.detail.message))
</script>

React

jsx

import '@gomagaming/betslip-floating'
import { useEffect, useRef } from 'react'

function FloatingBetslip() {
  const ref = useRef(null)
  useEffect(() => {
    if (!ref.current) return
    ref.current.placeBetMode = 'api'
    ref.current.placeBetEndpoint = '/place-bet/2838/v2/bets'
    ref.current.sessionId = sessionId
    ref.current.placeBetBody = { userId: '123', username: 'alice', currency: 'EUR' }
    ref.current.config = { bettingApiBaseUrl: 'https://sports-api.example.com' }
  }, [])
  return <goma-betslip-floating ref={ref} fab-position="bottom-right" />
}

Vue 3

vue

<script setup>
import '@gomagaming/betslip-floating'
import { ref, onMounted } from 'vue'

const el = ref(null)
const props = defineProps(['session'])

onMounted(() => {
  el.value.placeBetMode = 'api'
  el.value.placeBetEndpoint = '/place-bet/2838/v2/bets'
  el.value.sessionId = props.session.id
  el.value.config = { bettingApiBaseUrl: 'https://sports-api.example.com' }
})
</script>

<template>
  <goma-betslip-floating
    ref="el"
    fab-position="bottom-right"
    @goma:bet-placed="(e) => console.log(e.detail)"
  />
</template>

Theming

Override CSS variables via el.theme = { … } — the prefix --goma- is added automatically.

el.theme = {
  // Footer surface (summary + place-bet button)
  backgroundPrimary: '#1f2435',
  // Panel header surface (cog/trash + tabs + bet-type pills)
  backgroundSecondary: '#252a3e',
  // Selections body surface (the scrollable selection rows)
  backgroundBetslip: '#1c2030',
  // Bet-type pill row background + per-selection odds chip + quick-add chip
  backgroundTertiary: '#1b1d2b',
  // Modal panel background — decoupled from backgroundPrimary so the host
  // (FAB area) can be transparent while the modal stays opaque.
  dialogBackground: '#03061b',
  // Divider line (between selection header and body, between tab and pills)
  separatorLine: '#3d425a',
  // FAB background + active bet-type pill background + Place-bet button background
  highlightPrimary: '#29f2ff',
  highlightPrimaryContrast: '#062225',
  // Underline under the active "Betslip" tab in the header
  highlightSecondary: '#8750ff',
  // Text + muted text + icon (cog / trash / × close icons)
  textPrimary: '#ffffff',
  textSecondary: '#8c919c',
  iconSecondary: '#8691a8',
  // Success receipt badge + error banner pills
  alertSuccess: '#21ba45',
  alertError: '#ed4f63',
  // Live indicator chip on a selection row
  liveTag: '#ff6600',
}

Token	Element
`--goma-highlightPrimary`	FAB background + active bet-type pill background + Place-bet button background (cyan in the design)
`--goma-highlightPrimaryContrast`	FAB icon + label + Place-bet text on cyan
`--goma-highlightSecondary`	Underline under the active Betslip header tab (violet in the design)
`--goma-dialogBackground`	Modal panel background (decoupled from backgroundPrimary)
`--goma-backgroundPrimary`	Footer surface (summary + place-bet)
`--goma-backgroundSecondary`	Panel header surface (cog/trash + tabs + bet-type pills)
`--goma-backgroundBetslip`	Selections body surface (the scrollable selection rows)
`--goma-backgroundTertiary`	Bet-type pill row background, per-selection odds chip, quick-add chips
`--goma-separatorLine`	Divider inside the selection card + underline of inactive header tabs
`--goma-textPrimary`	Body text — outcome name, market name, place-bet label
`--goma-textSecondary`	Secondary labels — match title, return / total-odds / possible-winnings labels
`--goma-iconSecondary`	Settings cog, trash icon, close × on each selection row
`--goma-alertSuccess` / `--goma-alertError`	Success receipt badge + error banner
`--goma-liveTag`	Live indicator chip on a selection row

i18n / Message overrides

Key	Default (en)	Used in
`betslip`	`Betslip`	Dialog accessible name, header tab label
`my_bets`	`My Bets`	My bets header tab label (visibility follows the `myBetsTab` prop)
`betslip_settings`	`Betslip Settings`	Settings cog `aria-label` + popover label
`open_betslip`	`Open Betslip`	FAB `aria-label` (with selection count appended)
`close`	`Close`	Dialog close ✕ `aria-label`
`clear_betslip`	`Clear Betslip`	Trash-icon `aria-label`
`single` / `multiple` / `system`	`Single` / `Multiple` / `System`	Bet-type pill labels (System is a disabled placeholder)
`total_odds`	`Total odds`	Summary label
`possible_winnings`	`Possible winnings`	Summary label
`stake`	`Stake`	Stake input label (multiple-mode footer; per-selection in single mode)
`return_text`	`Return`	Per-selection return-amount label (single-bet mode)
`accept_odds_strict`	`Do not accept any changes in odds`	Settings popover — strict radio (sends `oddsValidationType: 'ACCEPT_HIGHER'`)
`accept_odds_higher`	`Approve higher odds`	Settings popover — loose radio (sends `oddsValidationType: 'ACCEPT_ANY'`)
`place_bet`	`Place Bet`	Primary action button
`loading_betslip`	`Loading betslip`	Place-bet button while in flight
`place_bet_success_title`	`Bet Successfully placed`	Success badge title
`empty_betslip_info_title`	`You don't have any selections yet.`	Empty state title
`empty_betslip_info_subtitle`	`Here are your suggested bets!`	Empty state subtitle
`live`	`Live`	Live-event chip on a selection row
`market`	`Market`	Fallback when a selection has no marketName
`remove`	`Remove`	✕ button `aria-label` per selection
`retry`	`Retry`	Error banner button

Override with config.messages:

el.config = {
  /* … */
  messages: {
    en: { open_betslip: 'View bets' },
    fr: { open_betslip: 'Voir les paris' },
    pt: { open_betslip: 'Ver apostas' },
  },
}

Accessibility

Element	Role	Attributes
FAB	`button`	`aria-haspopup="dialog"`, `aria-expanded`, `aria-label` (announces selection count)
Modal panel	`dialog` (native)	`aria-labelledby` → hidden title id
Tab strip	`tablist`	each tab has `role="tab"`, `aria-selected`
Selection ✕	`button`	`aria-label="Remove"`
Place Bet	`button`	`disabled` when `canPlaceBet` is false
Stake input	`<input type="number">`	label via wrapping `<label>`, `inputmode="decimal"`, `font-size: 16px` (iOS auto-zoom suppression)
Accept odds change	`<input type="checkbox">`	label via wrapping `<label>`

Keyboard: Tab cycles focus inside the modal; Shift+Tab cycles backward; Escape closes; Enter/Space activates the focused control. Focus trap is browser-managed (native <dialog> opened via showModal() traps Tab automatically).

iOS Safari notes

The widget reuses the same iOS-safe recipe as <goma-sports-navigation-dialog>:

Symptom on iOS	Solution
Inputs under 16 px trigger an auto-zoom	Stake input has inline `font-size: 16px`.
Native `<dialog>` focus-trap leaks across the shadow boundary	`showModal()` puts the dialog into the browser's top layer — the trap is browser-managed and works because the dialog tree is no longer anchored to the host's stacking context.
`showModal()` doesn't scroll-lock the page on iOS	`useScrollLock` from `@gomagaming/core` applied on every open.
Shadow-rooted z-index doesn't always cover sibling widgets	Native `<dialog>` top layer escapes every ancestor stacking context.
Layout flex/grid quirks on the dialog/panel root	The dialog wrapper uses `display: grid; place-items: center` to stage the panel; the visible panel itself uses `flex flex-col`.

Source layout

Layer	File
Element class	`packages/betslip-floating/src/BetslipFloatingElement.js`
App wrapper	`packages/betslip-floating/src/BetslipFloatingApp.vue`
FAB trigger	`packages/betslip-floating/src/components/BetslipFloatingTrigger.vue`
Dialog panel	`packages/betslip-floating/src/components/BetslipFloatingDialog.vue`
Per-widget CSS (FAB position + dialog motion)	`packages/betslip-floating/src/styles/dialog.css`
Entry / registration	`packages/betslip-floating/src/index.js`
Manifest	`packages/betslip-floating/custom-elements.json`

Reused from @gomagaming/sports-domain:

Layer	File
Betslip Pinia store	`packages/sports-domain/src/stores/betslip.js`
Cross-widget sync	`packages/sports-domain/src/shared-state/useSharedBetslipSync.js`
Storage schema + transient-strip helper	`packages/sports-domain/src/shared-state/betslipStorageSchema.js`
Storage migration (v2 / v1-split → v3)	`packages/sports-domain/src/shared-state/migrateBetslipStorage.js`
Live odds sync	`packages/sports-domain/src/composables/betting/useBetslipOddsSync.js`
Place-bet logic	`packages/sports-domain/src/composables/betting/useBetslipLogic.js`
Panel composite	`packages/sports-domain/src/components/Betslip/BetslipPanel.vue`
Selection item	`packages/sports-domain/src/components/Betslip/BetslipSelectionItem.vue`
Summary block	`packages/sports-domain/src/components/Betslip/BetslipSummary.vue`
Empty state	`packages/sports-domain/src/components/Betslip/BetslipEmpty.vue`

Reused from @gomagaming/core:

Layer	File
Element factory	`packages/core/src/createWidgetElement.js`
Scroll-lock composable	`packages/core/src/composables/useScrollLock.js`

goma-betslip-floating ​

Live demo ​

Install ​

Element ​

Configuration ​

Selection source ​

Live odds ​

Place-bet transport ​

Request headers (api mode) ​

Authenticated submissions ​

Authenticated session surface ​

My Bets tab ​

Required configuration ​

Props (HTML attributes + JS properties) ​

Custom FAB icon ​

Bottom-sheet vs centred modal ​

Behaviour ​

Open / close ​

Selection count badge ​

Single vs Multiple ​

Header chrome ​

Events ​

Embedding examples ​

Vanilla HTML — event mode (consumer integrates own backend) ​

Vanilla HTML — api mode (Everymatrix-shaped backend) ​

React ​

Vue 3 ​

Theming ​

Tokens used by this widget ​

i18n / Message overrides ​

Accessibility ​

iOS Safari notes ​

Source layout ​

goma-betslip-floating

Live demo

Install

Element

Configuration

Selection source

Live odds

Place-bet transport

Request headers (api mode)

Authenticated submissions

Authenticated session surface

My Bets tab

Required configuration

Props (HTML attributes + JS properties)

Custom FAB icon

Bottom-sheet vs centred modal

Behaviour

Open / close

Selection count badge

Single vs Multiple

Header chrome

Events

Embedding examples

Vanilla HTML — event mode (consumer integrates own backend)

Vanilla HTML — api mode (Everymatrix-shaped backend)

React

Vue 3

Theming

Tokens used by this widget

i18n / Message overrides

Accessibility

iOS Safari notes

Source layout