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 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 </body>. |
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.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 Settings > Account Settings > Integration Settings in your web.freshchat.com account.
If you have any queries or need more customizations, contact us at support@freshchat.
