Skip to main content

Salesforce Live Agent to your Service Console - Prechat Vs Custom Attributes

If are working on a Live Agent implementation for your client , you might come across certain circumstances where you will have to decide between using a Pre-chat form or embedding the custom attributes to get the parameters from the web-server or Portal it is deployed.

PreChat 

If your requirements has Pre-chat form then your life becomes easy , since Pre-chat form can be hosted on Salesforce VF page and it gives you more control over find or search record in salesforce , linking a record to another or automatically invoking the knowledge widget of Service Console based on the customer's problem description entered at pre-chat.

Before using pre-chat , you will have to do some basic configurations like creating Buttons , deployment , setting up a chat user etc.
Please follow the Salesforce Live Agent guide for configuring the same.

A sample Pre-Chat form will like this.








<apex:page showHeader="false">



        



    <!-- Form to gathers information from the chat visitor -->







    <form method='post' id='prechatForm' align= 'Center'>



      <table align= 'Center'>



            <tr>



      <!-- liveagent.prechat.save is used to save the user input to Chat transcript custom field -->



               <td> First Name: </td><td><input type='text' name='liveagent.prechat:firstName' id='FirstName' /><br />



                        <input type="hidden" name="liveagent.prechat.save:FirstName" value="First_Name__c" /> 



               </td>







            </tr>



   <tr>



               <td> Last Name: </td><td><input type='text' name='liveagent.prechat:firstName' id='LastName' /><br />



                        <input type="hidden" name="liveagent.prechat.save:LastName" value="Last_Name__c" /> 



               </td>







            </tr>



            <tr>



                <td>E-mail: </td> <td><input type='text' name='liveagent.prechat:ContactEmail' id='Email'  /><br />



                            <input type="hidden" name="liveagent.prechat.save:ContactEmail" value="Contact_Email__c" /> 



                </td>



            </tr>



            <tr>



                <td>Phone: </td> <td><input type='text' name='liveagent.prechat:ContactPhone' id='Phone'  /> <br />



                            <input type="hidden" name="liveagent.prechat.save:ContactPhone" value="Contact_Phone__c" />



                </td>



            </tr>



            <tr>



                <td>Problem Description: </td> <td><input type='text' name='liveagent.prechat:CaseSubject' id='subject' /> <br /></td>



            </tr>



          <tr>



                <td><br/>Or<br/></td>



          </tr>



    <tr>



                <td><br/>Raised Case already, enter<br/></td>



          </tr>



       



          <tr>



                <td>Case Number: </td> <td><input type='text' name='liveagent.prechat:CaseNumber' id='CaseNumber' /> <br /></td>



          </tr>



        </table>



     



        <!-- Hidden fields is used to set additional custom details -->



        <input type="hidden" name="liveagent.prechat:CaseStatus" value="Open" /><br />



        <input type="hidden" name="liveagent.prechat:CaseSubStatus" value="In Progress" /><br />



               



        



        <!-- Used to set the visitor's name for the agent in the Console -->



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







  <!-- map: Use the data from prechat form to map it to the Salesforce object fields ,  -->



  <input type="hidden" name="liveagent.prechat.findorcreate.map:Contact" value="FirstName;Email,ContactEmail;Phone,ContactPhone" />



     



  <!-- doFind, doCreate and isExactMatch example for a Contact by



   First Name, Last Name, Email, and Phone 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" />



    



  <!-- If customer has created already case and has case number with him, will put case number directly and that will search and open the case -->



  <input type="hidden" name="liveagent.prechat.findorcreate.map.doFind:Case" value="CaseNumber,true" />



  <input type="hidden" name="liveagent.prechat.findorcreate.map.isExactMatch:Case" value="CaseNumber,true" /> 



  <input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="CaseNumber;Subject,CaseSubject;Status,CaseStatus;CaseRecordType;Origin,CaseOrigin;" />



  







  <!-- 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="CaseNumber,true;Subject,true;Status,true;Priority,true;RecordTypeId,true;Origin,true" /> 



  



  <!-- linkToEntity- Set the record Contact record, found or created , as the Contact on the Case that's created -->



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







  <!-- showOnCreate- Open the Account 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 or created to the Live Chat Transcript record -->



  <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 , if Knowledge is enabled-->



  <input type="hidden" name="liveagent.prechat.knowledgeSearch:CaseSubject" value="true" />



   



  <!-- Link the Account to the Case -->



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



   



  <input type='submit' value='Click to Chat' id='prechat_submit' />



     



    </form>



    </apex:page> 













Custom Attribute









Sometimes client don't want the Pre-Chat form and you are told to bypass this layer , this scenario makes the implementation difficult since now you will have to do lot of customization to achieve some features which could have been easily achieved using a Pre-Chat form.



