Apex Code Development You need to sign in to do that
Don't have an account?
RedmossSubC4i Live Agent - Pre Chat Form Custom Case Picklists - Display Visitor Name Before Accept Chat
I've gone through the development documentation for Live Agent and need help with the following:
Background:
We are currently using the Customer Community and have the Live Agent chat request button located inside the community.
1) Display visitor name in Chat Monitor for Engaged and Chat Requests before agent accepts the chat. Our agents want to see the person's name before they accept the chat. My current approach includes a custom controller for the visualforce page that gets the current users info.
2) Use custom picklist fields from Case object (including those with dependent picklists) on Pre Chat Form and include that data to create a new case.
3) Allow chat visitor to search for existing case number on Pre Chat Form and link to existing case if found.
It's messy, but here's what I have so far.
Background:
We are currently using the Customer Community and have the Live Agent chat request button located inside the community.
1) Display visitor name in Chat Monitor for Engaged and Chat Requests before agent accepts the chat. Our agents want to see the person's name before they accept the chat. My current approach includes a custom controller for the visualforce page that gets the current users info.
2) Use custom picklist fields from Case object (including those with dependent picklists) on Pre Chat Form and include that data to create a new case.
3) Allow chat visitor to search for existing case number on Pre Chat Form and link to existing case if found.
It's messy, but here's what I have so far.
<apex:page id="CommunityPreChatForm" docType="html-5.0" standardcontroller="Case" extensions="CommunityPreChatController" showHeader="false">
<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>
<img src="{!$Resource.Live_Agent_Logo}"/><p/>
<apex:outputText style="font-weight:bold;font-size:14px;color:#595959;padding:0 10px;" value="Chat with Technical Support"/><p/>
<div id="chatFormDiv">
<!-- Get chat visitor info and set for Live Agent -->
<form method='post' id='prechatForm'>
<apex:form>
<div style="width:600px; height:auto; float:left; text-align:left;">
<apex:outputText style="font-weight:bold;font-size:12px;color:#595959;float:left;padding:0 10px;" value="Product:"/>
<apex:inputField value="{!Case.Affected_Product__c}" styleClass="picklist" required="true"></apex:inputField>
</div><br/>
<div style="width:600px; height:auto; float:left; text-align:left;">
<apex:outputText style="font-weight:bold;font-size:12px;color:#595959;float:left;padding:0 10px;" value="Version:"/>
<apex:inputField value="{!Case.Version__c}" styleClass="picklist" required="true"></apex:inputField>
</div><br/>
<div style="width:600px; height:auto; float:left; text-align:left;">
<apex:outputText style="font-weight:bold;font-size:12px;color:#595959;float:left;padding:0 10px;" value="Category:"/>
<apex:inputField value="{!Case.Request_Type__c}" styleClass="picklist" required="true"></apex:inputField>
</div><br/>
<div style="width:600px; height:auto; float:left; text-align:left;">
<apex:outputText style="font-weight:bold;font-size:12px;color:#595959;float:left;padding:0 10px;" value="Topic:"/>
<apex:inputField value="{!Case.Problem_Type__c}" styleClass="picklist" required="true"></apex:inputField><p/>
</div><br/>
<apex:outputText style="font-weight:bold;font-size:12px;color:#595959;float:left;padding:0 10px;" value="Provide a brief describe of the issue:"/>
<apex:inputField value="{!Case.Subject}" styleClass="textarea" html-placeholder="How we can help?" required="true"></apex:inputField>
<!-- Hidden Collection Fields -->
<input type="hidden" name="liveagent.prechat:ContactFirstName" id="firstName" value="{!contactFirstName}"/>
<input type="hidden" name="liveagent.prechat:ContactLastName" id="lastName" value="{!contactLastName}"/>
<input type="hidden" name="liveagent.prechat:ContactEmail" id="email" value="{!contactEmail}"/>
<input type="hidden" name="liveagent.prechat:CaseSubject" id="subject" value="{!caseSubject}}"/>
<input type="hidden" name="liveagent.prechat:CaseDescription" id="description" value="{!Case.Description}"/>
<input type="hidden" name="liveagent.prechat:CaseStatus" value="New"/>
<input type="hidden" name="liveagent.prechat:CaseOrigin" value="Live Chat"/>
<input type="hidden" name="liveagent.prechat:CaseRecordType" value="012F0000000zp0x"/>
<input type="hidden" name="liveagent.prechat.name" id="prechat_field_name"/>
<!-- Map Contact Fields via Form -->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Contact" value="FirstName,ContactFirstName;LastName,ContactLastName;Email,ContactEmail"/>
<!-- Map Case Fields via Form -->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="Subject,CaseSubject;Status,CaseStatus;Origin,CaseOrigin;Description,CaseSubject;Request_Type__c,CaseRequestType"/>
<!-- Find Contact and Match or Create -->
<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"/>
<!-- Create Case and attach Chat Details -->
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Case" value="Subject,true;Status,true;Origin,true"/>
<!-- Link Contact to New Case -->
<input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact" value="Case,ContactId"/>
<!-- Display Contact and Case as sub-tabs in Live Agent Console -->
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" value="true"/>
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" value="true"/>
<!-- Link Chat Transcript to Contact and Case -->
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact" value="ContactId"/>
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case" value="CaseId"/>
<!-- Hide Case Record Type from Agent -->
<input type="hidden" name="liveagent.prechat.findorcreate.displayToAgent:CaseRecordType" value="false"/>
<!-- Start Chat Button -->
<p/><input type='submit' value='REQUEST A CHAT' id='prechat_sbumit' onclick="setName()"/>
</apex:form>
<!-- Set Chat Visitor name in Live Agent Console -->
<script type="text/javascript">
function setName(){
document.getElementById("prechat_field_name").value =
document.getElementById("firstName").value + " " + document.getElementById("lastName").value;
}
</script>
<!-- CSS -->
<style>
.picklist{
width:300px;
height:20px;
background: #fff;
border: 1px solid #CCCCCC;
border-radius: 5px;
margin-bottom: 5px;
padding: 0 10px;
}
select{
width:300px;
height:20px;
background: #fff;
border: 1px solid #CCCCCC;
border-radius: 5px;
margin-bottom: 5px;
padding: 0 10px;
}
.textarea{
width:450px;
height: 100px;
background: #fff;
border: 1px solid #CCCCCC;
border-radius: 5px;
margin-bottom: 5px;
padding: 0 10px;
}
</style>
<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
{
height: 50px;
width:400px;
background: #fff;
border: 1px solid #CCCCCC;
border-radius: 5px;
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>
</form>
</div>
</apex:page>
<!-- 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 />
Subject: <input type='text' name='liveagent.prechat:CaseSubject' id='subject' /><br />
<!--Case Description capture-->
Issue:<input type='text' name='liveagent.prechat:CaseDescription' id='description' /><br />
<br>
What describes you:<select id="CustomerType" name="liveagent.prechat:CustomerType" title="Customer Type">
<option value="">--None--</option>
<option value="Generic">Generic</option>
<option value="Parent">Parent</option>
<option value="Professional">Professional</option>
<option value="Trainee">Trainee</option>
<option value="Student">Student</option>
</select></br>
Case Record Type:<select id="recordTypeId" name="liveagent.prechat:CaseRecordType">
<option value="">--None--</option>
<option value="012U0000000Q3Oo">ABC</option>
<option value="012U0000000QMsx">XYZ</option>
<option value="012U0000000QuEm">PQR</option>
<option value="012U0000000QHUC">EFG</option>
</select>
<!-- Case description passed from Pre-chat form-->
<input type="hidden" name="liveagent.prechat:CaseDescription" id="description"/>
<!--Case.CustomerType[this is acustom field iour Org] passed from Pre-chat form-->
<input type="hidden" name="liveagent.prechat:CustomerType" id="CustomerType"/>
<!-- map: Use the data from prechat form to map it to the Salesforce record's fields -->
<!--Map fields to case-->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="Subject,CaseSubject;Description,CaseDescription;Status,CaseStatus;Origin,CaseOrigin;RecordTypeId,CaseRecordType;Customer_Type_new__c,CustomerType"/>
<!--docreate method-->
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Case" value="Subject,true;Description,true;Status,true;Origin,true;RecordTypeId,true;Customer_Type_new__c,true" />