Personality Quiz Play

Personality quiz component that matches users with a persona based on their answers. Features a tabbed result interface with the top match highlighted, percentage breakdowns, and optional answer explanations.

Import

import { PersonalityQuizPlay } from "fansunited-frontend-components";
import { PersonalityQuizPlayProps, WidgetTemplate } from "fansunited-frontend-core";

Required props

Prop	Type	Description
`entityId`	`string`	Personality Quiz identifier.
`sdk`	`FansUnitedSDKModel`	SDK instance.
`template`	`WidgetTemplate`	`STANDARD`, `SPLIT`, or `OVERLAY`.
`language`	`LanguageType`	Display language.

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`showAnswerExplanations`	`boolean`	Show explanations on the results screen.
`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.
`optionsLayout`	`OptionsLayout`	Layout of the answer options. See below.
`rulesDisplay`	`RulesDisplay`	See Rules Display.

Options layout

Controls how answer options are arranged on screen:

type OptionsLayout = "twoByTwo" | "row" | "column";

Value	Layout
`twoByTwo`	2 × 2 grid (default for most personality quizzes).
`row`	Horizontal row.
`column`	Vertical stack.

Results screen

When the quiz completes, the user sees:

The top persona match highlighted (image, name, description).
Tabs for other personas with their match percentage.
(Optional, with showAnswerExplanations) per-question explanations.

Examples

Basic

<PersonalityQuizPlay
  entityId="personality-123"
  sdk={sdk}
  template={WidgetTemplate.STANDARD}
  language="en"
/>

Customized

<PersonalityQuizPlay
  entityId="personality-123"
  sdk={sdk}
  template={WidgetTemplate.OVERLAY}
  language="en"
  showAnswerExplanations
  optionsLayout="twoByTwo"
  userIsLoggedIn={false}
  signInCTA={{ defaultLabel: "Sign in to save results", onClick: openSignIn }}
  leads={{
    position: "after",
    fields: ["fullName", "email"],
    campaignId: "personality-campaign",
    campaignName: "Personality 2024",
    syncWithProfile: true,
  }}
  themeOptions={{ mode: "dark" }}
/>