It’s easy to install the FreshChat chat widget on your website. It only takes a few minutes to start chatting with your website visitors.
To install the widget, please follow the below steps:
- Navigate to your FreshChat Admin Settings > Channels > Web Chat
- Select Web widget
- Customize the widget's appearance by choosing the colour, adding a welcome message to greet your customers, and choosing the widget position to place on your website.
- Add the Topics to categorize the conversations and connect them with the right team. Additionally, you can also add some articles under the FAQ section.
- You can choose some advanced widget configurations under the Preference section.
- Navigate to the Embed Code section and preview the widget before installing it on your website.
- Copy and paste the widget script into your website code editor's HTML section.
Note:
- You may require your technical team's assistance to install the code snippet on your website.
- You can use the same code to make the widget appear on every page or certain pages on your site, such as the billing page, login page, or contact page.
- For any advanced customization of the widget, please visit our developer's document here: https://developers.freshchat.com/web-sdk/v2/#customisation-wgt
Frequently Asked Questions:
1. Can I add the chat widget to multiple websites?:
Certainly, it is possible to utilize the widget code across various websites. However, if you wish to personalize the widget to match the specific site, it would be beneficial to create a new widget and customize it accordingly. To do so, simply click on the 'New widget' button located on the channels page.
2. I want to collect my customer's name and email before starting a conversation.
This is possible using the pre-chat form code. You can embed the code below along with your widget's tracking code to install it on your website.
You can also customize the questions in the form and change the look and feel according to your brand.
Pre-chat form code:
<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/1628939/2527989.js' chat='true'></script>Sample Pre-chat form:
3. How do I embed the widget in my Shopify Website?
The best method for embedding the widget is to install the Shopify app within your account. This approach eliminates the inconvenience of the installation process, and with just a simple click, the widget will be visible on your website.
Please navigate to your FreshChat account Admin settings > Marketplace apps > Search for Shopify > Install the app > Enter your Shopify store name > Select Inject Script.
The above steps will inject the widget script into your Shopify store, and the chat will appear.
4. Can I install the widget in multiple Shopify stores?
At present, the Shopify app is only connected to one store. Nonetheless, you may track the process of copying the widget code and inserting it into the relevant section of your Shopify code editor. We kindly suggest referring to the instructional video on how to install the widget in your Shopify store: https://share.vidyard.com/watch/pPwvcQ3EwexDRQkzgg2rvh?
4. How do I install the widget on the WordPress site?
After copying the widget code, kindly proceed to your WordPress site and navigate to the Plugins section. Install FreshChat and paste the widget code into the editor. Ensure that the option is selected and click on save changes. Thank you!
