Tạo live chat facebook cho website

Thường các bạn sử dụng các app chat từ bên dịch vụ nhu subiz, zopim sẽ có những bất tiện, và tiện ích nó mang lại. Hôm nay mình hướng dẫn các bạn tạo live chat facebook cho website thông qua fanpage
  • 22:50 05/01/2017
  • Kỳ Nhân
  • 0 Bình luận
  • 607

Để tạo được live chat facebook cho website các bạn phải thông qua fanpage. Nói cụ thể kiểu live chat facebook này thật là chat qua fanpage.

Thường khi các bạn tạo fanpage và quản lý fanpage chắc sẽ biết chức năng người dùng liên hệ chat qua fanpage bằng nick facebook của khách, và tin nhắn sẽ hiển thị trong inbox của fanpage.

Không như chat bằng các app khác, muốn quản lý tin nhắn, các bạn phải đăng nhập vào trình quản lý của website bên thứ 3, điều này hạn chế sử dụng rộng rãi trên di động.

Tạo live chat bằng facebook lại khác, vì người dùng trên điện thoại hay máy tính đều có thể kiểm soát, trả lời tin nhắn ngay lập tức. Đa số các bạn đều sài facebook online 24/24 mà.

Lợi ích từ việc dễ dàng trả lời tin nhắn trên di động hoặc máy tính nhanh gọn, chức năng đủ dùng để cho hoạt động kinh doanh, nên tạo Live chat facebook ngày càng được ưu chuộng

Tuy nhiên cũng có bất tiện là người dùng muốn chat phải đăng nhập facebook, điều này cũng không lớn lao gì vì facebook phổ biến khá rộng rãi

Sau khi tìm hiểu cơ bản, các bạn có khái niệm rõ ràng, giờ tiến hành tạo live chat thôi.

+ Các bước tạo live chat facebook:

- Tạo fanpage

- Chèn fanpage vào website

Các bạn vào link https://developers.facebook.com/docs/plugins/page-plugin giống như chèn fanpage vào website thôi, chỉ khác là phần tab bạn sửa thành messages là hiện hộp chat rồi.

Các bạn tham khảo code dưới:

<div class="fb-page" data-href="https://www.facebook.com/facebook/" data-tabs="messages" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/facebook/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook/">Facebook</a></blockquote></div>
<div id="fb-root"></div>
<script>(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.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

- Cơ bản là như trên, để cho các bạn nhìn rõ hơn mình sẽ tạo một div nằm trong thẻ body để làm live chat. phần script có appid

<div class="chat_face">
    <div class="title"><i class="fa fa-commenting" aria-hidden="true"></i> Chat với chúng tôi</div>
<div class="fb-page" data-href="https://www.facebook.com/facebook/" data-tabs="messages" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/facebook/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook/">Facebook</a></blockquote></div>
<div id="fb-root"></div>
<script>(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.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div>

Tùy chỉnh css lại cho đẹp, còn i có class fa thì mình sài font awesome các bạn có thể search google từ khóa

.chat_face{
    position: fixed;
    width: 250px;
    height: auto;
    bottom: -300px;
    right: 15px;
    z-index:888;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;    
}
.chat_face.show_chat_box{
    bottom: 80px;
}
.chat_face .title{
    float:Left;
    width:100%;
    color:#FFF;
    background:#4063b8;
    font-weight:bold;
    text-transform:uppercase;
    line-height:40px;
    padding:0 10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    cursor:pointer;
}

Viết chút script để click và hiện và click vào ẩn hộp live chat

$(document).ready(function() {
    $('.chat_face .title').on('click',function() {
        if($('.chat_face').toggleClass('show_chat_box').hasClass('show_chat_box')){
            $('.chat_face .title').html('<i class="fa fa-times-circle" aria-hidden="true"></i> Đóng')
        }else{
          $('.chat_face .title').html('<i class="fa fa-commenting" aria-hidden="true"></i> Chat với chúng tôi')
        }
    });
});

- Vậy việc tạo live chat facebook cho website hoàn tất.