3

when the Agents are online and visitor clicks to engage an agent. If pre-chat form is configured, then it has the tendency to launch on top-left corner of the browser window.

I am trying to explore an option to open the pre-chat window in center of the browser window. i tried with both CSS/html as well as js, in the pre-chat form itself to no avail.

did anyone implement something like this? Any suggestions?

3

There is no official support to position the chat form in the Deployment API. Only available setting is to set the width and height by these API methods setChatWindowWidth and setChatWindowHeight.

To change the position of the chat window you have to override the window.open call present in deployment.js to pass left and top position.

Firstly, I made a copy of window.open() function in a variable. Then I override the window.open() function to pass the additional parameters top and left including height and width.

For calculating the left and top position I have used screen.availWidth and screen.availHeight to get the screen size.

The default and final code is provided as below.

Default Deployment Code

<script type='text/javascript' src='https://c.la2w1.salesforceliveagent.com/content/g/js/36.0/deployment.js'></script>
<script type='text/javascript'>
    /* Sets the width of the chat window */
    liveagent.setChatWindowWidth(377);

    /* Sets the height of the chat window */
    liveagent.setChatWindowHeight(468);

    <!-- Live Agent Deployment Code to initialize, replace with your org's values -->
    liveagent.init('https://d.la2w1.salesforceliveagent.com/chat', '572i00000006rlJ', '00Di0000000inoh');
</script>

Updated Deployment Code with overridden window.open method

<script type='text/javascript'>
    liveagent.init('https://d.la2w1.salesforceliveagent.com/chat', '572i00000006rlJ', '00Di0000000inoh');

    var orgOpen = window.open;
    window.open = function (url, windowName, windowFeatures) {

        /* Width of the chat window. Use your own value. */
        var chatWindowHeight=468;

        /* Height of the chat window. Use your own value. */
        var chatWindowWidth=377;

        /* Calculate the left position to keep the chatwindow in center */ 
        var left = parseInt((screen.availWidth/2) - (chatWindowWidth/2));

        /* Calculate the top position to keep the chatwindow in center */
        var top = parseInt((screen.availHeight/2) - (chatWindowHeight/2));

        /* Create the arguments for window.open method. */
        var windowFeatures = "width=" + chatWindowWidth + ",height=" + chatWindowHeight + ",status,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;

        return orgOpen(url, windowName, windowFeatures); 
    }   
</script>

Chat window appears at center of the Screen

enter image description here

  • Saroj: thanks for the quick response, greatly appreciate it. – Mubeen Qawi May 28 '16 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.