You should be able to follow the steps in the Live Agent's Developers Guide and the Service Cloud Workbook's section on Live Agent for the main steps and various configurations of Live Agent. For specifically setting up a Pre-Chat form on an external site vs. on a Force.com Site page, there is not much of a difference. I've supplied sample code and other considerations, specific for configuring it for a non Force.com site.
Here is the code from the Live Agent Developer's Guide for the Pre-Chat Form with modifications to remove Visualforce functionality.
<!DOCTYPE>
<html>
<head>
<!-- This script takes the endpoint URL parameter passed from the
deployment page and makes it the action for the form.
You can see the endPoint parameter in the Pre-Chat form window's URL.
-->
<script>
(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);
}
})();
</script>
</head>
<body>
<h1>Pre-chat Form</h1>
<form method='post' id='prechatForm'>
<!-- Creates an auto-query for a matching Contact
record’s Email field based on the
value of the liveagent.prechat:Email field
-->
Email Address: <input type='text' name='liveagent.prechat:Email' /><br />
<input type="hidden" name="liveagent.prechat.query:Email" value="Contact,Contact.Email" />
<input type="hidden" name="liveagent.prechat.save:Email" value="Email__c" />
<input type='submit' value='Request Chat' id='prechat_submit'/>
</form>
</body>
</html>
Here is the code that combines the Deployment and Button Configuration with modifications to remove Visualforce functionality (I swapped out IDs with XXXXXXs). I apologize for the formatting as it is mostly a copy and paste of the SFDC generated button and deployment code. The thing to make sure you do is supply some sort of text or something in the online and offline links so that something can be clicked.
<html>
<body>
<h1>Customer Service</h1>
<p>
Hello, and welcome to our customer service page.<br/>
Please click the link to begin a live chat session:
<a id="liveagent_button_online_XXXXXXXXX" href="javascript://Chat" style="display: none;" onclick="liveagent.startChat('XXXXXXXX')">Online</a>
<div id="liveagent_button_offline_XXXXXXX" style="display: none;">Sorry, Offline</div>
<script type="text/javascript">
if (!window._laq) { window._laq = []; }
window._laq.push(function(){liveagent.showWhenOnline('XXXXXXXXXX', document.getElementById('liveagent_button_online_XXXXXX'));
liveagent.showWhenOffline('XXXXXXXXXX', document.getElementById('liveagent_button_offline_XXXXXXXXXXX'));
});
</script>
</p>
<script type='text/javascript' src='https://c.la2c1.salesforceliveagent.com/content/g/js/29.0/deployment.js'></script>
<script type='text/javascript'>
liveagent.init('https://d.la2c1.salesforceliveagent.com/chat', 'XXXXXXXXXX', 'XXXXXXXXX');
</script>
</body>
</html>
Some other considerations / reminders:
- Fill in the Pre-Chat Form URL field in the Chat Button Customization. This is under Live Agent | Chat Buttons & Invitations in the setup menu. Don't put anything in for the Lookup field Pre-Chat Form Page since not using it.
- In the Deployment make sure that you have your domain in the Permitted Domains list. This is under Live Agent | Deployments in the setup menu.
- The Chat Button Code and Deployment Code should be pasted into a separate HTML page. After the user clicks the button/link/etc to open the chat window the pre-chat form will be displayed in its own page.
- If you don't have any Agents marked as available, the Online link/button on the deployment page to connect will not show up, but instead the Offline link/button/text will show up. So, in testing, make sure you are logged into Salesforce with the Service Console and available (Status of Online).
- If you have issues with it still showing up as Offline, try brining up something like Chrome Developer console and inspecting the request and responses being made (specifically the jsonp request). You may find something like "Domain is not whitelisted for this deployment" in the JSON response that can help troubleshooting.
I have all of this code set up in a Developer Edition and working on an external (non SFDC) site that I use for playing around, so I can vouch for it.
You are using the deployment API which is different to the tags that must be used in the pre-chat form.
Here is an example on how to create a case with some information pre-populated that will also show in the console for the agent, you can do the same without creating a record, this should give you an idea.
<input type='hidden' name='liveagent.prechat:caseorigin' value='Chat'/>
<input type='hidden' name='liveagent.prechat:caseContactId' value='{!$User.ContactId}'/>
<input type="hidden" name="liveagent.prechat.findorcreate.map:Case" value="Origin,caseorigin;ContactId,caseContactId;" />
<input type="hidden" name="liveagent.prechat.findorcreate.map.doCreate:Case" value="Origin,true;ContactId,true;" />
<input type="hidden" name="liveagent.prechat.findorcreate.saveToTranscript:Case" value="Case" />
<input type="hidden" name="liveagent.prechat.findorcreate.showOnCreate:Case" value="true" />
The section you care about if all you want is to show the details on the console would be this
<input type='hidden' name='liveagent.prechat:caseContactId' value='{!$User.ContactId}'/>
in combination with this value
<input type= "hidden" name= "liveagent.prechat.findorcreate.displayToAgent:caseContactId" value= "true" />
With that, you are assigning a value to a custom chat detail that will be shown to the agent that gets the chat assigned.
Best Answer
I had a few domains set in the Permitted Domains field of Deployment (Setup -> Customize -> Live Agent -> Deployments). Once I removed the domains, my status as well as the pre-chat form popped up.