Salesforce Live Agent Custom Chat Window
This is simple live agent custom chat window using the visualforce. Create a new visualforce page with below code.
<apex:page showHeader="false" standardStylesheets="false" cache="false"> <!-- Add custom CSS here --> <apex:includescript value="{!URLFOR($Resource.LiveAgentCustomResources,'/js/jquery-1.6.2.min.js')}" /> <meta id="pageViewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"/> <style type="text/css"> .clear { clear: both; } .inner-box { background-color: #FFFFFF; border-radius: 10px 10px 10px 10px; box-shadow: 0 2px 1px #C9C9C9; display: block; padding: 0; width: 684px; margin: 0 auto 80px auto; overflow: visible; z-index: 1; padding: 0 20px 20px; position: relative; height: 600px; } .chat-buttons{ list-style:none !important; } .inner-box-header h3 { font-family: DINMedium; font-size: 2.5em; color: #44Af51; font-weight: normal; margin:0; line-height:40px; text-align:center; } .button-on { background: #00bbce url(../img/button-BG.png) repeat-x; border: 1px solid #7B8589; border-radius: 5px; color: #FFFFFF !important; cursor: pointer; float: right; font-family: DINBold, helvetica, arial; font-size: 14px; letter-spacing: 0.01em; margin-top: 8px; min-width: 5px; overflow: hidden; padding: 5px 22px 7px 22px; position: relative; text-decoration: none; text-shadow: 0 -1px #838889; text-transform: uppercase; width: auto; } .button-off { background: #CCCCCC url(../img/button-grey-BG.png) repeat-x; border: 1px solid #CCCCCC; border-radius: 5px; color: #FFFFFF !important; pointer-events: none; cursor: default; float: right; font-family: DINBold, helvetica, arial; font-size: 14px; letter-spacing: 0.01em; margin-top: 8px; min-width: 5px; overflow: hidden; padding: 5px 22px 7px 22px; position: relative; text-decoration: none; text-shadow: 0 -1px #CCCCCC; text-transform: uppercase; width: auto; } input { background: none repeat scroll 0 0 #EAEEF0; border: medium none; border-radius: 5px 5px 5px 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; color: #000000; font-family: Helvetica; font-size: 12px; height: 30px; line-height: 30px; padding: 0 14px; position: relative; text-align: left; width: 95%; } .loader-container p { font-size: 14px; color: #444f51; font-family: helvetica; margin-top: 20px; } body { background: none !important; font-family: sans-serif !important; font-variant: all-petite-caps !important; font-weight: bold !important; background-color: #aab3b3 !important; font-style: italic !important; } .button-on { border: 1px solid #7B8589; border-radius: 5px; color: #FFFFFF !important; cursor: pointer; float: right; font-family: DINBold, helvetica, arial; } .button-off { border: 1px solid #CCCCCC; */ color: #FFFFFF !important; pointer-events: none; float: right; margin-top: 8px; padding: 5px 22px 7px 22px; } .loader { width: 128px; height: 128px; background: url({!URLFOR($Resource.LiveAgentCustomResources,'/img/loader.png')}) top left no-repeat; margin: 0 auto; } .loader-container p { text-align: center; } .loader-container { padding-top: 50px; } .container { border: 2px solid #dedede; background-color: #F8F8FF; border-radius: 5px; padding: 10px; margin: 10px 0; list-style:none } .darker { border-color: #ccc; background-color: #ddd; text-align: right; } .container::after { content: ""; clear: both; display: table; } .container img { float: left; max-width: 60px; width: 100%; margin-right: 20px; border-radius: 50%; } .container img.right { float: right; margin-left: 20px; margin-right:0; } </style> <!-- Top header box --> <div class="inner-box"> <ul class="inner-box-header"> <h3>Custom Chat Window </h3> </ul> <div class="inner-box-content"> <liveAgent:clientchat > <liveAgent:clientChatMessages /> <div class="loader-container"> <div id="waitingMessage" class="loader" style="background-position: -2560px 0%; "> </div> <p>Please wait for the agent to accept the chat.</p> </div> <liveAgent:clientChatLog /> <div id="chatInput"> <div class="textarea message-container" style="display: none;"> <liveagent:clientChatInput id="message" /> <label class="infield" for="{!$Component.message}" style="opacity: 0; display: none; word-wrap:break-word;">type your message here</label> </div> <liveAgent:clientChatQueuePosition/> <ul class="chat-buttons"> <li class="send-button"><liveAgent:clientChatSendButton id="sendButton" label="Send"/></li> <li class="end-button"><liveAgent:clientChatEndButton id="endButton" label="End chat"/></li> </ul> </div> </liveAgent:clientchat> </div> </div> <div class="clear"></div> <apex:includescript value="{!URLFOR($Resource.LiveAgentCustomResources,'/js/jquery.spritely-0.6.1.js')}" /> <script type="text/javascript"> $(document).ready(function(){ $('.loader').sprite({fps: 12, no_of_frames: 47}); window.elementInQuestion = $('#liveAgentClientChat'); var hasLiveAgentState = false; var hasLiveAgentStateEnded = false; function rewriteChatText(){ $('#liveAgentChatLogText').children().each(function(){ if( $(this).hasClass('operator') ){ $myname = $(this).html().match(/<strong>(.*?)<\/strong>/)[1]; $mymessage = $(this).html().replace(/<strong>(.*?)<\/strong>/,'').replace(/<STRONG>(.*?)<\/STRONG>/,''); $newItem = $('<li class="container">' + $myname + '--' + $mymessage + '</li>'); $(this).after($newItem).remove(); $("div.chat-container").scrollTop(1000000); }else if( $(this).hasClass('client') ){ $mymessage = $(this).html().replace(/<strong>(.*?)<\/strong>/,'').replace(/<STRONG>(.*?)<\/STRONG>/,''); $newItem = $('<li class="container darker">' +'<b>You :</b>'+ $mymessage + '</li>'); $(this).after($newItem).remove(); $("div.chat-container").scrollTop(1000000); } }); } function checkClass(){ if (window.elementInQuestion.hasClass('liveAgentState') && !hasLiveAgentState) { $(document).trigger('elementLiveAgentState'); hasLiveAgentState = true; } if (window.elementInQuestion.hasClass('liveAgentStateEnded') && !hasLiveAgentStateEnded) { $(document).trigger('elementLiveAgentStateEnded'); clearInterval(window.classCheckerInterval); hasLiveAgentStateEnded = true; } } window.classCheckerInterval = setInterval(checkClass, 100); window.classCheckerInterval = setInterval(rewriteChatText, 100); $(document).bind('elementLiveAgentStateEnded', function(){ $('.chat-buttons').hide(); $('.loader-container').hide(); $('.textarea.message-container').hide(); }); $(document).bind('elementLiveAgentState', function(){ $('.loader-container').hide(); $('#liveAgentChatLog').removeClass("liveAgentChatElement"); $('#liveAgentChatLog').addClass("chat-container"); $('#liveAgentChatLog').css("border", "none"); $('#liveAgentChatLog').css("height", "410px"); $('#liveAgentChatLogText').addClass("chat-container"); $('.textarea.message-container').css("display",""); $input = $("#liveAgentChatInput"); $input.attr("style", "display: block; resize: none; width: 629px; background: #F8F8FF; border-radius: 5px; height: 48px; border: 1px solid #0000FF; padding: 5px; font-size: 15px;"); $sendButton = $('span[id$="sendButton"]'); $newSendButton = $('<a href="javascript:SfdcApp.LiveAgent.Chasitor.sendMessage();" class="button-on" title="send">Send</a>'); $sendButton.after($newSendButton).remove(); $endButton = $('span[id$="endButton"]'); $newEndButton = $('<a href="javascript:SfdcApp.LiveAgent.Chasitor.endChat();" class="button-off" title="Cancel">End chat</a>'); $endButton.after($newEndButton).remove().wrapAll('<div class="buttonsRow"/>');; }); }); </script> </apex:page>
Add it the Chat buttons and automated invitation as shown below.
You can see the chat window as shown below