Collect Lead

A dedicated widget for collecting user information and leads without requiring other content interaction.

<div
	data-component="fu-widget"
	data-content-type="collect-lead"
	data-content-id="your-lead-form-id"
	data-content-name="Newsletter Signup"
	data-lead-fields="fullName,email,phoneNumber"
	data-lead-sync-with-profile="true"
	data-campaign-id="newsletter-campaign"
	data-campaign-name="Newsletter Campaign 2024"
	data-layout-template="STANDARD"
	data-image-position="left"
	data-images='{"main":"https://example.com/image.jpg"}'
	data-branding='{"logo":"https://example.com/logo.png","link":"https://example.com"}'
	data-onsuccess-label="Continue Reading"
	data-onsuccess-url="https://example.com/thank-you"
	data-onsuccess-target="_blank"
	data-labels='{"leadTitle":"Join Our Newsletter","leadDescription":"Get the latest updates"}'
	data-custom-fields='[{"key":"interests","required":false,"label":"Interests","type":"textarea"}]'
	data-consents='[{"key":"marketing","required":true,"label":"Marketing consent","privacyPolicyUrl":"https://example.com/privacy"}]'
></div>

Configuration Attributes

Attribute	Description	Options/Format	Default
`data-content-name`	Name/title for the lead form	Any string	None
`data-lead-fields`	Fields to display in the form	Comma-separated field names	Config default
`data-lead-sync-with-profile`	Sync anonymous profiles to database after lead submission	`"true"`, `"false"`	Config default
`data-layout-template`	Visual layout of the form	`"STANDARD"`, `"SPLIT"`, `"OVERLAY"`	`"STANDARD"`
`data-image-position`	Position of images in the form	`"left"`, `"right"`	Config default
`data-images`	JSON object with image URLs	`{"main":"url","cover":"url"}`	None
`data-branding`	JSON object with branding info	`{"logo":"url","link":"url"}`	None
`data-onsuccess-label`	Success CTA button label	Any string	None
`data-onsuccess-url`	Success CTA redirect URL	Valid URL	None
`data-onsuccess-target`	Success CTA link target	`"_blank"`, `"_self"`, `"_parent"`	`"_self"`
`data-onsuccess-onclick`	Success CTA JavaScript function	JavaScript code	None
`data-labels`	JSON object with custom labels	`{"leadTitle":"text","leadCta":"text"}`	None
`data-custom-fields`	JSON array of custom form fields	Array of field objects	None
`data-consents`	JSON array of consent checkboxes	Array of consent objects	None

Features

Standalone lead collection form
Configurable form fields
Custom branding support
Success call-to-action options
Custom field support
Consent management
Multiple layout templates
Image positioning
Responsive design
Campaign tracking

Custom Fields Format

Custom fields can be added using the data-custom-fields attribute with the following format:

[
  {
    "key": "field-key",
    "required": true,
    "label": "Field Label",
    "type": "input",
    "placeholder": "Enter value"
  },
  {
    "key": "textarea-field",
    "required": false,
    "label": "Comments",
    "type": "textarea",
    "placeholder": "Enter comments"
  }
]

Consents Format

Consent checkboxes can be added using the data-consents attribute:

[
  {
    "key": "marketing",
    "required": true,
    "label": "I agree to receive marketing communications",
    "privacyPolicyUrl": "https://example.com/privacy",
    "privacyPolicyUrlLabel": "Privacy Policy",
    "termsAndConditionsUrl": "https://example.com/terms",
    "termsAndConditionsUrlLabel": "Terms and Conditions"
  }
]

📘
See Features → Lead Collection for global lead config and profile sync.