Introduction
In this post, I am going to explain how to set Pre-Chat form to collect information from visitors and customers the pre-chat page as well.Pre-chat information can help direct chat requests more efficiently and reduce the time agents spend collecting the information themselves to resolve the cases.
Understand Pre Chat API
Use the Pre-Chat API to search for or create customer records automatically when a customer completes a pre-chat form. Here is the list of methods that you can use in pre-chat API
findOrCreate.map
Searches for or creates records that contain the customer data that’s specified in the pre-chat form that the customer completes. You can call the findOrCreate.map method as many times as necessary to find the appropriate records. You can list multiple fields and their corresponding details to map the detail values to the appropriate fields within the record as shown below .Here findOrCreate.map is maps the contact first name and last name with pre-chat form first name and last name.
<input type="hidden" name="liveagent.prechat.findorcreate.map:Contact"
value="FirstName,FirstName;LastName,LastName;Email,Email;Phone,Phone"
/>
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case"
value="Subject,chatReason;Description,TopicDetails"
/>
findOrCreate.map.doFind
Use the findOrCreate.map.doFind method to specify which fields to search against existing customer records when a customer completes a pre-chat form.Here is the code that searches the contact based on the pre-chat form email.
<input type="hidden" name="liveagent.prechat.findorcreate.map.doFind:Contact"
value="Email,true" />
findOrCreate.map.isExactMatch
Specifies which fields in your findOrCreate.map method require an exact field value match when you search for existing records.
<input type="hidden" name="liveagent.prechat.findorcreate.map.isExactMatch:Contact"
value="Email,true" />
findOrCreate.map.doCreate
Use the findOrCreate.map.doCreate method to specify which fields in findOrCreate.map method to use to create a new record if an existing record isn’t found. Specifies which fields in your findOrCreate.map method to use to create a new record if an existing record isn’t found. You can specify one or more fields for creating new records.
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Contact"
value="FirstName,true;LastName,true;Email,true;Phone,true" />
findOrCreate.saveToTranscript
Use the findOrCreate.saveToTranscript method to find or create a record and save it to the chat transcript associated with the chatSaves the record that you found or created using the findOrCreate.map.doCreate or findOrCreate.map.doFind
Pre-Chat API methods to the chat transcript associated with the chat when the chat ends.
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact"
value="ContactId" />
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case"
value="CaseId" />
findOrCreate.showOnCreate
Use the findOrCreate.showOnCreate method to find or create a record and automatically open it in a subtab in the Salesforce console.Opens the record you created using the findOrCreate.map.doCreate and findOrCreate.map.doFind Pre-Chat API methods automatically in a subtab in the to the Salesforce console.
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" value="true"
/>
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" value="true"
/>
findOrCreate.linkToEntity
Links the record you’ve found or created using the findOrCreate.map.doFind and findOrCreate.map.doCreate methods to another record of a different record type that you created using a separate findOrCreate.map API call. For example,
you can link a case record you found within your organization to a contact record you create. The findOrCreate.linkToEntity method can’t be used to populate fields on records that you create by using the findOrCreate API call. Instead, use the findOrCreate.map method to update field values on records.
<input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact"
value="Case,ContactId" />
Code
Here is the complete visualforce page. Go to developer edition and create a new visualforce page with the below code.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" title="GoBank Customer Care" cache="false">
<apex:stylesheet value="{!URLFOR($Resource.LiveAgentCustomResources,'/css/style.css')}"/>
<apex:includescript value="{!URLFOR($Resource.LiveAgentCustomResources,'/js/jquery-1.6.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/script/jquery.validate.min.js')}"/>
<style>
input
{
background: none repeat scroll 0 0 #EAEEF0;
border: medium none;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
color: #000000;
font-family: Helvetica;
font-size: 12px;
height: 30px;
line-height: 30px;
padding: 0 5px;
position: relative;
text-align: left;
width: 302px;
}
.error {
color:red !important;
}
select {
box-shadow: none;
line-height: 31px;
font-size: 13px;
border: 1px solid #B0B0B0;
border-radius: 5px 5px 5px 5px;
height: 30px;
padding: 4px 5px;
width: 643px;
background: url(../img/select-BG.png) repeat-x;
}
.input-area {
margin-bottom: 10px;
}
.input-area li {
display: inline;
position:relative;
margin-right:15px;
}
.input-area li.last-child
{
margin-right: 0 !important;
}
</style>
<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()
{
$('#prechatForm').submit();
}
$.validator.addMethod("valueNotEquals", function(value, element, arg) {
if($('[id$="LastName"]').val() != '' && $('[id$="FirstName"]').val() != '' && $('[id$="TopicDetails"]').val() != '' && $('[id$="Email"]').val() != '' && $('[id$="Phone"]').val() != '')
{
return arg != value;
}
else
{
return true;
}
}, " ");
$(document).ready(function(){
$('select').change(function() {
validateNextButton();
});
$('textarea').change(function() {
validateNextButton();
});
$('[id$="prechatForm"]').validate({
errorClass : "error",
errorPlacement : function(error, element) {
error.appendTo(element.parent().parent());
},
onkeyup : false,
ignore : ':hidden'
});
$('input[id$="FirstName"]').rules("add", {
required : true,
minlength : 2,
messages : {
required : " First Name is Required "
}
});
$('input[id$="LastName"]').rules("add", {
required : true,
minlength : 2,
messages : {
required : "Last Name is Required "
}
});
$('input[id$="Email"]').rules("add", {
required : true,
messages : {
required : " Please Enter email "
}
});
$('input[id$="Phone"]').rules("add", {
required : true,
messages : {
required : " Please Enter email"
}
});
$('select[id$="Topics"]').rules("add", {
valueNotEquals: 'chat topic',
messages : {
valueNotEquals : "Please select a topic."
}
});
$('textarea[id$="TopicDetails"]').rules("add", {
required : true,
minlength : 10,
messages : {
required : " Please enter the details about chat "
}
});
});
function validateNextButton()
{
if ($('[id$="prechatForm"]').valid())
{
$("#sendButton").removeAttr("disabled", "disabled").addClass("button-on").removeClass("button-off");
}
else $("#sendButton").attr("disabled", "disabled").addClass("button-off").removeClass("button-on");
}
function detailsClick(e,elm){
var remainingChar = 255 -(elm.value.length);
if(remainingChar >= 0){
document.getElementById('charCount').value = remainingChar;
}else{
elm.value = elm.value.substring(0,255);
document.getElementById('charCount').value = 0;
return false;
}
return true;
}
</script>
<div id="outerDiv" style="overflow:auto;">
<div class="inner-box">
<ul class="inner-box-header">
<li class="h3-container">
<h3>Pre chat Window</h3>
</li>
</ul>
<form method='post' id='prechatForm'>
<div class="inner-box-content">
<table class="input-area">
<tr>
<td>
<ul class="input-area">
<li>
<input type="text" name="liveagent.prechat:Firstname" id="FirstName" maxlength="35" placeholder="First Name" />
</li>
</ul>
</td>
<td>
<ul class="input-area">
<li class="last-child">
<input type="text" name="liveagent.prechat:Lastname" id="LastName" maxlength="35" placeholder="last name"/>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul class="input-area">
<li>
<input type="email" name="liveagent.prechat:Email" id="Email" maxlength="100" placeholder="Email"/>
</li>
</ul>
</td>
<td>
<ul class="input-area">
<li class="last-child">
<input type="phone" name="liveagent.prechat:Phone" id="Phone" maxlength="12" placeholder="Phone"/>
</li>
</ul>
</td>
</tr>
</table>
<div>
<div class="requiredInput">
<select name="liveagent.prechat:ChatReason" title="Please select a Topic" class="req" id="chatReason">
<option value="chat topic">Support On Installation</option>
<option value="Join GoBank">Knowledge Article</option>
<option value="Debit Cards">Service Maintaince</option>
<option value="Debit Cards">Refund policy for products</option>
<option value="Features">Features</option>
<option value="Feedback">Feedback</option>
</select>
</div></div>
<div class="textarea topic-container">
<div class="requiredInput">
<textarea id="TopicDetails" class="req" cols="60" data-val="true" maxlength="500" minlength="10"
name="liveagent.prechat:InquiryDetails" rows="3" style="resize: none;"
onmouseout="detailsClick(event, this);" onkeydown="detailsClick(event,this);"></textarea>
<label class="infield topic-label" for="TopicDetails">details</label>
</div>
<p class="charsRemaining">Characters Remaining: <input type="text" readonly="readonly" id="charCount" style="width:50px" value="255"/></p>
</div>
<ul class="chat-buttons send-button">
<li class="submit-button"><a id="sendButton" href="javascript: submitform()" class="button-off anton" title="send">Send</a></li>
</ul>
</div>
<!-- Pre Chat infomration to agent -->
<input type="hidden" name="liveagent.prechat.Firstname" id="FirstName" />
<input type="hidden" name="liveagent.prechat.Lastname" id="LastName" />
<input type="hidden" name="liveagent.prechat.Email" id="Email" />
<input type="hidden" name="liveagent.prechat.Phone" id="Phone" />
<input type="hidden" name="liveagent.precht.ChatReason" id="chatReason" />
<input type="hidden" name="liveagent.prechat.InquiryDetails" id="TopicDetails" />
<input type="hidden" name="liveagent.prechat.findorcreate.map:Contact"
value="FirstName,FirstName;LastName,LastName;Email,Email;Phone,Phone"
/>
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case"
value="Subject,chatReason;Description,TopicDetails"
/>
<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" />
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Contact"
value="FirstName,true;LastName,true;Email,true;Phone,true" />
<input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact"
value="Case,ContactId" />
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" value="true"
/>
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" value="true"
/>
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact"
value="ContactId" />
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case"
value="CaseId" />
<input type="hidden" name="liveagent.prechat.knowledgeSearch:CaseSubject" value="true" />
</form>
</div>
</div>
</apex:page>
Update Chat Buttons and Automated Invitations
Update the live agent chat buttons with the visualforce page that you created above as shown below.
Now if you launch the chat from the site you can able to pre-chat form that will pop up before starting the chat.
Here is result agent can see before accepting the chat.
Based on your the above pre-chat form configuration once the agent is accepting the chat salesforce is going to do the bunch of operations like searching the contacts and opening a new record creating the page and suggest the knowledge article and save it to chat transactions and etc.
Beyond Cloud 