- shares
- Facebook Messenger
- Gmail
- Viber
- Skype
Olark là công cụ chat đa năng trên website, sử dụng chuẩn giao thức XMPP có thể tích hợp với nhiều phần mềm IM client mà nhờ đó bạn theo dõi được lượng khách hàng tương tác trên website qua kênh tư vấn này.
Tùy biến vị trí hiển thị olark
Mặc định olark chatbox hiển thị dạng float được gắn cố định phía dưới cùng trên website, theo như bạn cấu hình trong trang quản trị olark.com.
Bạn có thể nhấc chatbox và hiển thị ở vị trí bất kỳ trên trang, olark hỗ trợ holder mặc định nếu không tìm thấy thẻ HTML có id=”olark-box-container” thì nó sẽ tự động tạo thẻ mới và xuất hiện cố định ở bên dưới cùng. Tuy nhiên nếu trang web bạn có tồn tại thẻ div.
<!-- Empty container for Olark chat box --> <div id="olark-box-container"></div>
Thì olark chatbox sẽ render vào đó, và để bắt đầu olark có thể chèn chatbox vào đối tượng #olark-box-container bạn cần kích hoạt cấu hình box.inline.
// Set the Olark chatbox to appear inline
olark.configure('box.inline', true);
Xem ví dụ sau:
<div id="olark-box-wrapper">
<!-- Olark click-to-chat tab -->
<span class="loading" >Loading...</span>
<!-- Empty container for Olark chat box -->
<div id="olark-box-container"></div>
</div>
<script>
//Set the Olark chatbox to appear inline
olark.configure('box.inline', true);
</script>
Như vậy lúc này css sử dụng bởi olark thiết lập cho #olark-box-container sẽ còn được sử dụng. Bạn hoàn toàn tùy biến giao diện chat phù hợp với giao diện của website bằng cách sử dụng thêm CSS.
Một khi olark nạp chatbox hoàn tất và gọi sự kiện api.box.onShow bạn có thể ẩn trạng thái loading hoặc loại bỏ một số nội dung không sử dụng đến như ẩn tiêu đề.
olark('api.box.onShow',function(){
$('#olark-box-wrapper .loading').html('');
$('div.hbl_pal_main_height').removeClass('hbl_pal_main_height');
var timeInval=setInterval(function(){
if($('#habla_both_div').length){
clearInterval(timeInval);
$('#habla_both_div').slideUp(); //hide olark chatbox title
return;
}
},100);
});
Chú ý: vì lý do tiêu đề trên olark sẽ có thể thêm vào, sau khi chabox xuất hiện nên chúng ta thiết lập thời gian chờ đến khi tìm thấy #habla_both_div là nơi chứa tiêu đề chatbox và lúc đó bạn có thể xóa đi nếu muốn sử dụng javascript/jquery giống như trên.
Một điểm nữa là olark chèn trực tiếp HTML vào trong trang web không thông qua iframe, nên bạn có thể sửa thêm hoặc xóa bất kỳ thành phần nào olark sinh ra với lệnh javascript. Ví dụ mình sẽ xóa đi dòng “POWERED BY OLARK”.
olark('api.box.onShow',function(){
$('#habla_middle_div').next().hide();
});
Kết quả:
Olark Ở chế độ inline, thì mặc định hiển thị đầy đủ “expand” và để chắc chắn bạn có thể thiết lập trạng thái mở rộng hộp chatbox “expand” và luôn hiển thị chatbox với đoạn lệnh sau:.
$(function(){
olark('api.box.expand');
olark('api.box.show');
});
Olark Javascript API
Một số api mở rộng cung cấp bởi olark giúp bạn tùy biến cách tương tác giữa người truy cập và operator.
Chatbox
//mở rộng olark chatbox khi load trang
olark('api.box.expand');
//hiển thị chatbox
olark('api.box.show');
//ẩn chatbox
olark('api.box.hide')
Các hành động trên xẩy ra, tương ứng có các sự kiện ‘onShow’, ‘onHide’, ‘onExpand’,.
olark('api.box.onShow',callback)
olark('api.box.onHide',callback)
olark('api.box.onExpand',callback)
Sự kiện tin nhắn
Tin nhắn từ operator gửi cho visitor, sử dụng event api.chat.onMessageToVisitor để bắt lấy nội dung.
olark('api.chat.onMessageToVisitor',function(msg){
console.log(msg);
msg.messsage.body;
msg.messsage.nickname;
});
Và Tin nhắn gửi đến operator từ visitor chat trên website.
//message to operator from visitor
olark('api.chat.onMessageToOperator',function(msg){
console.log(msg);
msg.messsage.body;
});
Mỗi khi có tin nhắn từ visitor sự kiện này sẽ kích hoạt, tham số msg chứa nội dung tin nhắn ví dụ như thế này.
{"message":{"nickname":null,"body":"hello hoangweb.com, tôi có nhu cầu thiết kế web giá rẻ"}}
Trạng thái (status)
Khi bạn đăng nhập vào hệ thống chat olark với tài khoản của bạn trên trình duyệt hoặc các phần mềm hỗ trợ giao thức XMPP. Tài khoản của bạn bắt đầu ở trạng thái online, sự kiện api.chat.onOperatorsAvailable sẽ kích hoạt:
/*on present state/operator available event..*/
olark('api.chat.onOperatorsAvailable', function() {
document.getElementById('chat-indicator').className = 'green-icon';
});
olark thông báo ở trạng thái api.chat.onOperatorsAway.
//away status
olark('api.chat.onOperatorsAway', function() {
document.getElementById('chat-indicator').className = 'red-icon';
});
Gửi tin nhắn
– Visitor gửi tin nhắn cho operator.
olark('api.chat.sendNotificationToOperator', {body: "xin chào hoangweb.com, mình có muốn thiết kế wordpress theo yêu cầu."});
Chạy dòng trên, ngay lập tức Operator nhận được nội dung tin nhắn trên.
– Gửi tin nhắn đến visitor tại trình duyệt của visitor đang chạy olark bạn sử dụng lệnh sau nếu muốn gửi thông báo hoặc tin nhắn tự động cho visitor.
olark('api.chat.sendNotificationToVisitor', {body: "Chào! mình có thể giúp gì?"});
Một dòng bôi mầu xám bao quanh tin nhắn hiển thị trên chatbox, giống như sau:
Ví dụ: bạn dùng api trên để phản hồi tự động lại visitor sau một vài giây từ khi nhận được.
var lastMessageTimeout;
olark('api.chat.onMessageToVisitor', function(){
clearTimeout(lastMessageTimeout);
lastMessageTimeout = setTimeout(function(){
olark('api.chat.sendNotificationToVisitor', {body: "the operator just stepped out for a moment"});
}, 60000);
});
Tin nhắn trên có dạng thông báo (Notification), nếu chỉ gửi các tin nhắn thông thường gửi qua lại giữa visitor và operator bạn có thể dùng api.chat.sendMessageToVisitor
olark('api.chat.sendMessageToVisitor', {body: "Let me know if you have any questions."});
Khi người visitor bắt đầu cuộc thảo luận, từ trình duyệt người dùng có thể gửi trước một nội dung như một lời mời chào đến đầu chat bên kia là Operator. Chúng ta sử dụng sự kiện api.chat.onBeginConversation.
olark('api.chat.onBeginConversation', function() {
if (currentVisitorIsPremium) {
olark('api.chat.sendNotificationToOperator', {body: "this is a premium customer"});
}
});
Olark Command
Olark sử dụng ký tự ‘!’ ở trước mỗi tên lệnh, tên lệnh chấp nhận mọi ký tự bao gồm dấu cách. Ví dụ: !faq, !cmd1, !hoang,..
Lệnh chỉ được gửi bởi operator, visitor không có tác dụng. Khi Operator gửi chuỗi lệnh đến visitor trên cửa sổ chatbox olark không hiển thị vì mang nghĩa đó là lệnh. Bạn có thể lấy tên lệnh bởi sự kiện api.chat.onCommandFromOperator.
Ví dụ sau đây khi nhận được lệnh ‘faq’ thì tự động trình duyệt của visitor chuyển sang trang FAQ, theo chỉ định của lập trình viên.
//Use the command "!faq" to send a visitor to your FAQ page:
olark('api.chat.onCommandFromOperator', function(event) {
if (event.command.name == 'faq') {
window.location = "http://www.example.com/pages/faq";
}
});
Lấy thông tin của người dùng
Bạn có thể xác định thông tin người dùng, truy cập vào website có olark hoạt động như địa chỉ IP, khu vực, nhà cung cấp mạng internet..
olark('api.visitor.getDetails', function(details){
if (details.emailAddress == "[email protected]" || details.fullName == "Steve Jobs") {
olark('api.chat.sendNotificationToOperator', {body: "this might be Steve Jobs, just sayin'"})
}
});
Tham số details trả về đối tượng json chứa đầy đủ các thông tin về visitor. VD:
{"recentPageHistory":[{"title":"Thiết kế web giá rẻ. Uy tín, chất lượng!","url":"/thiet-ke-web-gia-re","timestamp":1416025423282},{"title":"Liên hệ • Thiết kế Website Uy Tín","url":"/lien-he","timestamp":1416025468755},{"title":"HÌNH THỨC THANH TOÁN • Thiết kế Website Uy Tín","url":"/thanh-toan","timestamp":1416025472765},{"title":"Đăng ký tên miền • Thiết kế Website Uy Tín","url":"/bang-gia-ten-mien","timestamp":1416025480324},{"title":"Web Hosting • Thiết kế Website Uy Tín","url":"/web-hosting","timestamp":1416025486820},{"title":"Thiết kế Website Uy Tín - Thiết kế web giá rẻ, dịch vụ seo, quảng cáo google adwords.","url":"/","timestamp":1416025497292},{"title":"Hướng dẫn Google Analystic toàn tập • Thiết kế Website Uy Tín","url":"/web-developer/huong-dan-google-analystic-toan-tap","timestamp":1416025514961},{"title":"Thiết kế Website Uy Tín - Thiết kế web giá rẻ, dịch vụ seo, quảng cáo google adwords.","url":"/","timestamp":1416025837647},{"title":"You searched for olark • Thiết kế Website Uy Tín","url":"/?s=olark","timestamp":1416026478190},{"title":"Thiết kế Website Uy Tín - Thiết kế web giá rẻ, dịch vụ seo, quảng cáo google adwords.","url":"/","timestamp":1416035311302}],"currentPage":{"title":"Thiết kế Website Uy Tín - Thiết kế web giá rẻ, dịch vụ seo, quảng cáo google adwords.","url":"/","timestamp":1416035311302},"conversationBeginPage":"/","referrer":"","referredByPaidAdvertisingEver":false,"referredByPaidAdvertisingThisVisit":false,"referredByCampaignEver":false,"referredByCampaignThisVisit":false,"searchTextForThisVisit":"","searchTextForPreviousVisits":[],"pageCountForThisVisit":2,"pageCountAcrossAllVisits":38,"messageCountForThisVisit":5,"messageCountAcrossAllVisits":9,"visitCount":2,"conversationCount":2,"isConversing":true,"secondsSpentOnCurrentPage":2862,"secondsSpentForThisVisit":2867,"secondsSpentAcrossAllVisits":19962,"city":"Hanoi","region":"44","country":"Vietnam","countryCode":"VN","organization":"Vietnam Posts and Telecommunications(VNPT)","domain":"","fullName":null,"emailAddress":null,"phoneNumber":null,"importance":0,"notes":[],"browser":"Chrome 38.0","operatingSystem":"Windows","ip":"113.171.85.102","secondsSinceLastMessage":753.074,"secondsSinceLastNotificationToOperator":1361.568,"secondsSinceLastMessageToOperator":1956.493,"secondsSinceLastMessageToVisitor":753.074,"customFields":{}}
Chúc bạn thành công!
Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook
- shares
- Facebook Messenger
- Gmail
- Viber
- Skype