Nếu bạn có một Fan Page FaceBook dùng để bán hàng, hay để chăm sóc khách hàng bên cạnh việc có một Blog, website của công ty – tại sao không sử dụng chính tài khoản Fan Page này để trao đổi trực tiếp với khách hàng thông qua website mà phải cài đặt thêm một ứng dụng chat hỗ trợ ? Trong bài viết này tôi sẽ hướng dẫn bạn chèn thêm một khung chat sử dụng chính tài khoản Fan Page để chat với khách truy cập website.
Phụ mục
Lợi ích của chat box này là gì ?
Khung chat sử dụng Fan Page trên FaceBook– Đầu tiên, phương pháp tiếp cận này giúp bạn dễ dàng nắm được thông tin khách hàng. Chỉ việc click vào profile của người bạn đang chat là bạn đến ngay tài khoản FaceBook của họ và bạn sẽ có một vài thông tin cá nhân, sở thích, các mối liên hệ của họ để phục vụ cho công tác bán hàng. Nếu họ là khách hàng tiềm năng, bạn có thể kết bạn với họ để thuận tiện cho việc bán hàng dài lâu.
– Tiếp theo, khung chat luôn có sẵn nút Like và Share cho phép người dùng ấn thích và chia sẻ bất cứ khi nào họ muốn – tuyệt vời !
Việc sử dụng ngay chính tài khoản Fan Page trên FaceBook để trao đổi là điều vô cùng thuận lợi về nhiều mặt khác nữa mà tôi nghĩ rằng không cần nói ra bạn cũng biết. Thế nên, bạn tự động não ra những lợi ích khác nhé vì chúng ta sắp phải đi vào phần chính rồi, không cần phải dài dòng kể về lợi ích nữa.
Thực hiện như thế nào ?
Trước tiên bạn thêm đoạn mã sau vào phần trên của thẻ </body> trên web/blog của bạn:
[code lang=”html”]<div id="fb-root"></div>
<script>
(function($) {
$(document).ready(function() {
$(‘.fb-page-header’).click(function(){
$(‘.fb-page-box’).slideToggle();
});
});
})(jQuery);
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}
(document, ‘script’, ‘facebook-jssdk’));
</script>
<div class="fb-chat-popup">
<div class="fb-page-header">LÊN FACEBOOK CHAT NÀO CÁC BẠN ! <img src="https://cdn2.iconfinder.com/data/icons/arrows-free/32/nav_arrow_point_down-16.png" alt="" /></div>
<div class="fb-page-box">
<div class="fb-page" data-href="https://www.facebook.com/webmastersvietnam" data-height="350" data-width="300" data-small-header="false" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false" data-tabs="messages" data-show-posts="false">
</div>
</div>
</div>
[/code]Về đoạn mã trên, chúng tương đối dễ hiểu nếu như bạn có một chút kiến thức về Javascript, nếu không bạn không cần hiểu nó cho lắm vì tất cả tôi đã làm sẵn cho bạn rồi. Bạn chỉ cần thay URL đến trang Fan Page của tôi thành của bạn là ổn. Cụ thể là:
[code]https://www.facebook.com/webmastersvietnam[/code]Tại sao lại là phần trên của thẻ </body> ?
Thực ra đoạn mã trên bạn thêm ở bất kỳ chỗ nào trong thẻ body cũng được nhưng tôi khuyên bạn nên đặt ngay phía trên của thẻ body để hạn chế tối đa những ảnh hưởng liên quan đến việc tải trang web của bạn. Chúng ta biết rằng FaceBook là một dịch vụ từ nước ngoài nên đôi lúc vấn đề mạng chậm, không truy cập có thể xảy ra. Thế nên, đặt đoạn mã này ở cuối nội dung trang web sẽ giúp cho nội dung chính của trang web được tải trước và không ảnh hưởng đến trải nghiệm của người dùng.
Xinh đẹp hơn với CSS
Bạn có thể tự viết đoạn mã CSS cho riêng mình hoặc có thể sử dụng đoạn mã CSS sau:
[code lang=”css”]<style>
.fb-chat-popup{
position: fixed;
z-index: 9999999;
right: 10px;
cursor: pointer;
bottom: 15px;
border: 1px solid #d1d1d1;
box-shadow: 0px 0px 25px #666;
background: #FFF;
}
.fb-chat-popup .fb-page-header {
background-color: #1dafec;
padding: 8px 10px 5px 10px;
color: #FFF;
font-weight: bold;
font-size: 16px;
}
@media all and (max-width: 799px) {
.fb-page-box{display: none;}
.fb-chat-popup {
position: fixed;
z-index: 9999999;
right: 1px;
cursor: pointer;bottom: 5px;
border: 1px solid #d1d1d1;
box-shadow: 0px 0px 25px #666;
background: #FFF;}
}
<style>
[/code]
Nếu bạn có một file css, hãy thêm chúng vào. Hoặc bạn có thể đặt đoạn mã trên ở thẻ <head> cũng đều ngon lành cả.
Và quan trọng, bạn nhớ ấn Like :D