Guides

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;
}
FieldTypeDescription
position"before" | "after"When the form is displayed relative to the main flow. Some components only support "after" — see component pages.
fieldsLeadField[]Which fields to collect. See list below.
campaignIdstringCampaign identifier — submissions are attributed to this campaign.
campaignNamestringHuman-readable campaign label used in analytics and dashboards.
phoneCountryCodestringDefault country dialling code when phoneNumber is collected. Falls back to the value derived from language if omitted.
syncWithProfilebooleanWhen 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

Componentposition supportNotes
ClassicQuizPlaybefore | after
PollVotebefore | after
PersonalityQuizPlaybefore | after
MatchQuizPlaybefore | after
EitherOrPlaybefore | after
PickThePairafter only

Submission flow

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

Related

  • CollectLead — standalone lead-form widget with consents, custom fields, and success CTAs.
  • Profile Sync — sync collected data to the user's Fans United profile.