You will have to add following script to the portal or your companies site and collect the custom attribute details to be passed to Live Agent before initialization.





<script type='text/javascript' src='https://c.la4-c2-chi.salesforceliveagent.com/content/g/js/42.0/deployment.js'></script>

 <script type='text/javascript'>

  /*Custom Variables*/

  

  var email = 'Customer's email'

  var caseOrigin = 'Chat';

  var caseStatus = 'Open'; 

  var caseSubject = 'Unable to install Software';

  var caseSeverity = 'High';



   

  /*Add custom detail for Case*/

  

  liveagent.addCustomDetail("Origin", caseOrigin);

  liveagent.addCustomDetail("Status", caseStatus);

  liveagent.addCustomDetail("Subject", caseSubject);

  liveagent.addCustomDetail("Severity", caseSeverity);

  



  /*Find contact and link to transcript */

  

  liveagent.findOrCreate("Contact").map("Email","email Id",true,true,false).saveToTranscript("ContactId").linkToEntity('Case','ContactId');

  

  

  

  /*Maps the value with Case fields and creates a Case and link to chat*/

  

  liveagent.findOrCreate('Case').map('ContactEmail','Email Id',false,false,false).map('Origin','Origin',false,false,true).map('Status','Status',false,false,true).saveToTranscript('CaseId').showOnCreate();





  liveagent.init('https://d.lf4-c2-chi.salesforceliveagent.com/chat', '<Deployment Id>', '<Org Id>');

 </script>



 <img id="liveagent_button_online" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('<Deployment Id>')" src="https://yourcompany.secure.force.com/LiveAgent/resource/XXXXX/Online_Btn" />

 <img id="liveagent_button_offline" style="display: none; border: 0px none; " src="https://yourcompany.secure.force.com/LiveAgent/resource/XXXX/Offline_Btn" />

 <script type="text/javascript">

 if (!window._laq) { window._laq = []; }

 window._laq.push(function(){

  liveagent.showWhenOnline('<Deployment Id>', document.getElementById('liveagent_button_online'));

  liveagent.showWhenOffline('<Deployment Id>', document.getElementById('liveagent_button_offline'));

 });

 </script>









This requires an extra effort from by the site which is hosting this live agent widget and increases the complexity.



































Labels:





























Comments











Post a Comment



















Popular posts from this blog



















Einstein Bot user authentication




























  Using Bot for data manipulation use case in your company requires need of implementing some extra security layer to make it spoof proof.   One of exciting salesforce feature we have is the well known Einstein Bot which many companies have implemented. I am going to cover detail step-by-step implementation of User validation use case using encrypted token.   STEP-1: Create a Site & Site User   go to setup > Sites & Domains > Sites   Create a Site and make your user as "Site Contact". This is a prerequisites for live agent or Embedded Service setup.   STEP-2 : Create a Embedded Service(formerly snap-ins)   go to Service setup > Embedded Service   Create a new Embedded Service Deployment record and copy the embedded service code snipped generated in a notepad.   STEP-3  : Create a Visualforce page to test the chatbot (it will simulate the actual web portal which is going to consume the embedded service snipped.)   BotController.apxc   public class BotControlle...




















3 comments









Read more






























Dynamically populate lightning:combobox




























   In order to dynamically populate values in lightning:combobox using javascript we can create a list variable and push the values. We also require the values like ids associated to the particular option for back-end logic.  For example  : If we want to show the list of contacts using lightning:combobox component where the option should display the contact name but the value should be the contact id which will be used for back-end logic   For this we can create a temporary Map variable in our lightning component and set the value and label parameters of the lightning:combobox.       Here is the code for this component   Combo.app       <aura:application extends="force:slds" access="global"  description="Lightning Combo Demo">  <c:Combo_Cmpt/>  </aura:application>     Combo_Cmpt.cmp     <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ComboController"> <!-- ...




















Post a Comment









Read more






























Use of wrapper class in lightning:datatable




























  As you guys know the wrapper class concept in visualforce pages , we generally use it to create a data-table which fetches data from different objects or if we want to redirect user to some other page on click of a link as one of the column of data-table.         For example we want a column "Account Name" on the data-table which is a link and once user clicks it should redirect respective account record. Or , suppose we want to display a column with some images or icons as a visual indicator Or what not. These requirements require us to use a wrapper on the lighting data-table (lightning:datatable)   I am going to use my previous account search example ( Account Search Lightning Component ) and explain the use of wrapper.          AccountSearchWrapper.app    <aura:application extends="force:slds" access="global" >      <c:AccountSearchWrapper />  </aura:application>   AccountSearchWrapper.cmp        <aura:component controller="...




















Post a Comment









Read more