Skip to main content

Pre-Chat Form

Collect visitor information before they start chatting.

Overview​

The pre-chat form appears when a visitor opens the widget for the first time:

┌─────────────────────────────────┐
│ Before we start... │
│ │
│ Name │
│ [________________________] │
│ │
│ Email* │
│ [________________________] │
│ │
│ How can we help? │
│ [________________________] │
│ │
│ [Start Chat] │
└─────────────────────────────────┘

When to Use​

Pre-chat forms are useful when:

  • You need contact info for follow-up
  • Routing conversations by topic
  • Lead generation
  • Compliance requirements (GDPR consent)

Configuration​

Enable Pre-Chat Form​

Go to Settings → Widget → Forms → Pre-Chat Form:

Enable: Yes/No
Show for: All visitors / New visitors / Returning without contact

Form Fields​

Standard Fields​

FieldTypeDescription
NameTextVisitor's name
EmailEmailEmail address
PhonePhonePhone number
MessageTextareaInitial message

Custom Fields​

Add custom fields for your needs:

TypeExample
TextCompany name
SelectDepartment dropdown
RadioInquiry type
CheckboxNewsletter opt-in

Field Settings​

For each field:

SettingOptions
LabelDisplay text
PlaceholderInput placeholder
RequiredYes/No
ValidationEmail format, phone format
Default ValuePre-filled value

Validation​

Built-in Validation​

Field TypeValidation
EmailValid email format
PhoneValid phone format
RequiredField not empty

Custom Validation​

Add custom validation rules:

{
field: 'email',
rule: 'domain',
value: '@company.com',
message: 'Please use your company email'
}

Error Display​

Validation errors appear inline:

Email*
[invalid@email]
⚠️ Please enter a valid email address

Data Handling​

Where Data Goes​

Collected information is:

  • Attached to the conversation
  • Available in customer profile
  • Synced to CRM (if connected)
  • Available to AI agents

Privacy Compliance​

For GDPR compliance:

✓ Show privacy notice
✓ Require consent checkbox
✓ Link to privacy policy

Skip Conditions​

When to Skip Form​

Skip the form when:

ConditionDescription
Returning CustomerAlready have their info
Logged InUser is authenticated
API IdentifiedFyncall.identify() was called

JavaScript Control​

Skip form programmatically:

// Pre-identify user to skip form
Fyncall.identify({
email: 'known@customer.com',
name: 'Known Customer'
});

Styling​

Form Theme​

The form inherits widget theme:

  • Background matches widget
  • Primary color for buttons
  • Consistent typography

Custom Styling​

Enterprise plans can customize:

.fyncall-prechat-form {
/* Custom styles */
}

Best Practices​

Keep It Short​

  • Only ask for essential info
  • 2-3 fields maximum
  • Required fields only when necessary

Clear Purpose​

  • Explain why you need info
  • Show privacy notice
  • Be transparent about data use

Easy to Complete​

  • Use appropriate field types
  • Provide clear labels
  • Show inline validation

Respect Privacy​

  • Don't require more than needed
  • Offer anonymous option if possible
  • Follow GDPR/CCPA guidelines

Examples​

Lead Generation Form​

Name*
Email*
Company
I'm interested in: [Dropdown: Sales, Support, Partnership]

Support Form​

Name
Email*
Order Number (optional)
Describe your issue:

Minimal Form​

Email*
[Start Chat]

Analytics​

Track form performance:

MetricDescription
Form ViewsTimes form was shown
CompletionsSuccessful submissions
AbandonmentStarted but not completed
Conversion RateCompletions / Views