With pre-chat forms on Freshchat greet your customers with a form to collect the necessary details offering a great customer service experience on Freshchat. With pre-chat forms, you can collect information from your visitors even before the chat begins. 

You can also use Bots to collect information instead of using pre-chat forms. Bots are engaging, interactive, and help you spare your visitors and customers the trouble of manually filling pre-chat forms. To learn more about bots, click here.

If you still prefer traditional pre-chat forms over bots for your business, you can use the following code snippet. Add this code snippet inside the body tag.

Note: If you already have the Freshchat initializing code window.fcWidget.init() or window.fcSettings(), please remove it prior to adding this code. This code needs to be added inside the body tag before .

This is a sample snippet. You can modify the fields based on your requirements.

window.prechatTemplate = {
     "SubmitLabel": "Start Chat",
     "fields": {
        "0": {
           "error": "Please Enter a valid Title",
           "fieldId": "title",
           "label": "Title",
           "required": "yes",
           "type": "text"
        "1": {
           "error": "Please Enter a valid name",
           "fieldId": "name",
           "label": "Name",
           "required": "yes",
           "type": "text"
        "2": {
           "error": "Please Enter a valid Email",
           "fieldId": "email",
           "label": "Email",
           "required": "yes",
           "type": "email"
        "3": {
           "error": "Please Enter a valid Phone Number",
           "fieldId": "phone",
           "label": "Phone",
           "required": "no",
           "type": "phone"
        "4": {
           "error": "Please select an option",
           "fieldId": "plan",
           "label": "Plan",
           "options": [
           "required": "no",
           "type": "dropdown"
     "heading": "Chat with Us",
     "mainbgColor": "#0aa4db",
     "maintxColor": "#fff",
     "textBanner": "We can't wait to talk to you. But first, please take a couple of moments to tell us a bit about yourself."
  window.fcSettings = {
    onInit: function() {
  window.fcWidgetMessengerConfig = {
     config: {
        content: {
           actions: {
              tab_chat: "Chat"
           headers: {
              chat: "Chat With Us"
        cssNames: {
           expanded: "custom_fc_expanded",
           widget: "custom_fc_frame"
<script src="https://snippets.freshchat.com/js/fc-pre-chat-form-v2.js"></script>

<script src='//fw-cdn.com/1*****9/2*****9.js' chat='true'></script>

Note: Note: Navigate to Admin Settings > CRM Tracking Code > Integrate your website > Copy to get the widget code

If you have any questions or need more customizations, contact us at support@freshchat.com