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.
`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.
`optionsLayout`	`OptionsLayout`	Layout of the answer options. See below.
`rulesDisplay`	`RulesDisplay`	See Rules Display.
`callbacks`	`PersonalityQuizPlayCallbacks`	`onFinish` — see Callbacks.

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.

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" },
  ],
};

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

Quiz 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"` → a gate screen shown before the questions; `"after"` → its own step between the last answer and the participation submit

Without ctaLabel, the gate uses the quiz's Start label and the step its Finish label. The last question's button reads Continue rather than Finish when an "after" consent still has to be shown.

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