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 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.
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.
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 Freshchat 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 [email protected]
