In Master page in aspx website, I wrote below code:
<div class="ChatAreaWrapper">
<div class="FeedbackButtonWrapper">
<telerik:RadButton
ID="ChatButton"
runat="server"
Text="Chat"
CssClass="FeedbackButton HelpCenterButton StartChat"
OnClientClicking="ClientValidation.ChatWindow.StartChat"
AutoPostBack="false" ValidationGroup="anonymous"
SingleClick="true" SingleClickText="Chat is going on..." />
</div>
<div class="FeedbackButtonWrapper">
<div id='chatArea' style='border: 1px solid #aaa; height: 200px; overflow: auto; background-color: #fff;'></div>
</div>
<div class="FeedbackButtonWrapper">
<telerik:RadTextBox
ID="ChatTextBox"
runat="server"
Height="40px"
MaxLength="2000"
TextMode="MultiLine"
placeholder="Enter Message"
CausesValidation="true" ValidationGroup="Chat" />
<asp:CustomValidator runat="server" ID="ChatTextBoxValidator"
ValidateEmptyText="true"
ControlToValidate="ChatTextBox"
ClientValidationFunction="ClientValidation.RequiredFieldCustomValidator"
ErrorMessage="Required field" EnableClientScript="true" ValidationGroup="Chat" />
</div>
<telerik:RadButton
ID="SubmitChat"
runat="server"
Text="Send Chat"
OnClientClicking="ClientValidation.ChatWindow.SubmitChat"
CssClass="LoginButton"
AutoPostBack="false"
ValidationGroup="Chat"
width="225px"/>
</div>
and using below javascript file:
ClientValidation.ChatWindow = {}
ClientValidation.Chat = {};
function checkAvailabilityLivePersonChat() {
lpc.chatAvailability();
}
ClientValidation.ChatWindow.StartChat = function (sender, args) {
lpc.requestChat();
}
function myOnAvailability(availObj) {
if (availObj.availability == true) {
// alert('we can start a chat');
$(".ChatAreaWrapper").css("display", "block");
$find($("[id$=ChatButton]").attr("id")).set_visible(true);
} else {
$find($("[id$=ChatButton]").attr("id")).set_visible(false);
//alert('Account is offline. Try again later!');
}
}
ClientValidation.ChatWindow.SubmitChat = function (sender, args) {
if (Page_ClientValidate(sender.get_validationGroup())) {
var chatTextBox = $find($("[id$=ChatTextBox]").attr("id"));
var textObj = chatTextBox.get_value();
if (textObj != '' && textObj != null) {
lpc.addLine(textObj);
addChatText(lpc.getVisitorName(), textObj);
chatTextBox.clear();
}
return true;
}
return false;
}
function myOnLine(line) {
addChatText(line.by, line.text);
}
function myOnError(errObj) {
alert('Error occured. ' + errObj.text);
}
function addChatText(by, text) {
var ca = document.getElementById('chatArea');
var p = document.createElement("div");
if (by != null) {
var span = document.createElement("span");
span.innerHTML = by + ': ';
p.appendChild(span);
}
var htmlText = document.createElement("span");
htmlText.innerHTML = text;
p.appendChild(htmlText);
ca.appendChild(p);
ca.scrollTop = 50000;
}
var lpChatConfig = {
apiKey: 'b532027e19a64cc2a8a75c502082f799',
jsApiSrcDomain: 'dev.liveperson.net',
lpNumber: 'P27217515',
onLoad: function () {
window.lpc = new lpChat();
},
onLine: myOnLine,
onError: myOnError,
onAvailability: myOnAvailability
};
lpChatConfig.lpAddScript = function (src, ignore) {
var c = lpChatConfig;
if (typeof (c.lpProtocol) == 'undefined') {
c.lpProtocol = "https";
}
if (typeof (src) == 'undefined' || typeof (src) == 'object') {
src = c.lpChatSrc ? c.lpChatSrc : '/hcp/html/lpChatAPI.js';
}
if (src.indexOf('http') != 0) {
src = c.lpProtocol + "://" + c.jsApiSrcDomain + src + '?site=' + c.lpNumber;
} else {
if (src.indexOf('site=') < 0) {
if (src.indexOf('?') < 0) {
src = src + '?';
} else {
src = src + '&';
src = src + 'site=' + c.lpNumber;
}
}
}
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('charset', 'iso-8859-1');
s.setAttribute('src', src);
document.getElementsByTagName('head').item(0).appendChild(s);
}
if (window.attachEvent) {
window.attachEvent('onload', lpChatConfig.lpAddScript);
} else {
window.addEventListener('load', lpChatConfig.lpAddScript, false);
}