Apex Code Development You need to sign in to do that
Don't have an account?
Haystack 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.
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
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
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.
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>
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
Thank you in advance.
How can i change the avtar image logo in livechat agent in salesforce visualforce script?
<apex:page > <img id="liveagent_button_online_5734C000000Caqr" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('5734C000000Caqr')" src="https://chatbotdev-nestlewaters.cs61.force.com/HostedResources/resource/1640457314000/enter" /> <img id="liveagent_button_offline_5734C000000Caqr" style="display: none; border: 0px none; " src="https://chatbotdev-nestlewaters.cs61.force.com/HostedResources/resource/1640457357000/exit" /> <script type="text/javascript"> if (!window._laq) { window._laq = []; } window._laq.push( function(){ liveagent.showWhenOnline('5734C000000Caqr', document.getElementById('liveagent_button_online_5734C000000Caqr')); liveagent.showWhenOffline('5734C000000Caqr', document.getElementById('liveagent_button_offline_5734C000000Caqr')); } ); </script> <script type='text/javascript' src='https://c.la2-c1cs-ia5.salesforceliveagent.com/content/g/js/53.0/deployment.js'> embedded_svc.settings.avatarImgURL = "https://projects2021com-dev-ed--c.visualforce.com/resource/1640775522000/avtar?"; </script> <script type="text/javascript"> liveagent.init('https://d.la2-c1cs-ia5.salesforceliveagent.com/chat', '5724C0000008OV8', '00D4C0000001Bjk'); </script> </apex:page>