We are trying to migrate from Classic to Lightning for supporting chats. We changed routing to Omni Channel, and chats come in, but it doesn't seem to be creating and popping a case. It is working in classic with skills based routing, and I can't seem to find any limitations in the documentation around the prechat api.
Do I need to switch to using a snap-in?
Here's the VF Component we have for the prechat form. Sorry for the wall of code, but I don't know what areas could be the issue.
<!-- PreChatPage cmp -->
<apex:component controller="LiveAgentChat">
<html>
<head>
<!-- This css library provides some styling to make the fields look nice and aligned. -->
<link href="https://du11hjcvx0uqb.cloudfront.net/dist/brandable_css/new_styles_normal_contrast/bundles/common-43d291332b.css" media="all" rel="stylesheet" />
<!-- Providing more syling to make the fields look nice and well aligned. -->
<style type="text/css">
.fieldAlign { text-align:right; display:inline-block; font-family:Arial; width:100px; font-size:large }
</style>
<script>
function init(){
//window.moveTo(0,0);
window.resizeTo(750,800) // Resizing the window. This fits the survey app on the Post Chat page's iFrame with no scrollbars.
// This sets the value that will go into the Case's Stacktrace__c field
document.getElementById("pageHost").value = window.location.hostname;
document.getElementById("chatCaseId").value = guid();
}
window.onload = init;
function guid() {
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
</script>
<script type='text/javascript' src="{!PreChatAPI}"></script>
<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);
}
})();
// This is going through the parameters we added from the LiveAgentChat page.
var detailCallback = function (details){
for (var i = 0; i < details.customDetails.length; i++) {
// This sets the value that will go into the Case's URL__c field
if(details.customDetails[i].label == 'referrer'){
document.getElementById("referrerURL").value = details.customDetails[i].value;
}
}
};
liveagent.details.preChatInit("{!LADomain}",'detailCallback');
</script>
</head>
<body>
<!-- Can't use the LiveAgentHeaderFooter vf component because it uses different margins. -->
<!-- Header -->
<div style="background-color:black; height:80px" >
<img style="position:fixed; left:25px; top:18px;" src="{!URLFOR($Resource.Live_Chat_Canvas_Logo)}" />
<h1 style="font-size:x-large; color:white; position: fixed; right:25px; top:15px; font-family:Arial">{!$Label.CanvasSupportLiveChat}</h1>
</div>
<!-- Footer -->
<div style="background-color:black; text-align:center; height:40px; position: fixed; bottom: 0; width:100%" />
<form style="margin-top:5%; text-align:center;" method="post" id="prechatForm">
<!-- Detail inputs -->
<label class="fieldAlign">{!$Label.Name}: </label><input type="text" name="liveagent.prechat:caseName" id="caseName"/><br />
<label class="fieldAlign">{!$Label.Email}: </label><input type="email" name="liveagent.prechat:caseEmail" /><br />
<label class="fieldAlign">{!$Label.Subject}: </label><input type="text" name="liveagent.prechat:caseSubject" /><br />
<label class="fieldAlign">{!$Label.Role}: </label>
<select name="liveagent.prechat:caseRole">
<option style="font-family:Arial;" value="Student">{!$Label.Student}</option>
<option style="font-family:Arial;" value="Teacher">{!$Label.Teacher}</option>
<option style="font-family:Arial;" value="Admin">{!$Label.Admin}</option>
<option style="font-family:Arial;" value="TA">{!$Label.TA}</option>
<option style="font-family:Arial;" value="Designer">{!$Label.Designer}</option>
<option style="font-family:Arial;" value="Observer">{!$Label.Observer}</option>
</select><br />
<label class="fieldAlign">{!$Label.Severity}: </label>
<select name="liveagent.prechat:caseSeverity">
<option style="font-family:Arial;" value="Just a casual question, comment, idea, suggestion...">{!$Label.CasualQuestion}</option>
<option style="font-family:Arial;" value="I need some help but it's not urgent.">{!$Label.NotUrgent}</option>
<option style="font-family:Arial;" value="Something's broken but I can work around it to get what I need done.">{!$Label.WorkAroundIt}</option>
<option style="font-family:Arial;" value="I can't get things done until I hear back from you.">{!$Label.HearBack}</option>
<option style="font-family:Arial;" value="EXTREME CRITICAL EMERGENCY!!">{!$Label.Emergency}</option>
</select><br />
<!-- These are hidden -->
<input style="display:none" type="text" name="liveagent.prechat:pageHost" id="pageHost"/><br />
<input style="display:none" type="text" name="liveagent.prechat:referrerURL" id="referrerURL"/><br />
<input style="display:none" type="text" name="liveagent.prechat:chatCaseId" id="chatCaseId" /><br />
<!-- Used to set the visitor's name for the agent in the Console -->
<input type="hidden" name="liveagent.prechat.name" id="visitor_name" />
<!-- doFind and isExactMatch for a Contact:
Find a contact whose Email exactly matches the value provided by the customer in the form
If there's no match, we don't insert a new Contact. -->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Contact" value="Email,caseEmail" />
<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" />
<!-- Create Case -->
<input type="hidden" name="liveagent.prechat:caseOrigin" value="LiveChat" />
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="Origin,caseOrigin;Subject,caseSubject;SuppliedName,caseName;canvas_user_name__c,caseName;SuppliedEmail,caseEmail;requester_role_new__c,caseRole;User_Perceived_Severity__c,caseSeverity;Stacktrace__c,pageHost;URL__c,referrerURL;ChatCaseId__c,chatCaseId" />
<!-- linkToEntity: Set the Contact record, if one was found above, as the Contact on the Case that's created -->
<input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact" value="Case,ContactId" />
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Case" value="Origin,true;Subject,true;SuppliedName,true;canvas_user_name__c,true;SuppliedEmail,true;requester_role_new__c,true;User_Perceived_Severity__c,true;Stacktrace__c,true;URL__c,true;ChatCaseId__c,true;" />
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case" value="Case" />
<!-- 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:Case" value="true" />
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" 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:Case" value="CaseId" />
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact" value="ContactId" />
<input style="padding: 10px 24px; font-size:large; font-family:Arial; border-radius:8px; background-color:black; color:white" type="submit" value="{!$Label.StartChat}" id="prechat_submit" onclick="setName()"/>
<script type="text/javascript">
function setName() {
document.getElementById("visitor_name").value =
document.getElementById("caseName").value;
}
</script>
</form>
</body>
</html>
</apex:component>
Best Answer
Yes it absolutely works. You haven't provided enough details to identify specifically where your code is failing, but I just set up a Prechat page which routes to Omni Channel, and it creates a
CaseandContactwith no problem. I answer the chat in the Lightning console and it pops open both related records as subtabs.One surprising gotcha for me was that any save errors for the related
ContactandCaserecords are silent failures. I found some similar issues by adding debug logs on theAutomated Processuser and hunting down the specificDmlExceptionblocking my operation.One difference between behavior in Classic and Lightning is if the case fails to create. In Classic, the user is presented with a New Case subtab. In Lightning, the New Case subtab isn't shown if the case fails to create.
For what it's worth my Prechat page looks roughly like: