[SalesForce] Way to open Pre-chat form window in the centre of the parent browser screen

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?

Best Answer

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

Related Solutions

[SalesForce] Live Agent Pre Chat Form – popup window size

Thanks to Jon Aniano ‏@jonaniano " There is an undocumented method for this (will be documented in Summer - SAFE HARBOR applies). You can use it today.

Before your "init" call in your deployment code: liveagent.setChatWindowHeight(500); liveagent.setChatWindowWidth(500);

where (500) in the example above would be your size in pixels. Hope this helps "

[SalesForce] How to setup pre-chat form in HTML to embed in customer website

You should be able to follow the steps in the Live Agent's Developers Guide and the Service Cloud Workbook's section on Live Agent for the main steps and various configurations of Live Agent. For specifically setting up a Pre-Chat form on an external site vs. on a Force.com Site page, there is not much of a difference. I've supplied sample code and other considerations, specific for configuring it for a non Force.com site.

Here is the code from the Live Agent Developer's Guide for the Pre-Chat Form with modifications to remove Visualforce functionality.

<!DOCTYPE>
<html>
<head>
<!-- This script takes the endpoint URL parameter passed from the 
     deployment page and makes it the action for the form.
     You can see the endPoint parameter in the Pre-Chat form window's URL.
-->
<script>
(function() { 
     function handlePageLoad() {
       var endpointMatcher = new RegExp("[\\?\\&]endpoint=([^&#]*)");
       document.getElementById('prechatForm').setAttribute('action',
       decodeURIComponent(endpointMatcher.exec(document.location.search)[1]));
     } if (window.addEventListener) {
         window.addEventListener('load', handlePageLoad, false);
     } else { 
         window.attachEvent('onload', handlePageLoad, false);
     }
})(); 
</script>
</head>

<body>
<h1>Pre-chat Form</h1> 
<form method='post' id='prechatForm'> 

      <!-- Creates an auto-query for a matching Contact 
           record’s  Email field based on the 
           value of the liveagent.prechat:Email field 
       -->
      Email Address: <input type='text' name='liveagent.prechat:Email' /><br /> 
      <input type="hidden" name="liveagent.prechat.query:Email" value="Contact,Contact.Email" /> 
      <input type="hidden" name="liveagent.prechat.save:Email" value="Email__c" />
      <input type='submit' value='Request Chat' id='prechat_submit'/>

</form> 
</body>
</html>

Here is the code that combines the Deployment and Button Configuration with modifications to remove Visualforce functionality (I swapped out IDs with XXXXXXs). I apologize for the formatting as it is mostly a copy and paste of the SFDC generated button and deployment code. The thing to make sure you do is supply some sort of text or something in the online and offline links so that something can be clicked.

<html>
<body>
<h1>Customer Service</h1>
<p>
Hello, and welcome to our customer service page.<br/>
Please click the link to begin a live chat session: 
<a id="liveagent_button_online_XXXXXXXXX" href="javascript://Chat" style="display: none;" onclick="liveagent.startChat('XXXXXXXX')">Online</a>
<div id="liveagent_button_offline_XXXXXXX" style="display: none;">Sorry, Offline</div>
<script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(function(){liveagent.showWhenOnline('XXXXXXXXXX', document.getElementById('liveagent_button_online_XXXXXX'));
liveagent.showWhenOffline('XXXXXXXXXX', document.getElementById('liveagent_button_offline_XXXXXXXXXXX'));
});
</script>

</p>
<script type='text/javascript' src='https://c.la2c1.salesforceliveagent.com/content/g/js/29.0/deployment.js'></script>
<script type='text/javascript'>
liveagent.init('https://d.la2c1.salesforceliveagent.com/chat', 'XXXXXXXXXX', 'XXXXXXXXX');
</script>

</body>
</html>

Some other considerations / reminders:

Fill in the Pre-Chat Form URL field in the Chat Button Customization. This is under Live Agent | Chat Buttons & Invitations in the setup menu. Don't put anything in for the Lookup field Pre-Chat Form Page since not using it.
In the Deployment make sure that you have your domain in the Permitted Domains list. This is under Live Agent | Deployments in the setup menu.
The Chat Button Code and Deployment Code should be pasted into a separate HTML page. After the user clicks the button/link/etc to open the chat window the pre-chat form will be displayed in its own page.
If you don't have any Agents marked as available, the Online link/button on the deployment page to connect will not show up, but instead the Offline link/button/text will show up. So, in testing, make sure you are logged into Salesforce with the Service Console and available (Status of Online).
If you have issues with it still showing up as Offline, try brining up something like Chrome Developer console and inspecting the request and responses being made (specifically the jsonp request). You may find something like "Domain is not whitelisted for this deployment" in the JSON response that can help troubleshooting.

I have all of this code set up in a Developer Edition and working on an external (non SFDC) site that I use for playing around, so I can vouch for it.

Best Answer

Related Solutions

[SalesForce] Live Agent Pre Chat Form – popup window size

[SalesForce] How to setup pre-chat form in HTML to embed in customer website

Related Topic