After being a long time customer of LivePerson, we have switched to Salesforce.com Live Agent as we now have this included in our edition. After reading through the I felt confident we could set this all up quickly. Implementing Live Agent and being able to chat, was super easy…almost too easy.
What took a bit of time was working through creating the pre-chat form and setting up the process to create a lead if a contact record was not found.
After attempting to figure this out myself and not successfully getting the lead record to create, I went to a developer’s best friend, Google.
Between these three blogs: Live Agent Pre-Chat API , Salesforce Live Agent Review & Customization & Extending the Salesforce LiveAgent pre-chat form through javascript and VF Remoting;the developer guide, and some additional searches on javascript, I’ve created a beautiful pre-chat survey, it searches for contacts, and if not found creates a lead record and displays the new record to the agent.

The visualforce page: (replace the XXXXXXXXXXX in the apex:variable with your record id’s)

<apex:page showHeader="false" standardController="Account" extensions="LiveAgent_preChatRemoting_Con">
<apex:variable var="deploymentId" value="XXXXXXXXXXX" />
<apex:variable var="orgId" value="XXXXXXXXXXX" />
<apex:variable var="buttonId" value="XXXXXXXXXXX" />

<!-- This script takes the endpoint URL parameter passed from the deployment page and makes it the action for the form -->

<script type="text/javascript">
(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);
}})();

function SubmitForm(createLead) {

if (!createLead) { //We found a matching contact based on email provided, so DO NOT send parameters to create a new lead.
document.getElementById("optionA").value="";
document.getElementById("optionB").value="false";
}
else { //No matching contact was found, so send parameters required to create a new lead.
document.getElementById("optionA").value="FirstName,true;LastName,true;Company,true;Email,true;LeadSource,true;Phone,true;Status,true;Description,true;Rating,true;";
document.getElementById("optionB").value="true";
}
document.getElementById("prechatForm").submit();
}

function getRemoteContact()
{
var contactEmail = document.getElementById('contactEmail').value;
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.LiveAgent_preChatRemoting_Con.getcontact}', contactEmail, function(result, event){
if (event.status) {
SubmitForm(false); //contact found, don't create a lead
} else if (event.type === 'exception') {
SubmitForm(true); //contact NOT found, DO create a lead
} else {
SubmitForm(false); //unknown error, DON'T create a lead
}
},
{escape: true}
);
}
</script>
<style>
body
{
background-color:#fff;
}
#chatFormDiv
{
width:300px;
text-align:center;
padding:5px;
}
#chatHeader
{
color:#6d6d6d;
font-size:18px;
font-weight:bold;
float: center;
}
#prechat_submit
{
font-weight:bold;
float: center;
}
label
{
width:150px;
font-weight:bold;
}
input[type=text], textarea
{
width:280px;
background: #fff;
border: 1px solid #CCCCCC;
border-radius: 3px;
margin-bottom: 5px;
padding: 0 10px;
}
input[type=email]
{
height: 30px;
width:280px;
background: #fff;
border: 1px solid #CCCCCC;
border-radius: 3px;
margin-bottom: 5px;
padding: 0 10px;
}
input[type=tel]
{
height: 30px;
width:280px;
background: #fff;
border: 1px solid #CCCCCC;
border-radius: 3px;
margin-bottom: 5px;
padding: 0 10px;
}
input[type=text]
{
height: 30px;
}
textarea
{
height:140px;
padding-top: 10px;
padding-bottom: 10px;
}
.chatStatusDiv
{
display:none;
}
</style>
<div id="chatFormDiv">
<form method="post" id="prechatForm" action="https://c.la2w2.salesforceliveagent.com/content/s/chat?language=en_US#deployment_id={!deploymentId}&org_id={!orgId}&button_id={!buttonId}">

<!-- Company Log on top of the form -->
<img src="{!URLFOR($Resource.company_logo)}"/> <span id="chatHeader"></span><br/>
<hr />

<!-- Detail inputs -->
<input type="text" name="liveagent.prechat:leadFirstName" placeholder= "First Name*" onchange="javascript: document.getElementById('prechat_field').value=this.value;" required="required"/>

<input type="text" name="liveagent.prechat:leadLastName" placeholder= "Last Name*" required="required"/>

<input type="text" id="contactEmail" name="liveagent.prechat:leadEmail" placeholder= "Email*" required="required"/>

<input type="tel" name="liveagent.prechat:leadPhone" placeholder= "Phone" />

<input type="text" name="liveagent.prechat:leadCompany" placeholder= "Company" />

<textarea name="liveagent.prechat:leadDescription" placeholder= "How can we help?" ></textarea>


<!--greeting field, copies from FirstName input-->
<input type="hidden" name="liveagent.prechat.name" id='prechat_field'/>

<!--hidden fields written to the new lead-->
<input type="hidden" name="liveagent.prechat:leadStatus" value="Open" />
<input type="hidden" name="liveagent.prechat:leadSource" value="Chat" />
<input type="hidden" name="liveagent.prechat:leadRating" value="A" />

<!-- Creates an auto-query for a matching Contact record’s Email field based on the value of the liveagent.prechat:leadEmail field -->
<input type="hidden" name="liveagent.prechat.query:leadEmail" value="Contact,Contact.Email" />


<!-- Map the detail inputs to the Lead fields -->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Lead" value="FirstName,leadFirstName;LastName,leadLastName;Company,leadCompany;Email,leadEmail;LeadSource,leadSource;Phone,leadPhone;Status,leadStatus;Description,leadDescription;Rating,LeadRating;" />

<!-- Map the detail inputs to the Contact fields -->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Contact" value="FirstName,leadFirstName;LastName,leadLastName;Email,leadEmail;" />


<!-- Try to find Contact by email (exact match) -->
<input type="hidden" name="liveagent.prechat.findorcreate.map.doFind:Contact" value="Email,true;" />
<input type="hidden" name="liveagent.prechat.findorcreate.map.isExactMatch:Contact" value="Email,true;" />


<!-- Try to find the Lead by email (exact match) -->
<input type="hidden" name="liveagent.prechat.findorcreate.map.doFind:Lead" value="Email,true;" />
<input type="hidden" name="liveagent.prechat.findorcreate.map.isExactMatch:Lead" value="Email,true;" />

<!-- If the Lead is not found, then create one with the following fields set -->
<input type="hidden" id="optionA" name="liveagent.prechat.findorcreate.map.doCreate:Lead" value="FirstName,true;LastName,true;Company,true;Email,true;LeadSource,true;Phone,true;Status,true;Description,true;Rating,true;" />

<!-- Save the Lead on the Live Chat Transcript -->
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Lead" value="Lead" />

<!-- Show the Lead when it is found or created -->
<input type="hidden" id="optionB" name="liveagent.prechat.findorcreate.showOnCreate:Lead" value="true" />

<!-- Show the Contact when it is found or created -->
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" value="true" />

<input type="submit" value="Begin Chat Session" id="prechat_submit" onsubmit="return validateForm('prechatForm',javascript: getRemoteContact());"/>
</form>

</div>
</apex:page>

Results in this page:

And here is the controller:

public class LiveAgent_preChatRemoting_Con
{
public LiveAgent_preChatRemoting_Con(ApexPages.StandardController controller)
{

}
@RemoteAction
public static contact getcontact(string contactemail)
{
Contact testContact=new Contact();
testContact=[Select Id,Name from Contact where email=:contactemail limit 1];
return testContact;
}

}

I’m thankful there were such great developers that shared their code and took the time to make notes in it!

Sd