Display agent's & customer's images on custom chat window for Live Agent - Salesforce

Display agent's & customer's images on custom chat window for Live Agent - Salesforce

Live Agent always been a very interesting part to me especially when we talk about incorporating custom features into this.

A very interesting scenario came in front of me wherein we need to add a custom chat window for a button and need agent's image as well as customer's/visitor's image on window for better customer experience and usability.

Initially, it was very difficult to get agent's details as I was unaware where to look for it. But it is given right there in live agent documentation about a JS function that can be used directly to fetch agent's details who accepted the chat request. The name of function is : liveagent.chasitor.getDetails()

Use this getDetails JavaScript method to access custom details and chat information that have been passed through the Deployment API and Pre-Chat API and incorporate them into your Visualforce chat window.
To know more about it, please visit getDetails page in Live Agent guide.

I have created a sample page with few styling to look similar like whatsapp chat images with bubbles.

Chat Image

There are three standard events given by salesforce to listen and use chasitor.getDetails method accordingly. You can refer them in documentation.

For this particular page, I did something different. I check for message insertion event in DOM and check who added that message. It can be agent as well as visitor and displays image accordingly. below is the steps I followed for this page:

  1. Check for message insertion event in DOM.
  2. Check who added the message.
  3. If added by agent, get user id from liveagent.chasitor.getDetails method and pass this Id in RemoteAction method in controller to get smallPhotoUrl for agent.
    Note : smallPhotoUrl is standard field on User object and pick thumbnail chatter image for user

  4. Add images appropriately in positions in HTML.

JS methods & conditions used:

I check message insertion through following listener:

then , check who added the message by following condition:

Note:

  1. I have used a hard coded image url for visitor. Images for visitors can be picked if you are using community/portal or you use some custom logic to store your visitors and their details
  2. message inserted by agent has classname as 'operator' and those by visitor has classname as 'client'
    To get this full working code, Please visit this github repo. It has all logic with custom css.

Happy Coding!

Lakshay Katney Avatar

Lakshay Katney

Saleforce developer by profession but I like to work with various technologies.I blog about Force.com, Hybrid Apps, PhoneGap, AngularJS, BackboneJS, JavaScript in general. I am Angular & NodeJS fan.

Read More
Share this page
Latest 15 Posts

100%