I have a requirement to apply branding to live agent prechat, I am able to apply CSS for pre chat from as VF page is available. Once guest user click on Chat now button.. Waiting screen and chat screens appears as standard mode. I would like to modify this popup also.. Like changing allignment and text, background color change and button color change etc..

Did someone succefully implemented? if yes can you please share snippet or help me.

Thank you in Advance!!

1 Answer 1


Yes absolutely.

Follow these steps to customize your chat windows:

1/ create a visualforce page with your custom code and looking

You can refer to this page to know more about which component to use and how. https://developer.salesforce.com/docs/atlas.en-us.live_agent_dev.meta/live_agent_dev/live_agent_customizing_chat_windows.htm

an example of visualforce page (taken from the guide above) would be:

<apex:page showHeader="false">
#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;
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;
<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
<liveAgent:clientChatSaveButton />
<liveAgent:clientChatEndButton />
<div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index:
<liveAgent:clientChatAlertMessage />
<liveAgent:clientChatStatusMessage />
<table id="waitingMessage" cellpadding="0" cellspacing="0">
<td>Please wait while you are connected to an available agent.</td>
<div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute;
word-wrap: break-word; z-index: 0;">
<liveAgent:clientChatLog />
<div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right:
<liveagent:clientChatInput /><liveAgent:clientChatSendButton />

2/ create a site to host your visualforce page.

Do not forget to enable your visualforce page in this site, otherwise an authentication request will be displayed on the page.

3/ Go to customize > Live agent > Chat Buttons & Automated Invitations:

Edit the button you want to use to launch the chat window by adding the site and the visualforce you had just created. enter image description here

and that's it. if you use the template in the guide you will see something like that when you launch the chat and start typing.

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .