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.
Yes, it is possible, you can do this by creating a custom chat window. This is explained in the Live Agent Developer guide, see the section title "Customize Chat Windows with Visualforce
"
Here is a snippet from the code sample provided by Salesforce:
<liveAgent:clientchat >
<liveAgent:clientChatSaveButton label="Save Chat" />
<liveAgent:clientChatEndButton label="End Chat" />
<div id="prechatdata">
</div>
<div style="top: 5px; left: 5px; right: 5px; bottom: 5px;
position: absolute; z-index: 0;">
<liveAgent:clientChatAlertMessage />
<liveAgent:clientChatStatusMessage />
<table id="waitingMessage" cellpadding="0" cellspacing="0">
<tr>
<td>Please wait while you are connected to an available agent.</td>
</tr>
</table>
<div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0;
position: absolute; word-wrap: break-word; z-index: 0;">
<liveAgent:clientChatLog />
</div>
<div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0;
margin-right: 67px;">
<liveagent:clientChatInput /><liveAgent:clientChatSendButton label="Send"/>
</div>
</div>
</liveAgent:clientchat>
Best Answer
No, your users will not need to log in. You can surface this functionality without requiring authentication by adding the
Visualforce Page(s)in question to aForce.com Site(emphasis added):