+ Start a Discussion
Haystack CertifiedHaystack Certified 

Change Live Agent Chat Window Size

Is it possible to change the size of the LIve Agent chat window when it launches from a chat button?

 

I tried this example, https://dashboard.liveagentforsalesforce.com/support/Customization/how-to/80, but could not get it to work.  If this is the correct solution, could someone post a complete example of the javascript that goes into the website?  It doesn't have to actually work, but I might be missing some kind of syntax.

 

Thanks.

Best Answer chosen by Admin (Salesforce Developers) 
Sergio.MarconySergio.Marcony

Use liveagent.setChatWindowHeight and  liveagent.setChatWindowWidth JS functions after deployment script. For example:

 

<script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(function () {
liveagent.showWhenOnline('57360000000XXXX', document.getElementById('liveagent_button_online_57360000000XXXX'));
liveagent.showWhenOffline('57360000000YYYY', document.getElementById('liveagent_button_offline_57360000000YYYY'));
});</script>
<script type="text/javascript">
liveagent.setChatWindowHeight(640);
liveagent.setChatWindowWidth(480);
</script>

All Answers

Aniruddha.ManakeshwarAniruddha.Manakeshwar

Hello Hyata,

 

You need to write your custom Visual force page for chat window (For Visitors ) and you need to update the settings for Chat button under Live Agent object (Customize --> Live Agent --> Chat buttons --> Click on particular chat button created )  then in the Cstom chat page you need to select the Visual force page created for it.
You also need to create your own Visual force page. Find the below code which i have written for custom chat page.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<apex:page showHeader="false">
<style>
#liveAgentChatLog {
border: 1px solid #000000;
height: 300px;
width: 100%;
}

#liveAgentChatElement{
width: 100%;
}
</style>

<!-- Add custom CSS here -->
<!-- The root element for the chat window. This element gets a CSS class dynamically applied
to indicate the state of the chat window. Available states are:
"liveAgentStateWaiting" - indicates that the chat has not yet been answered.
"liveAgentState" - indicates that the chat is engaged
"liveAgentStateStatusMessage" - indicates that a status message is being displayed to the
user.
"liveAgentStateEnded" - indicates that the chat has ended. -->
<liveAgent:clientchat >
<div style="background-color: #272729; height: 32px;">
<img src="http://mobileapp.softwaretestserver.com//Portals/0/Jci_logo.png"/>
</div>
<liveAgent:clientChatMessages />

<div id="chatControls" class="pod">
<liveAgent:clientChatEndButton label="End Chat" />
</div>
<liveAgent:clientChatLog />
<div id="chatInput" >
<liveagent:clientChatInput />
<liveAgent:clientChatSendButton label="Send"/>

 

 

</div>


</liveAgent:clientchat>

<!-- You can customize the window title with the js below -->
<script type="text/javascript">
document.title = "My Custom Live Chat Window";
document.getElementById("liveAgentChatInput").style.width = "90%";
</script>
</apex:page>

----------------------------------------------------------------------------------------------------------------------------

 

 Hope this helps. Let me know if you need any other deatils.

 

Thanks,
Aniruddha

 

Haystack CertifiedHaystack Certified

Thanks, but I think this changes the size of an element in the chat window.  I actually need to adjust the size of the entire  poppup window when a user clicks the button to start a chat.   Thanks.

Sergio.MarconySergio.Marcony

Use liveagent.setChatWindowHeight and  liveagent.setChatWindowWidth JS functions after deployment script. For example:

 

<script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(function () {
liveagent.showWhenOnline('57360000000XXXX', document.getElementById('liveagent_button_online_57360000000XXXX'));
liveagent.showWhenOffline('57360000000YYYY', document.getElementById('liveagent_button_offline_57360000000YYYY'));
});</script>
<script type="text/javascript">
liveagent.setChatWindowHeight(640);
liveagent.setChatWindowWidth(480);
</script>

This was selected as the best answer
Haystack CertifiedHaystack Certified
Worked great. Thank you.
krish99krish99

Hi Anirudh

 

            I am planning to create a custom chat window  i saw u r code but in that vf page where we have to insert the deployments code and button code ....plz give me one sample vf chat window page with emebeded javascript code

Brian Ko 10Brian Ko 10
That works great!  However, it does not work when I use safari from ipad. Does anyone know how to control it in safari?
Thank you in advance.