Lead Collection

Most game components (quizzes, polls, pair matching, either/or) accept a leads prop. When provided, a lead capture form is rendered as part of the journey — either before the user can play or after they finish.

For a standalone, full-form lead capture experience, use the CollectLead component instead.

LeadsOptions

interface LeadsOptions {
  position: "before" | "after";
  fields: LeadField[];
  campaignId: string;
  campaignName: string;
  phoneCountryCode?: string;
  syncWithProfile?: boolean;
}

Field	Type	Description
`position`	`"before" \| "after"`	When the form is displayed relative to the main flow. Some components only support `"after"` — see component pages.
`fields`	`LeadField[]`	Which fields to collect. See list below.
`campaignId`	`string`	Campaign identifier — submissions are attributed to this campaign.
`campaignName`	`string`	Human-readable campaign label used in analytics and dashboards.
`phoneCountryCode`	`string`	Default country dialling code when `phoneNumber` is collected. Falls back to the value derived from `language` if omitted.
`syncWithProfile`	`boolean`	When `true`, submitted data is also written to the user's profile via the SDK. See Profile Sync.

Supported fields (`LeadField`)

type LeadField =
  | "fullName"
  | "firstName"
  | "lastName"
  | "email"
  | "gender"
  | "country"
  | "phoneCountryCode"
  | "phoneNumber";

Pick any combination. fullName is mutually informative with firstName/lastName — see profile-sync rules.

Example

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

const leads: LeadsOptions = {
  position: "before",
  fields: ["fullName", "email", "phoneNumber"],
  campaignId: "newsletter-2024",
  campaignName: "Newsletter Signup 2024",
  phoneCountryCode: "44",
  syncWithProfile: true,
};

<ClassicQuizPlay {...otherProps} leads={leads} />

Per-component support

Component	`position` support	Notes
`ClassicQuizPlay`	`before` \| `after`
`PollVote`	`before` \| `after`
`PersonalityQuizPlay`	`before` \| `after`
`MatchQuizPlay`	`before` \| `after`
`EitherOrPlay`	`before` \| `after`
`PickThePair`	`after` only

Submission flow

User fills in the form.
The component validates required fields (email regex, phone format, etc.).
The component calls sdk.leads.create(...) with the campaign and field values.
On success:
- If syncWithProfile: true, profile fields are updated. See Profile Sync.
- The user proceeds to the next stage (play, or thank-you screen).
On failure, an inline error message is shown and the user can retry.

Consents inside the lead form

When a component is also configured with consents — every game widget that renders a lead form — the lead form absorbs them: the checkboxes render inside the form above its submit button, and each consent's own position is ignored in favour of leads.position. The form is already the gate, so the user is never asked to clear two screens in a row. Ticked consents are recorded right after the lead is submitted.

EventGamePlay is the exception: it renders no lead form, so its consents always use their own gate screen or pre-submit step.

Configured consents also replace the form's built-in "I agree to the Privacy Policy and the Terms and Conditions" checkbox, which only appears when no consents are configured.

CollectLead — standalone lead-form widget with consents, custom fields, and success CTAs.
Consents — the shared ConsentDef shape and where each checkbox is rendered.
Profile Sync — sync collected data to the user's Fans United profile.