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.
`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.

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 />

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" }}
/>