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.