Pre-Chat Form in Live Agent
In live Chat this is very common to collect some information about customer like name ,email and phone number. Providing that information to agent before they connect with customer will increase the agent's productivity as they won't have to ask those questions manually. With the help of Pre-Chat Form we can collect the same information for agent prior to start the chat.
Please follow below step to setup the Pre -Chat Form in Live Agent.
Step 1) Setup the live Agent
Please check below post how to configure Live Agent
PPT :- https://www.slideshare.net/AmitChaudhary112/live-agent
Step 2) Create Pre-Chat form code.
<apex:page showHeader="false">
<!-- 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);
}})();
</script>
<h1>Live Agent Pre-Chat Form</h1>
<!-- Form that gathers information from the chat visitor and sets the values to Live Agent Custom Details used later in the example -->
<form method='post' id='prechatForm'>
First name: <input type='text' name='liveagent.prechat:ContactFirstName' id='firstName' /><br />
Last name: <input type='text' name='liveagent.prechat:ContactLastName' id='lastName' /><br />
Email: <input type='text' name='liveagent.prechat:ContactEmail' id='email' /><br />
Phone: <input type='text' name='liveagent.prechat:ContactPhone' id='phone' /><br />
Issue: <input type='text' name='liveagent.prechat:CaseSubject' id='subject' /><br />
<!-- Hidden fields used to set additional custom details -->
<input type="hidden" name="liveagent.prechat:CaseStatus" value="New" /><br />
<!-- This example assumes that "Chat" was added as picklist value to the Case Origin field -->
<input type="hidden" name="liveagent.prechat:CaseOrigin" value="Chat" /><br />
<!-- This example will set the Case Record Type to a specific value for the record type configured on the org. Lookup the case record type's id on your org and set it here -->
<input type="hidden" name="liveagent.prechat:CaseRecordType" value="012D00123456789" />
<!-- Used to set the visitor's name for the agent in the Console -->
<input type="hidden" name="liveagent.prechat.name" id="prechat_field_name" />
<!-- map: Use the data from prechat form to map it to the Salesforce record's fields -->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Contact" value="FirstName,ContactFirstName;LastName,ContactLastName;Email,ContactEmail;Phone,ContactPhone" />
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="Subject,CaseSubject;Status,CaseStatus;Origin,CaseOrigin;RecordTypeId,CaseRecordType" />
<!-- doFind, doCreate and isExactMatch example for a Contact:
Find a contact whose Email exactly matches the value provided by the customer in the form
If there's no match, then create a Contact record and set it's First Name, Last Name, Email, and Phone to the values provided by the customer -->
<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" />
<!-- doCreate example for a Case: create a case to attach to the chat, set the Case Subject to the value provided by the customer and set the case's Status and Origin fields -->
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Case" value="Subject,true;Status,true;Origin,true;RecordTypeId,true" />
<!-- linkToEntity: Set the record Contact record, found/created above, as the Contact on the Case that's created -->
<input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact" value="Case,ContactId" />
<!-- showOnCreate: Open the Contact and Case records as sub-tabs to the chat for the agent in the Console -->
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" value="true" />
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" value="true" />
<!-- saveToTranscript: Associates the records found / created, i.e. Contact and Case, to the Live Chat Transcript record. -->
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact" value="ContactId" />
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case" value="CaseId" />
<!-- displayToAgent: Hides the case record type from the agent -->
<input type="hidden" name="liveagent.prechat.findorcreate.displayToAgent:CaseRecordType" value="false" />
<!-- searchKnowledge: Searches knowledge article based on the text, this assumes that Knowledge is setup -->
<input type="hidden" name="liveagent.prechat.knowledgeSearch:CaseSubject" value="true" />
<input type='submit' value='Chat Now' id='prechat_submit' onclick="setName()"/>
<!-- Set the visitor's name for the agent in the Console to first and last name provided by the customer -->
<script type="text/javascript">
function setName() {
document.getElementById("prechat_field_name").value =
document.getElementById("firstName").value + " " + document.getElementById("lastName").value;
}
</script>
<style type="text/css">
p {font-weight: bolder }
</style>
</form>
</apex:page>
Sample code :- https://developer.salesforce.com/docs/atlas.en-us.live_agent_dev.meta/live_agent_dev/live_agent_pre_chat_forms_code_sample.htmStep 3) Configure the Pre-Chat code In Live Agent
1) Go to Setup -> Customize -> Live Agent --> Chat Button & Invitations
2) Edit Button setting and add VF page in Pre-Chat Form like below screen shot
3) Click Save
Related Link
1) https://developer.salesforce.com/docs/atlas.en-us.live_agent_dev.meta/live_agent_dev/live_agent_pre_chat_forms_code_sample.htm
2) https://developer.salesforce.com/docs/atlas.en-us.live_agent_dev.meta/live_agent_dev/live_agent_pre_chat_forms.htm
Thanks
Amit Chaudhary
@amit_sfdc
