Components
The library ships React components, grouped below by what they do. Every component is independently importable, isolated via its own shadow root, and shares a common configuration surface (theme, language, sign-in, leads, CTAs) documented in Core Concepts.
How components are organized
| Group | Components |
|---|---|
| Quizzes & polls | ClassicQuizPlay, PollVote, PersonalityQuizPlay |
| Match & event predictions | MatchQuizPlay, EventGamePlay, Predictor |
| Engagement games | PickThePair, ChanceGame, EitherOrPlay |
| Lead capture | CollectLead |
| Community & social | Discussion |
| Standings & betting | Leaderboard, Betslip |
At-a-glance
| Component | Templates | Sign-in gated | Lead capture | Notable extras |
|---|---|---|---|---|
ClassicQuizPlay | STANDARD / SPLIT / OVERLAY | ✓ | inline | Answer explanations |
PollVote | STANDARD / SPLIT / OVERLAY | ✓ | inline | Real-time results |
PersonalityQuizPlay | STANDARD / SPLIT / OVERLAY | ✓ | inline | Persona matching, optionsLayout |
MatchQuizPlay | STANDARD / SPLIT / OVERLAY | ✓ | inline | Countdown, points, prediction details |
EventGamePlay | STANDARD / SPLIT / OVERLAY | ✓ | — | Boolean / number / enum / free input outcomes |
PickThePair | STANDARD / LANDING_PAGE / OVERLAY | — | after only | Casual & challenge modes, timer |
ChanceGame | EMBED / STANDARD / OVERLAY | — | — | Prize Wheel, Penalty Shootout, Pick One of X |
EitherOrPlay | STANDARD / OVERLAY | ✓ | inline | Standings panel |
CollectLead | STANDARD / SPLIT / OVERLAY | — | standalone | Custom fields, consents, success CTA |
Discussion | n/a (adaptive) | callback | — | Threads, reactions, reporting, sort modes |
Leaderboard | n/a | — | — | Multi-entity dropdown, "Overall" aggregation |
Predictor | n/a (multi-tab) | ✓ | — | Season-long, leagues, prizes, integrated Betslip |
Betslip | n/a (positioned) | — | — | Singleton betslipApi, bookmaker deep-link |
How to read a component page
Every component page follows the same structure:
- Import — what to import and from which package.
- Required props — the minimum to render the component.
- Optional props — everything else, with links into Core Concepts for shared props.
- Component-specific behavior — what makes this component unique.
- Examples — runnable snippets, from basic to fully configured.
Choosing the right component
- You want users to answer questions →
ClassicQuizPlay(scored) orPersonalityQuizPlay(persona match). - You want a single opinion vote →
PollVote. - You want sports predictions →
MatchQuizPlay(one fixture),EventGamePlay(custom outcomes), orPredictor(season-long with tabs). - You want a fun engagement loop →
PickThePair,ChanceGame, orEitherOrPlay. - You want to capture leads →
CollectLeadstandalone, orleadsprop on any game component. - You want comments under content →
Discussion. - You want to show rankings →
Leaderboard. - You want a sportsbook-style betslip →
Betslip, orPredictor.betslipfor the integrated version.
Shared configuration
These props look the same on every component that supports them — see Core Concepts for the full reference
