H5 online 1v1 customer service |web online customer service system |h5 Live Chat

There are many online customer service systems, such as the ring letter and the United States, and recently, we have developed an online customer service (1v1 communication chat) using H5+CSS3+FONTJS+SWIPER+WCPOP and other technical architectures, which can be applied to online temporary chat, online consultation and other scenarios. realizes the message, the expression (contains the motion diagram), the picture, the attachment sends and the commodity pushes.

Project:

Such as: You can click on the "Apple official flagship store" or the robot button to launch an online chat, chat window to pop up the display;

such as: Long press chat information, can travel menu prompt, the operation is more convenient and concise, in addition the chat background can be set by itself;

such as: Chat expression with the pop-up window positioning form display, including the expression and dynamic diagram, so that the chat content richer;

such as: Chat customer service can be based on customer demand, push some popular goods;

//Send message
var $chatMsgList = $("#J__chatMsgList");
function isEmpty(){
var html = $editor.html();
html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
html = html.replace(/<[^img].*?>/ig, "");
html = html.replace(/ /ig, "");
return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}
$(".J__wchatSubmit").on("click", function(){
//Judge whether the content is empty
if(isEmpty()) return;
var html = $editor.html();
var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&amp;|-)+)/g;
html = html.replace(reg, "<a href=‘$1$2‘ target=‘_blank‘>$1$2</a>");
var msgTpl = [
'< Li class = "me" >‘
].join ("");
$chatMsgList.append(msgTpl);
$(".wc__choose-panel").hide();
//Clear the chat box and get the focus (process input method and expression focus)
if(!$(".wc__choose-panel").is(":hidden")){
$editor.html("");
}else{
$editor.html("").focus().trigger("click");
}
wchat_ToBottom();
};
//... picture selection window
$("#J__chooseImg").on("change", function () {
$(".wc__choose-panel").hide();
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var _img = this.result;
Var _tpl = [
'< Li class = "me" >‘
].join ("");
$chatMsgList.append(_tpl);
wchat_ToBottom();
}
};
//... file selection window
$("#J__chooseFile").on("change", function () {
$(".wc__choose-panel").hide();
var file = this.files[0], fileSuffix = /\.[^\.]+/.exec(file.name).toString(), fileExt = fileSuffix.substr(fileSuffix.indexOf(‘.‘) + 1, fileSuffix.length).toLowerCase();
console.log(fileExt);
var fileTypeArr = [‘jpg‘, ‘jpeg‘, ‘png‘, ‘gif‘, ‘txt‘, ‘rar‘, ‘zip‘, ‘pdf‘, ‘docx‘, ‘xls‘];
if ($.inArray(fileExt, fileTypeArr) < 0) {
Wcpop ({content: 'attachments only support JPG, JPEG, PNG, GIF, TXT, rar, zip, PDF, docx, xls files', time: 2});
Return;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var _file = this.result;
console.log(_file);
Var _tpl = [
'< Li class = "me" >+‘</p>     <p class="filesize">‘+ formateSize(file.size) + ‘</p>                        </span>                        <a class="ico-download" href="‘+ _file + ‘" target="_blank" download="‘ + file.name + ‘" title="‘ + file.name + ‘"></a>                    </div>                </div>                <a class="avatar"><img  src="img/uimg/u__chat-imgDefault.jpg" /></a>            </li>‘
].join ("");
$chatMsgList.append(_tpl);
wchat_ToBottom();
}
/**Format file size display value: file file size value*/
formateSize = function (value) {
if (null == value || value == ‘‘) {
return "0 Bytes";
}
var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
var index = 0;
var srcsize = parseFloat(value);
index = Math.floor(Math.log(srcsize) / Math.log(1024));
var size = srcsize / Math.pow(1024, index);
Size = size. ToFixed (2); / / number of decimal places reserved
return size + unitArr[index];
}
}; 

H5 online 1v1 customer service |web online customer service system |h5 Live Chat