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 body tag.

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

<script src="https://snippets.freshchat.com/js/fc-pre-chat-form-v2.min.js"></script>
<script>
  var preChatTemplate = {
    //Form header color and Submit button color.
    mainbgColor: '#0aa4db',
    //Form Header Text and Submit button text color.
    maintxColor: '#fff',
    //Chat Form Title
    heading: 'GadgetGod',
    //Chat form Welcome Message
    textBanner: 'We can\'t wait to talk to you. But first, please take a couple of moments to tell us a bit about yourself.',
    //Submit Button Label.
    SubmitLabel: 'Start Chat',
    //Fields List - Maximum is 5
    //All the values are mandatory and the script will not work if not available.
    fields : {
      field1 : {
        //Type can be either text or title
        type: "title",
        //Label for Field Title, can be in any language
        label: "Title",
        //Field ID for Title
        fieldId: "title",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid Title"
      },
      field2 : {
        //Type for Name - Do not Change
        type: "name",
        //Label for Field Name, can be in any language
        label: "Name",
        //Default - Field ID for Name - Do Not Change
        fieldId: "name",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid name"
      },
      field3 : {
        //Type for Email - Do Not Change
        type: "email",
        //Label for Field Email, can be in any language
        label: "Email",
        //Default - Field ID for Email - Do Not Change
        fieldId: "email",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid Email"
      },
      field4 : {
        //Type for Phone - Do Not Change
        type: "phone",
        //Label for Field Phone, can be in any language
        label: "Phone",
        //Default - Field ID for Phone - Do Not Change
        fieldId: "phone",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please Enter a valid Phone Number"
      },
      field5 : {
        //Type for Dropdown
        type: "dropdown",
        //Label for Field Dropdown, can be in any language
        label: "Plan",
        //Field ID for Plan Dropdown
        fieldId: "plan",
        //Required "yes" or "no"
        required: "yes",
        //Error text to be displayed
        error: "Please select an option",
        //Options for the Dropdown field
        options: ['Sprout','Blossom','Garden','Estate','Forest']
      }
    }
  };
  window.fcSettings = {
    token: "WEB_CHAT_TOKEN",
    host: "https://wchat.freshchat.com",
    config: {
      cssNames: {
        //The below element is mandatory. Please add any custom class or leave the default.
        widget: 'custom_fc_frame',
        //The below element is mandatory. Please add any custom class or leave the default.
        expanded: 'custom_fc_expanded'
      }
    },
    onInit: function() {
      console.log('widget init');
      fcPreChatform.fcWidgetInit(preChatTemplate);
    }
  };
</script>
<script src="https://wchat.freshchat.com/js/widget.js" async></script>

In the above code, replace "WEB_CHAT_TOKEN" with Web Messenger token from Admin > Account Settings > Integration Settings in your web.freshchat.com account.

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