12

I am setting up a Live Agent for my customer and I am very new to Salesforce. I able to setup a chat button upon clicking it will launch chat window.

Now I wanted to have pre-chat window, I search all online found that sample is in Apex Visualforce page but my customer wanted to embed this Live Agent in their website.

So can anyone guide me how to do this live agent pre-chat form in HTML? So that I could embed it in my customer website.

  • Are you asking about a web to lead form? – crmprogdev Dec 2 '13 at 16:59
  • @crmprogdev - No. In service cloud their is something called Live Agent which is a live website chat. the pre-chat form is a web form that can be filled out by the customer to give some pre-chat information to the service agent and potentially help to automatically bring up a certain record (e.g., match entered email to Contact record). – Peter Knolle Dec 2 '13 at 17:48
  • 1
    The LiveAgent developer guide has a sample on how to create a PreChat form. After you create it just plug in the URL in the LiveAgent settings on Salesforce. It can be hosted anywhere as long as web accessible. – techtrekker Dec 2 '13 at 17:53
  • i found some sample online on the PreChat form but its written in apex page. how can i put it in HTML and how do i plug the URL? sorry if i'm being rude.. i'm very new on this and i have no idea how. some step by step guide would be much much appreciated..thx – user2074703 Dec 2 '13 at 18:01
12

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.

  • Hi Peter, So I have pre-chat.html from your first sample code and chat_button.html from your second code. how should merge it? when i open my chat_button.html and click on the 'Online' it will prompt me the chat window already. where can i enter the pre-chat form details? – user2074703 Dec 3 '13 at 16:03
  • 1
    They should be separate files as you have it. They get connected through the Salesforce configuration of the Chat Button. You should fill in the Pre-Chat Form URL field with the URL of the pre-chat form, e.g., example.com/pre-chat.html. Don't fill in the Pre-Chat Form Page Lookup field. Also, make sure that your code has the correct chat button, if you have multiple chat buttons configured. – Peter Knolle Dec 3 '13 at 16:44
  • Hi Peter! Thanks again! I guess I understand how it works now! I am able to do pre-chat form with external website. Will look more into Live Agent Developer guide to modify it. :) – user2074703 Dec 3 '13 at 17:15
  • I was able to play around with the pre-chat api a lot more and wrote an article on live agent and the pre-chat api that goes in to a lot more detail. – Peter Knolle Feb 13 '14 at 0:18
  • When hosting a pre-chat form on a non-SF site (i.e. external web server) how does one configure the org IDs and other settings that hook into the correct organization and chat setup? That HTML as written provides an error, and I do not see anything in the documentation that describes how to set that up. The deployment API configures those IDs, but the pre-chat appears not to. – user6861 Oct 17 '14 at 18:17

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.