Pre Chat Form
Pre Chat Form
The widget allows you to display a Pre Chat Form to gather information from users before the chat begins. This form can be customized with a variety of fields and messages.
If your widget does not have a pre-chat form but does transfer users to a helpdesk, make sure to collect the user's name and email address during the chat. You must update the conversation object with these details before sending the "Agent Handover" event to the helpdesk. Reach out to your Solution Engineer for guidance on this process.
Form Properties
- isEnabled: Enable or disable the pre-chat form.
- welcomeMessage: A message displayed at the top of the form. You can use HTML here to style the message.
- suffixMessage: A message displayed at the bottom of the form, often used for disclaimers or links (e.g., Privacy Policy).
- fields: An array of fields, each field represents an input in the pre chat form.
Field Configuration
PrechatFormField = {
type: string; // Type of input element: text | email | select
name: string; // Field name
label: string; // Label text for the field
placeholder: string; // Placeholder text (optional)
options: [{ name: 'option1', label: 'Option 1' }]; // Options for 'select' type fields
validation: {
required: {
value: boolean; // Make the field mandatory
message: string; // Error message if not filled
},
pattern: {
value: string; // Regular expression for validating input
message: string; // Error message for pattern mismatch
},
maxLength: {
value: number; // Maximum allowed characters
message: string; // Error message if input exceeds max length
}
},
metadata: {
systemField: string; // Use 'name' or 'email' to map fields to the user's details
}
};
Example Configuration:
prechatForm: {
isEnabled: true,
welcomeMessage: '<h2>Hi, I\'m the DG bot!</h2><p>How can I help?</p>',
suffixMessage: 'By talking with us today, you accept our <a href="#">Privacy Policy</a>.',
fields: [
{
type: 'text',
name: 'name',
label: 'Enter your name',
placeholder: 'Please enter your name',
validation: {
required: { value: true, message: 'Name is required' },
maxLength: { value: 30, message: 'Name is too long' },
},
metadata: { systemField: 'name' },
},
{
type: 'email',
name: 'email',
label: 'Enter your email',
placeholder: 'Please enter your email address',
validation: {
required: { value: true, message: 'Email is required' },
pattern: {
value: '^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$',
message: 'Please enter a valid email',
}
},
metadata: { systemField: 'email' },
},
{
type: 'select',
name: 'options',
label: 'Select an option',
placeholder: 'Choose...',
options: [
{ name: 'buy', label: 'Buy' },
{ name: 'sell', label: 'Sell' }
],
validation: {
required: { value: true, message: 'An option must be selected' },
}
}
]
}
Supported Input Types
- Text: Single-line text input.
- Email: Input field for email addresses, validated with a regex pattern.
- Select: Dropdown list with selectable options.
Validation Rules
Each field can have validation rules:
- Required: Determines if the field must be filled.
- Pattern: A custom regular expression to validate input.
- MaxLength: The maximum number of characters allowed.
Updated 9 days ago
What’s Next