liveAgent:clientChatQueuePosition in Salesforce Chat

<liveAgent:clientChatQueuePosition /> in Salesforce Chat can be used to show the Queue position.

 

Sample Code:

<apex:page showHeader="false">
    <style>
        #liveAgentClientChat.liveAgentStateWaiting {
        // The CSS class that is applied when the chat request is waiting to be accepted
        // See "Waiting State" screenshot below
        }
        #liveAgentClientChat {
        // The CSS class that is applied when the chat is currently engaged
        // See "Engaged State" screenshot below
        }
        #liveAgentClientChat.liveAgentStateEnded {
        // The CSS class that is applied when the chat has ended
        // See "Ended State" screenshot below
        }
        body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
        #waitingMessage {
        //height: 100%;
        //width: 100%;
        //vertical-align: middle;
            //text-align: center;
            margin-left: auto;
            margin-right: auto;
        //display: none;
        }
        #liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
        #liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
        .liveAgentChatInput {
            height: 25px;
            border-width: 1px;
            border-style: solid;
            border-color: #000;
            padding: 2px 0 2px 4px;
            background: #fff;
            display: block;
            width: 99%;
        }
        .liveAgentSendButton {
            display: block;
            width: 60px;
            height: 31px;
            padding: 0 0 3px;
            position: absolute;
            top: 0;
            right: -67px;
        }
        #liveAgentChatLog {
            width: auto;
            height: auto;
            top: 0px;
            position: absolute;
            overflow-y: auto;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .center {
          margin-left: auto;
          margin-right: auto;
          vertical-align: middle;
        }
    </style>
    <div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
        <liveAgent:clientChat>
            <liveAgent:clientChatSaveButton />
            <liveAgent:clientChatEndButton />
            <div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index:
                        0;">
                <liveAgent:clientChatAlertMessage />
                <liveAgent:clientChatStatusMessage />
                <table cellpadding="10" cellspacing="10" id="waitingMessage">
                    <tr>
                        <td colspan="2">Please wait while you are connected to an available agent.</td>
                    </tr>
                    <tr>
                        <td>Your queue position is </td>
                        <td>
                            <liveAgent:clientChatQueuePosition />
                            <style>
                            span.liveAgentQueuePosition:empty::before { content: '0'; }
                            </style>
                        </td>
                    </tr>  
                </table>
                <div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute;
                            word-wrap: break-word; z-index: 0;">
                    <liveAgent:clientChatLog />
                </div>
                <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right:
                            67px;">
                    <liveagent:clientChatInput /><liveAgent:clientChatSendButton />
                </div>
            </div>
        </liveAgent:clientChat>
    </div>
</apex:page>

Chat button configuration:

 

 

Output: