Collect Lead

Standalone lead-collection form with custom fields, consent management, branding, and a configurable success-page CTA. Use this when you want a dedicated lead-capture experience rather than the inline lead form that other game components offer.

Import

import { CollectLead } from "fansunited-frontend-components";
import { CollectLeadProps, WidgetTemplate } from "fansunited-frontend-core";

Required props

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

Optional props

Prop	Type	Description
`themeOptions`	`CustomThemeOptions`	See Theming.
`fields`	`LeadField[]`	Standard form fields to display.
`labels`	`LeadLabels`	Custom labels for every text element.
`imagePosition`	`"left" \| "right"`	`STANDARD` template only.
`defaultImagePlaceholderUrl`	`string`	Fallback image URL.
`phoneCountryCode`	`string`	Default country code for phone fields.
`syncWithProfile`	`boolean`	Write submitted data back to the user's profile. See Profile Sync.
`onSuccessCTA`	`OnSuccessCTADetails`	CTA shown on the success screen.
`customFields`	`LeadCustomField[]`	Additional form fields beyond the standard ones.
`consents`	`LeadConsent[]`	Consent checkboxes for privacy compliance.
`content`	`ContentInfo`	Content metadata for analytics attribution.
`campaign`	`CampaignInfo`	Campaign metadata for analytics attribution.
`branding`	`BrandingInfo`	Branding overrides (logos, colors, URLs).
`images`	`ImagesModel`	Image asset overrides.

Standard fields (`LeadField`)

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

Custom fields (`LeadCustomField`)

interface LeadCustomField {
  key: string;
  label: string;
  type: "input" | "textarea";
  required?: boolean;
  placeholder?: string;
}

const customFields: LeadCustomField[] = [
  {
    key: "company",
    label: "Company Name",
    type: "input",
    required: true,
    placeholder: "Enter your company name",
  },
  {
    key: "message",
    label: "Message",
    type: "textarea",
    required: false,
    placeholder: "Tell us about your needs...",
  },
];

Consents (`LeadConsent`)

interface LeadConsent {
  id: string;
  label: string;
}

const consents: LeadConsent[] = [
  { id: "marketing", label: "I agree to receive marketing communications" },
  { id: "newsletter", label: "Subscribe to our newsletter" },
];

Labels (`LeadLabels`)

Override every text element shown on the form and success screen.

const labels: LeadLabels = {
  title: "Join Our Community",
  description: "Get exclusive updates and early access to new features",
  formTitle: "Sign Up Today",
  formDescription: "Fill out the form below to get started",
  formFullNameLabel: "Full Name",
  formFullNamePlaceholder: "Enter your full name",
  formEmailLabel: "Email Address",
  formGenderLabel: "Gender",
  formGenderPlaceholder: "Select your gender",
  formCountryLabel: "Country",
  formCountryPlaceholder: "Select your country",
  formPhoneNumberLabel: "Phone Number",
  formPhoneNumberPlaceholder: "Enter your phone number",
  submitButtonLabel: "Subscribe Now",
  successTitle: "Welcome Aboard!",
  successDescription: "Thank you for joining our community. Check your email for next steps.",
  privacyPolicyUrlLabel: "Privacy Policy",
  termsAndConditionsUrlLabel: "Terms & Conditions",
  presentedByLabel: "Powered by",
};

Success CTA (`OnSuccessCTADetails`)

The same shape as SignInCTADetails / AdditionalCTADetails. Rendered on the success screen after a successful submission.

interface OnSuccessCTADetails {
  defaultLabel?: string;
  onClick?: () => void;
  url?: string | null;
  target?: LinkTargetType;
  component?: React.ReactElement | null;
}

Priority: component → onClick → url → not rendered.

const onSuccessCTA: OnSuccessCTADetails = {
  defaultLabel: "Continue to Dashboard",
  onClick: () => (window.location.href = "/dashboard"),
};

Profile sync

Set syncWithProfile={true} to write submitted values back to the user's Fans United profile. See Profile Sync.

<CollectLead
  entityId="lead-form-123"
  sdk={sdk}
  template={WidgetTemplate.STANDARD}
  language="en"
  fields={["firstName", "lastName", "email", "phoneNumber", "country", "gender"]}
  syncWithProfile
/>

Examples

Basic

<CollectLead
  entityId="lead-form-123"
  sdk={sdk}
  template={WidgetTemplate.STANDARD}
  language="en"
  fields={["fullName", "email"]}
/>

Advanced

<CollectLead
  entityId="lead-form-123"
  sdk={sdk}
  template={WidgetTemplate.OVERLAY}
  language="en"
  fields={["fullName", "email", "phoneNumber", "country"]}
  phoneCountryCode="44"
  syncWithProfile
  customFields={[
    { key: "company", label: "Company", type: "input", required: true },
  ]}
  consents={[
    { id: "marketing", label: "I agree to receive marketing emails" },
  ]}
  labels={{
    title: "Get Early Access",
    submitButtonLabel: "Join Waitlist",
    successTitle: "You're In!",
    successDescription: "We'll notify you when we launch.",
  }}
  onSuccessCTA={{
    defaultLabel: "Learn More",
    url: "https://example.com/learn-more",
    target: "_blank",
  }}
  themeOptions={{ mode: "dark" }}
/>

Import

Required props

Optional props

Standard fields (LeadField)

Custom fields (LeadCustomField)

Consents (LeadConsent)

Labels (LeadLabels)

Success CTA (OnSuccessCTADetails)