Looking to redesign the default custom chat widget with the customer SDK

Hi Guys,

I am trying to build a chat widget from scratch using customer SK(https://developers.livechatinc.com/docs/extending-ui/extending-chat-widget/customer-sdk/) and I have managed to do some part of area using the given example.

You can view the default sample design here: https://codesandbox.io/s/rm3prxw88n and I have rebuild here: https://esmbeta.in/chatdesign/v1/

However, I am struggling to complete the chat design and found the following issues:

  1. Predict Chat: Unable to .getPredictedAgent() is not displaying current agent details instead it shows old details.

  2. RateChat: Its gives error while clicking on rate now button ".rateChat() <=== Error: Unknown property rating.rate"

  3. Other part link, upload button, close chat etc are still left.

if you guys could help me with this custom development or any other developer can contribute to my code.

Sabir Shaikh

Hello @sabiresm,

I’ve shown this to our developers and they will be working on the solution – I’ll let you know when something comes up!
Stay tuned!

Hi there,
I was wondering if your developer had a chance to look into the issue or have a solution?

Your assistance herein is greatly appreciated.
I am willing to share my existing code to complete this custom chat design project.

Kindly, let me know what we should do further.


Sorry, for the delay, our developers have investigated the case, here are the results:

ad. 1 – The .getPredictedAgent is working fine, meaning that it provides you with the details about the current agent that was predicted for the customer. However, there are two things that you to remember:

The first one is the fact that at LiveChat, we have the returning customer mechanism, that will predict the same agent for returning visitor if the previous agent that customer spoke with is available (has got free chat slots) and is logged in with the accepting chats status). If those conditions are met, predictedAgent will return the previous agent instead of a new one.

The second thing, but I see that you have already handled it, is the fact that you need to simply make sure that the name and the URL of the agent are populated in the front of your chat widget. For example, when predictedAgent will throw the following response:

id: "c8f0e1d07d69c12c5c1e1f7648381020"
name: "Louis"
avatar: "https://cdn.livechatinc.com/cloud/?uri=https%3A%2F%2Flivechat.s3.amazonaws.com%2F8045841%2Favatars%2F185f16000345d2a47db465a443549865.jpeg"
is_bot: false
job_title: "Online Receptionist"
type: "agent"

you need to make sure that the URL of the avatar and the name will be used as the properties of his widget (front-end application).

ad.2 – We can see that you have already taken care of that, but the issue was caused due to the fact that you were using the rating.rate property which is not available in our CustomerSDK. When that happens, SDK will print the error that you provided us with in the initial request.

ad.3 – this is generally the part that there’s not much that we can do about → the elements of the chat widget, like any kind of function buttons or the looks of the chat widget, is something that should be handled by you, as those elements are the elements of the front-end application. For example, looking at the application hosted on our environment (https://codesandbox.io/s/rm3prxw88n), if you would like to change the appearance of the minimize button or delete it, you will need to edit a code or delete responsible for this particular part:

the same goes for other parts of the front-end application. So, for example, you can change the title of the widget to anything that you want:

Hope it helps! Let us know if you need more info :slight_smile: