Live Agent Queue Position - hide clientChatQueuePosition in custom chat page when no users are in queue

Question

In Salesforce Live Agent, I have built a custom chat page so I can display the number of customers in the queue that are ahead of the current user while they are waiting for an agent to pick up the chat. I have successfully used the code "Number of chats ahead of you in the Queue: " in my chat page to display the number of users ahead of the current user.

But when there are no users in the queue, I need to HIDE the text that says "Number of chats ahead of you in the Queue:" because it no longer applies to the user, and also because when there are no users in the queue, the clientChatQueuePosition is BLANK, and does not display a zero.

I see an answer from Peter Thorbjørnsen that suggests using "span.liveAgentQueuePosition:empty::before { content: '1'; }" (Custom Chat Window Queue Position Conditional Message), but I do not know how to implement that (I have extremely limited html/css/javascript skills).

Can anyone tell me how to use Peter's code in a custom Visualforce page? Or tell me how to show a zero when the clientChatQueuePosition has no number?

Answer 1

<style>
    span.liveAgentQueuePosition:empty::before { content: '0'; }
</style>

You just need to wrap it with <style> since it is CSS. content allows you to do minimal text manipulation using CSS. All that is saying is "for any spans with the class liveAgentQueuePosition that are empty, insert '0' before them".

That being said, you might want to have it be 1. As an end User, I'm going to be confused or irritated that the screen is telling me there are 0 people in front of me in the Queue but I'm still looking at this screen instead of talking to an Agent.

Answer 2

<style>    
/** Hide the queue position unless waiting for chat **/
        #liveAgentClientChat.liveAgentStateWaiting #liveAgentQueuePosition { display: inline; }
        #liveAgentQueuePosition { display: none; }
</style>

Add this CSS in your custom chat page and this will hide the queue position text unless the client chat is in "chat waiting" state.