March 29, 2021

How to show Queue Position in Salesforce Chat?

Visualforce components can be used to customize the appearance and behavior of chat windows. Check the below example

Visualforce Page:
<apex:page showHeader="false">
    <style>
        body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
        #waitingMessage {
            height: 50%;
            width: 50%;
            vertical-align: middle;
            text-align: center;
            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;
        }
    </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 id="waitingMessage" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2">
                        Please wait while you are connected to an available agent.
                    </td>
                </tr>
                <tr>
                    <td>Your current Queue position is</td>
                    <td><liveAgent:clientChatQueuePosition /></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>

Use the Visualforce page in the Custom Chat Page in Chat Button.
 
 
Additional Resources:

 
Output:
 

No comments:

Post a Comment