In this article, learn how to customise the Freshchat widget based on 

 - Widget appearance

 - Content in the widget

 - Visitor type and behaviour

 - Chat and user status


How to use Freshchat functions


To begin, you must copy the Freshchat script for the widget. You can access the script in your Freshchat Settings page: Settings > Installation Snippet.


Once you paste the script into your website, ensure you call Freshchat functions after the script loads onto your web page. 


These are some of the ways in which you can access Freshchat functions:


window.onload = function(){

//Freshchat functions

}



If you are using jquery,


$(window).load(function(){

//Freshchat functions

})



Or, if you’re using Onreadystatechange event,


document.onreadystatechange = function(){

if(document.readystate === ‘complete’){

//Freshchat functions

}

}


Based on widget appearance

You can choose to hide, show, maximise or minimise your Freshchat widget.


(i) Hide widget

The widget can be hidden 

- on particular pages

- when all users are offline.


On particular pages

On a discount page, for instance, the focus might be on a pop-up ad. You might not want to distract your visitor with a live chat widget here. In this case, you can use the Freshchat.hideChat() function to hide the widget on the particular page(s).


If you want to customise your web page after hiding the widget, you can refer to this sample scenario:


Hide chat code.png

Fig 1: Customise widget with hideChat function


When all users are offline

When none of your users are available for chat, you’d prefer to hide the chat window. You can use the following function in this case:


Fig 2: Hide chat when all users are offline


For a detailed description of this use case, click here.

 

Note: Even when the widget is hidden, it will appear on the visitor’s side in these two cases:

  1. When a trigger is set, and when the trigger is executed in a page where the widget is hidden,  
  2. When chat is initiated by user.


(ii) Show widget

Once you hide the widget on select page(s), you can restore the widget too. You can do this by using the Freshchat.showChat() function.


If you want to customise your web page after showing the widget, you can refer to this sample scenario:


Show widget code.png

Fig 3: Customise widget with showChat function


Note: By default, the widget always loads onto your page.

 

(iii) Maximise widget

By default, the chat widget is minimised on your web page. If you want to maximise the widget on page load/after user prompt, you can do so by using the Freshchat.maximizeChat() function.


Maximize code.png

Fig 4: Maximise your chat widget on user prompt


If you want to customise your web page after maximizing the widget, you can refer to this sample scenario:


Maximize customized code.png

Fig 5: Sample customisation using maximizeChat function


(iv) Minimise widget

After changing default setting of the widget to ‘maximise’, you can revert to minimising the widget by using the Freshchat.minimizeChat() function.


Minimize code.png

Fig 6: Minimise your chat widget


If you want to customise your web page after minimizing the widget, you can refer to this sample scenario:


Minimize customized code.png

Fig 7: Sample customization using minimizeChat function



Based on content in the widget

(i) Modify language in your Freshchat widget

Decide how you to want to use language in your widget, using the Freshchat.setWidgetProperties() function.


You can modify three types of content in your chat window: 

Parts of a chat window.png

Fig 8: Types of chat widget content you can modify


Attribute

Purpose

Sample text

online_header

Use chat widget’s header to give gist of message to visitor (for an online chat)

Hello there!

offline_header

Use chat widget’s header to give gist of message to visitor (for an offline chat)

