Either/Or Play

Binary choice game. Users pick between two options across multiple rounds, with a tutorial screen, timed rounds, score tracking, and an optional standings panel on results.

Import

import { EitherOrPlay } from "fansunited-frontend-components";
import { EitherOrPlayProps, WidgetTemplate } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`entityId`	`string`	Either/Or game identifier.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`template`	`WidgetTemplate`	`STANDARD` or `OVERLAY`. (No `SPLIT`.)
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`leads`	`LeadsOptions`	See Lead Collection.
`consents`	`ConsentsConfig`	Profile consent checkboxes. See Consents and the section below.
`imagePosition`	`"left" \| "right"`	`STANDARD` template only.
`defaultImagePlaceholderUrl`	`string`	Fallback image URL.
`userIsLoggedIn`	`boolean`	Host auth state.
`signInCTA`	`SignInCTADetails`	See Sign-in CTA.
`additionalCTA`	`AdditionalCTADetails`	See Additional CTA.
`rulesDisplay`	`RulesDisplay`	See Rules Display.
`showStandings`	`boolean`	Show standings/leaderboard panel on the results screen.
`callbacks`	`EitherOrPlayCallbacks`	`onFinish` — see Callbacks.

Gameplay

Tutorial screen introduces the rules.
Rounds — each round shows two options side by side. The user picks one before the round timer expires.
Results screen displays the score and (optionally) standings vs. other participants.

Standings panel

showStandings={true} adds a leaderboard panel on the results screen showing how the user ranks vs. other participants.

<EitherOrPlay {...otherProps} showStandings />

Consents

Collect profile consents alongside the participation. The shape is the shared ConsentDef — see Consents for the full field reference and the URL tokens.

import { ConsentsConfig } from "fansunited-frontend-core";

const consents: ConsentsConfig = {
  items: [
    {
      consentId: "terms",
      body: "I accept the {{privacyPolicyUrl}} and the {{termsAndConditionsUrl}}",
      required: true,
    },
    { consentId: "marketing", body: "Send me news and offers by email", position: "after" },
  ],
};

<EitherOrPlay {...otherProps} consents={consents} />

Game configuration	Consent surface
`authRequirement: "LEAD"` + `leads.position` set	The lead form, at the lead's position — all consents, each `position` ignored
No lead form	`"before"` → the tutorial screen, whose Start button records them before the game begins; `"after"` → its own step between the last answer and the results

The "before" consents are recorded before participateInEitherOr starts the game, so the per-pair timer never runs while the checkboxes are on screen. Without ctaLabel, the tutorial keeps the game's Start label and the consent step uses its Finish label.

Examples

Basic

<EitherOrPlay
  entityId="either-or-123"
  sdk={sdk}
  template={WidgetTemplate.STANDARD}
  language="en"
/>

Customized

<EitherOrPlay
  entityId="either-or-123"
  sdk={sdk}
  template={WidgetTemplate.OVERLAY}
  language="en"
  showStandings
  userIsLoggedIn={false}
  signInCTA={{ defaultLabel: "Sign in to play", onClick: openSignIn }}
  leads={{
    position: "after",
    fields: ["fullName", "email"],
    campaignId: "either-or-campaign",
    campaignName: "Fan Preference 2024",
    phoneCountryCode: "44",
    syncWithProfile: true,
  }}
  themeOptions={{ mode: "dark" }}
/>