function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sathishsfdcsathishsfdc 

live agent vf page

I am creating a custom vf page for live agent so that force.com site users can login and work with live agent
But i am getting a blank page when i create a vfpage with live agent components.
Can someone please advise??
<apex:page showHeader="false">
<style>
body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
#waitingMessage { height: 100%; width: 100%; 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 label="Save Chat" />
    <liveAgent:clientChatEndButton label="End Chat" />
    <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>Please wait while you are connected to an available agent.</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 label="Send"/>
    </div>
    <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right: 67px;">
        <liveAgent:clientChatFileTransfer id="fileTransfer" fileTransferSendFileLabel="Your file has been successfully uploaded to the agent" rendered="true"/>
        
    </div>    
        
    </div>
</liveAgent:clientchat>
</div>
</apex:page>
Best Answer chosen by sathishsfdc
pconpcon
I'm assuming you are doing this in a Sandbox.  If you open up the developer tools in your browser, do you see any errors?  I know that when dealing with LiveAgent in Chrome it can throw SSL errors in non-production environments.  This is because they use wildcard SSL certs in non-production environments.  You should be able to either add an exception or whitelist the SSL cert for your session.  If you do not get any errors in your browser's dev tools, let me know.

All Answers

pconpcon
I'm assuming you are doing this in a Sandbox.  If you open up the developer tools in your browser, do you see any errors?  I know that when dealing with LiveAgent in Chrome it can throw SSL errors in non-production environments.  This is because they use wildcard SSL certs in non-production environments.  You should be able to either add an exception or whitelist the SSL cert for your session.  If you do not get any errors in your browser's dev tools, let me know.
This was selected as the best answer
sathishsfdcsathishsfdc
Thanks i got it modified