Does the Prechat API work with Omni Channel and Lightning?

Daniel Hoechst 08/01/2018. 2 answers, 91 views
lightning liveagent omnichannel

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}: &nbsp; </label><input type="text" name="liveagent.prechat:caseName" id="caseName"/><br />
                <label class="fieldAlign">{!$Label.Email}: &nbsp; </label><input type="email" name="liveagent.prechat:caseEmail" /><br />
                <label class="fieldAlign">{!$Label.Subject}: &nbsp; </label><input type="text" name="liveagent.prechat:caseSubject" /><br />
                <label class="fieldAlign">{!$Label.Role}: &nbsp; </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}: &nbsp; </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>

2 Answers


Adrian Larson 08/01/2018.

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 Case and Contact with 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 Contact and Case records are silent failures. I found some similar issues by adding debug logs on the Automated Process user and hunting down the specific DmlException blocking 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:

<form method="post" id="prechatForm">
    <!-- loads of intermediate DOM omitted -->
    <input type="text" name="liveagent.prechat:FirstName" id="firstName" required="true"/>
    <input type="text" name="liveagent.prechat:LastName" id="lastName" required="true"/>
    <!-- and so on -->


    <input type="hidden" name="liveagent.prechat.name" id="prechat_field_name" />

    <input type="hidden" name="liveagent.prechat:CaseStatus" value="New" />
    <input type="hidden" name="liveagent.prechat:CaseOrigin" value="Chat" />

    <input type="hidden" name="liveagent.prechat.findorcreate.map:Case"
           value="SuppliedEmail,Email;Custom_Fields__c,Mappings" />
    <input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Case"
           value="Subject,true;Status,true;Origin,true;RecordTypeId,true;SuppliedEmail,true;Custom_Fields__c,true" />
    <input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact" value="Case,ContactId" />


    <input type="hidden" name="liveagent.prechat.findorcreate.map:Contact"
           value="FirstName,FirstName;LastName,LastName;Email,Email" />
    <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;" />

    <input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" value="true" />
    <input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Contact" value="true" />

    <input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case" value="CaseId" />
    <input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Contact" value="ContactId" />

    <input type="submit" value="Chat Now" id="prechat_submit" />
</form>

Sandeesh 08/09/2018.

One thing that i noted, In lightning - you cannot use the variables that you added as liveagent.addCustomDetail() in the doCreate pre-chat api. So make sure you bind it to a local js liveagent variable before assigning.
Classic remains unchanged and works fine.

Known Issue - https://success.salesforce.com/issues_view?id=a1p3A000000ATG9QAO


HighResolutionMusic.com - Download Hi-Res Songs

1 The Chainsmokers

Beach House flac

The Chainsmokers. 2018. Writer: Andrew Taggart.
2 (G)I-DLE

POP/STARS flac

(G)I-DLE. 2018. Writer: Riot Music Team;Harloe.
3 Ariana Grande

​Thank U, Next flac

Ariana Grande. 2018. Writer: Crazy Mike;Scootie;Victoria Monét;Tayla Parx;TBHits;Ariana Grande.
4 Anne-Marie

Rewrite The Stars flac

Anne-Marie. 2018. Writer: Benj Pasek;Justin Paul.
5 Clean Bandit

Baby flac

Clean Bandit. 2018. Writer: Jack Patterson;Kamille;Jason Evigan;Matthew Knott;Marina;Luis Fonsi.
6 Nicki Minaj

No Candle No Light flac

Nicki Minaj. 2018. Writer: Denisia “Blu June” Andrews;Kathryn Ostenberg;Brittany "Chi" Coney;Brian Lee;TJ Routon;Tushar Apte;ZAYN;Nicki Minaj.
7 BlackPink

Kiss And Make Up flac

BlackPink. 2018. Writer: Soke;Kny Factory;Billboard;Chelcee Grimes;Teddy Park;Marc Vincent;Dua Lipa.
8 Imagine Dragons

Bad Liar flac

Imagine Dragons. 2018. Writer: Jorgen Odegard;Daniel Platzman;Ben McKee;Wayne Sermon;Aja Volkman;Dan Reynolds.
9 BTS

Waste It On Me flac

BTS. 2018. Writer: Steve Aoki;Jeff Halavacs;Ryan Ogren;Michael Gazzo;Nate Cyphert;Sean Foreman;RM.
10 Halsey

Without Me flac

Halsey. 2018. Writer: Halsey;Delacey;Louis Bell;Amy Allen;Justin Timberlake;Timbaland;Scott Storch.
11 Little Mix

Woman Like Me flac

Little Mix. 2018. Writer: Nicki Minaj;Steve Mac;Ed Sheeran;Jess Glynne.
12 Brooks

Limbo flac

Brooks. 2018.
13 Fitz And The Tantrums

HandClap flac

Fitz And The Tantrums. 2017. Writer: Fitz And The Tantrums;Eric Frederic;Sam Hollander.
14 Backstreet Boys

Chances flac

Backstreet Boys. 2018.
15 Lady Gaga

I'll Never Love Again flac

Lady Gaga. 2018. Writer: Benjamin Rice;Lady Gaga.
16 Diplo

Close To Me flac

Diplo. 2018. Writer: Ellie Goulding;Savan Kotecha;Peter Svensson;Ilya;Swae Lee;Diplo.
17 Rita Ora

Velvet Rope flac

Rita Ora. 2018.
18 Bradley Cooper

Always Remember Us This Way flac

Bradley Cooper. 2018. Writer: Lady Gaga;Dave Cobb.
19 Imagine Dragons

Machine flac

Imagine Dragons. 2018. Writer: Wayne Sermon;Daniel Platzman;Dan Reynolds;Ben McKee;Alex Da Kid.
20 Erika Sirola

Speechless flac

Erika Sirola. 2018. Writer: Teemu Brunila;Stefan Dabruck;Jürgen Dohr;Guido Kramer;Dennis Bierbrodt;Chris Braide;Robin Schulz.

Related questions

Hot questions

Language

Popular Tags