We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
We assure you that this change will not impact your product experience, and no action is required on your part.


With pre-chat forms on Freshdesk Messaging, greet your customers with a form to collect the necessary details offering a great customer service experience on Freshdesk Messaging. 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.



Note: If you already have the Freshdesk Messaging, 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 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 Freshdesk Messaging Conversation widget (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.com