I have a working set up of Live Agent, now i want to add a pre-chat form (visualforce page) based on the sample code.

When I fill in the button and push the Submit button, the pre-chat form is refreshing. While it should redirect to the LiveAgent chat. What am I doing wrong?

The code i use for the pre-chat form:

<apex:page showHeader="false">
<!-- This script takes the endpoint URL parameter passed from the deployment page and makes it the action for the form -->
<script type='text/javascript'>
(function() {
function handlePageLoad() {
var endpointMatcher = new RegExp("[\\?\\&]endpoint=([^&#]*)");
}bif (window.addEventListener)b{
window.addEventListener('load', handlePageLoad, false);
} else { window.attachEvent('onload', handlePageLoad, false);}})();

<h1>Please, provide us with this basic information to assure you the best support</h1>

<!-- Form that gathers information fromthe 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/>
Issue: <input type='text' name='liveagent.prechat:CaseSubject' id='subject'/><br/>

<!-- Hidden fields used to set additional custom details -->
<input type="hidden" name="liveagent.prechat:CaseStatus" value="Answered" /><br/>

<!-- This example assumes that "Chat" was added as picklist value to the Case Origin field -->
<input type="hidden" name="liveagent.prechat:CaseOrigin" value="Web" /><br/>

<!-- This example will set the Case Record Type to a specific value for the record type configured on the org. Lookup the case record type's id on your org and set it here -->
<input type="hidden" name="liveagent.prechat:CaseRecordType" value="0129E000000507C" />

<!-- Used to set the visitor's name for the agent in the Console -->
<input type="hidden" name="liveagent.prechat.name" id="prechat_field_name"/>

<!-- map: Use the data from prechat form to map it to the Salesforce record's fields -->
<input type="hidden" name="liveagent.prechat.findorcreate.map:Contact" value="FirstName,ContactFirstName;LastName,ContactLastName;Email,ContactEmail;Phone,ContactPhone"/>
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="Subject,CaseSubject;Status,CaseStatus;Origin,CaseOrigin;RecordTypeId,CaseRecordType"/>

<!-- doFind, doCreate and isExactMatch example for a Contact: Find a contact whose Email exactly matches the value provided by the customer in the form If there's no match, then create a Contact record and set it's First Name, Last Name, Email, and Phone to the values 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" />
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Contact" value="FirstName,true;LastName,true;Email,true;Phone,true"/>

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

<!-- linkToEntity: Set the record Contact record, found/created above, as the Contact on the Case that's created -->
<input type="hidden" name="liveagent.prechat.findorcreate.linkToEntity:Contact" value="Case,ContactId"/>

<!-- 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:Contact" value="true"/>
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" 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:Contact" value="ContactId" />
    <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" />

<input type='submit' value='Chat Now' id='prechat_submit' onclick="setName()"/>

<!-- Set the visitor's name for the agent in the Console to first and last name provided by the customer -->
<script type="text/javascript">
    function setName()
        { document.getElementById("prechat_field_name").value = document.getElementById("firstName").value + " " + document.getElementById("lastName").value;

<style type="text/css">p {font-weight:bolder}</style>

Hope someone can help me with this.


Try the below handlePageLoad function. It is working for me.

(function() {
    function handlePageLoad() {
        var endpoint = getParameterByName('endpoint');
        var buttonid = getParameterByName('button_id', endpoint);
        alert('button_id' + buttonid);
        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);
| improve this answer | |
  • Hi @Saroj, thank your for your feedback. Even though i just replaced my handlePageLoad with yours, the form is refreshing itself after submitting and not directing to the actual chat screen. Is there something i do terribly wrong? – Tim Sep 26 '17 at 9:47

i was also facing the same issue when i have added my custom vf page in Custom Chat Page lookup. Try to add your VF Page URL in 'Pre-Chat Form URL' parameter in chat buttons & invitations. Also when chat page is opening, Check in Dev Console whether you are getting any console error such as invalid domain. Also make sure your agent is live. enter image description here Please let me know if this works.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.