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.

<script>
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": [
              "Sprout",
              "Blossom",
              "Garden",
              "Estate",
              "Forest"
           ],
           "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.fcPreChatform.fcWidgetInit(window.prechatTemplate);
   }
  };
  window.fcWidgetMessengerConfig = {
     config: {
        content: {
           actions: {
              tab_chat: "Chat"
           },
           headers: {
              chat: "Chat With Us"
           }
        },
        cssNames: {
           expanded: "custom_fc_expanded",
           widget: "custom_fc_frame"
        }
     }
  };
 </script>
<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