We’re away at the moment :-(

online_welcome_msg

Welcome the visitor when your user is online

Hi, have a question? Go ahead and ask away.

getcontext_msg

Request the visitor for details like name/email/phone number/any other (if details are not already available)

Before we jump in, could you let us know your email id?

online_onhold_msg

Request the visitor to stay online when user is busy

We will be with you in a few minutes.

chat_transfer_msg

Inform the visitor that the chat is being transferred from one user to another

Christina will take over the chat now.


Note: ‘Christina’ is a variable whose value depends on the context. To make this value context-dependent, use curly brackets where user’s name is to be inserted viz. {{user name}} will take over the chat now.

end_chat_confirm_msg

Confirm end of conversation with visitor

Are you sure you want to end this chat?

missed_msg

user is online but misses the visitor’s ping

We are so sorry, we are currently unavailable :( We have all your messages, please leave us any additional details and we will get back to you by email.

missed_additional_msg

Request visitor to provide basic details for follow-up (if details are not already available)

Thanks! Can you help us with your email id so that we can get back to you?

missed_thankyou_msg

Details obtained/available; commitment made to visitor that user will revert

Thank you! We look forward to talking to you in a bit.

offline_welcome_msg

To initiate engagement with visitor when all users are offline

Hi and welcome :) Leave us a message here and we will get back to you by email.

offline_additional_msg

Request visitor to provide basic details for follow-up (if details are not already available)

Thanks! Can you help us with your email id so we can get back to you?

offline_thankyou_msg

Details obtained/available; commitment made to visitor that user will revert

Thank you! Let's talk soon.

textbox_placeholder

Directing the visitor to type a message

Type your message here

getcontext_name

Requesting for visitor’s name

Name

getcontext_email

Requesting for visitor’s email

Email

getcontext_phone

Requesting for visitor’s phone number

Phone Number

getcontext_textfield

Requesting visitor to specify subject he wishes to discuss

What subject would you like to discuss?


For screenshots on how the code and the UI look, click here.



(ii) Pass visitor information to Freshchat

Suppose a visitor has already shared their email with your website. You can set your widget to avoid asking for this detail the next time that visitor steps into your website. Instead, you can ask for other details that have been configured into your widget. This can be done using the Freshchat.setVisitorDetails() function. The following parameters can be passed:


Parameter

Purpose

name

To obtain visitor’s name

email

To obtain visitor’s email ID

phone

To obtain visitor’s phone number


Below is the format by which the parameters will be passed, along with the function: 

Prefilled code 2.png

Fig 9: setVisitorDetails function with pre-filled details 


Once visitor starts the conversation, the user can view the details in his Freshchat account.

Fig 10: Pre-filled visitor details in Freshchat


(iii) Ask for visitor details on particular pages

Using the setWidgetProperties() function and the getcontext_on attribute, you can choose the pages where you want to ask the visitor for details.


A quick piece of additional info - in your Freshchat account, under Settings > Active, you can use the Get context switch to ask for visitor details on all pages of your website.

Get context agent-side.png

Fig 11: User-side view - ‘Get context’ switch under ‘Active’ option 


If you want to ask/avoid asking for visitor’s details on particular pages, use True and False values against the getcontext_on attribute as required.

Get context code screen.png

Fig 12: Sample scenario - not asking for details on particular pages




Based on visitor type and behaviour

(i) Configure widget based on type of website visitors

Based on whether your visitor is a prospect or a customer, you can configure the widget to deliver appropriate messages.


For prospect

When a prospect steps into your website, you do not want to address him like a first-time visitor. You want him to know that you are familiar with him, and you also want to convert this prospect into a customer as quickly as possible. In this case, you can use the Freshchat.isProspect() function.


Below is a sample scenario for this function: 

Prospect code.png

Fig 13: Sending customised message to prospect


Prospect UI screen.png

Fig 14: Sending customised message to prospect - UI



For customer

If a customer steps into your website, you would want to send him a customised welcome message. In this case, you can use the Freshchat.isCustomer() function.


Below is a sample scenario for this function:

Customer code.png

Fig 15: Sending customised message to customer


Customer screen.png

Fig 16: Sending customised message to customer - UI


(ii) Find out if visitor has received your targeted message

Use the Freshchat.isTargetedMsgReceived() function. Based on the response (True or False), you can define your functionalities—such as heap analytics—to track and obtain data as required.


istargetedmsgreceived code.png

Fig 17: Checking if visitor has received targeted message




Based on chat and user status

(i) Configure widget based on chat status

Based on whether the chat is closed or in progress, you can define your functionalities accordingly.


When chat is closed

Using the Freshchat.isChatClosed() function, you can check if the chat is closed. Based on the response (True or False), you can define your functionalities, like in the below sample scenario:


ischatclosed code.png

Fig 18: Sample scenario to check for closed chat


When chat is in progress

Using the Freshchat.isChatInProgress() function, you can check if the conversation is in progress. Based on the response (True or False), you can define your functionalities, like in the below sample scenario:


ischatinprogress code.png

Fig 19: Sample scenario to check for chat in progress


(ii) Let visitor know that user is available for chat

If you want to let your visitor know that an user is available and can talk to the visitor right away, you can use the Freshchat.isUserAvailable() function.


Based on the response (True or False), you can define your functionalities like in the below sample scenario:


Fig 20: Sample scenario using Freshchat.isUserAvailable() function