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

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.

Best Answer

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.

Related Topic