Pass input values from Pre-chat form to Transcript object

This solution uses two Visualforce pages (LiveAgentPage1 and LiveAgentPage2) and two Apex controller classes (InsertPre and InsertPost) to capture pre-chat form values and save them to the Live Agent Transcript.

1) Controller InsertPre - Capture pre-chat form inputs (InsertPre Controller and LiveAgentPage1)


The first Apex controller class, InsertPre, exposes two string properties: Name and Email. These correspond to the fields shown on the pre-chat form Visualforce page (LiveAgentPage1). When the visitor clicks Save on the pre-chat form, the InsertPre controller takes the entered Name and Email values and appends them as URL parameters in a redirect to the second Visualforce page, LiveAgentPage2. The URL parameters are named "name" and "email".

 

public class InsertPre{ 
public string Name{get;set;} 
public string Email{get;set;} 
public PageReference Save() { 
PageReference pr= Page.LiveAgentPage2; 
pr.setRedirect(true); 
pr.getParameters().put('name',Name); 
pr.getParameters().put('email',Email); 
return pr; 
} 
}

Used in VF page LiveAgentPage1 

 

 

<apex:page showHeader="false" controller="InsertPre"> 
<apex:form > 
<apex:inputText value="{!Name}" id="name"/> 
<apex:inputText value="{!Email}" id="email"/> 
<apex:commandButton action="{!Save}" value="Save" id="theButton"/> 
</apex:form> 
</apex:page>

 

3) Controller InsertPost - Read URL parameters on the chat page (InsertPost Controller and LiveAgentPage2)


The second Apex controller class, InsertPost, runs when LiveAgentPage2 loads. In its constructor, it reads the "name" and "email" URL parameters passed from LiveAgentPage1 using ApexPages.currentPage().getParameters(). These values are stored in the Name and Email properties of the controller.

 

public class InsertPost{ 
public string Name{get;set;} 
public string Email{get;set;} 
public PageReference Save() { 
PageReference pr= Page.LiveAgentPage2; 
pr.setRedirect(true); 
pr.getParameters().put('name',Name); 
pr.getParameters().put('email',Email); 
return pr; 
} 
public InsertPost(){ 
Name=ApexPages.currentPage().getParameters().get('name'); 
Email=ApexPages.currentPage().getParameters().get('email'); 
} 
}

Used in VF page LiveAgentPage2 

 

 

Within the Live Agent JavaScript initialization code on LiveAgentPage2, the liveagent.addCustomDetail() method maps the Name and Email properties to custom Transcript fields. For example:

• liveagent.addCustomDetail('Company', Name value).saveToTranscript('NewField2__c') — saves the Name input to the custom Transcript field NewField2__c.
• liveagent.addCustomDetail('Email', Email value).saveToTranscript('NewField__c') — saves the Email input to the custom Transcript field NewField__c.

When the visitor completes the chat, both field values are automatically saved to the corresponding custom fields on the Transcript record.

 

<apex:page controller="InsertPost"> 
<img id="liveagent_button_online_57390000000PC4r" style="display: none; border: 0px none; cursor: pointer" onclick="liveagent.startChat('57390000000PC4r')" src="https://free-12415f14c3a-124e539428a-12f461fef47.sandbox.cs5.force.com/resource/1314709845000/Zeco__ZC_AEO_Startup01" /><img id="liveagent_button_offline_57390000000PC4r" style="display: none; border: 0px none; " src="https://free-12415f14c3a-124e539428a-12f461fef47.sandbox.cs5.force.com/resource/1314709845000/Zeco__ZC_AEO_Startup04" /> 
<script type="text/javascript"> 
if (!window._laq) { window._laq = []; } 
window._laq.push(function(){liveagent.showWhenOnline('57390000000PC4r', document.getElementById('liveagent_button_online_57390000000PC4r')); 
liveagent.showWhenOffline('57390000000PC4r', document.getElementById('liveagent_button_offline_57390000000PC4r')); 
});</script> 


<script type='text/javascript' src='https://c.la9cs.salesforceliveagent.com/content/g/deployment.js'></script> 
<script type='text/javascript'> 
liveagent.addCustomDetail('Company', '{!Name}').saveToTranscript('NewField2__c'); 
liveagent.addCustomDetail('Email', '{!Email}').saveToTranscript('NewField__c'); 
liveagent.init('https://d.la9cs.salesforceliveagent.com/chat', '57290000000PC4m', '00DO00000007EgL'); 
</script> 
</apex:page>

When you open VF page 1 i.e. "LiveAgentPage1", it will ask to enter email address and name and save, it get redirect to LiveAgentPage2 and press start chat. After completion of chat, Name and Email address is saved to transcript object as the field name specified. 

 

Note: This solution applies to Salesforce Live Agent (Classic Chat) using Visualforce pages. Update all deployment URLs and org-specific IDs (such as the button ID and deployment ID) to match your own org before using this code.