Thêm chức năng chat Facebook trực tiếp trên website

Học WordPress

Chúng ta không còn mất công đi khắp nơi tìm cách tích hợp live chat nữa vì giờ đây. Với sự cung cấp miễn phí live chat của facebook cùng giao diện siêu đẹp. Thích hợp với mọi website thì bạn hoàn toàn có thể tạo cho website một button live chat

Thêm chức năng chat Facebook trực tiếp trên website mà không cần phải thông qua ứng dụng Messenger. Đây là một trong những tính năng rất nhiều người đang tìm kiếm. Trong bài viết này chúng ta sẽ cùng khám phá chức năng mới mẻ này của Facebook.

Thêm chức năng chat Facebook trực tiếp trên website

Thêm chức năng chat Facebook trực tiếp trên website.
Thêm chức năng chat Facebook trực tiếp trên website.

Bên dưới góc của website sẽ xuất hiện một button (nút nhấn) như ảnh trên. Người dùng ấn vào là có thể chat trực tiếp với fanpage của bạn. Như vậy sẽ tăng tương tác và khách hàng trực tiếp cho công ty bạn. Và tin vui hơn nữa là tính năng này facebook cung cấp miễn phí.

Customer Chat Facebook cho Website

Customer Chat Facebook là một ứng dụng mới được Facebook phát triển. Tuy chỉ mới là phiên bản Beta nhưng bản thân mình nhận thấy chức năng này rất tuyệt vời. Các bạn có thể demo dưới đây:

Demo: https://hoccodetot.com/

Tham khảo: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin

Tiến hành cấu hình live chat Facebook trên website

Yêu cầu người dùng

  • Có một Fanpage.
  • Một App Facebook.
  • Một website cá nhân (để bạn tích hợp live chat lên).

Bước 1: Truy cập vào Fanpage của bạn > Cài đặt > Nền tảng Messenger > Thêm tên miền website của bạn vào phần Whitelisted Domains

Cấu hình chát facebook trực tiếp trên website
Cấu hình chát facebook trực tiếp trên website

Bước 2: Copy đoạn code bên dưới và dán vào trước thẻ </body> trên website của bạn. Nếu bạn dùng nền tảng WordPress thì mở file footer.php ra và kéo xuống dưới cùng là thấy.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };
  (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 = "https://connect.facebook.net/vi_VN/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-customerchat" page_id="PAGE_ID"></div>

Tiếp theo các bạn hãy thay thế một số phần thông tin trong code thành thông tin của bạn.

  • your-app-id là ID App Facebook của bạn, tạo ID App tại đây.
  • PAGE_ID là ID Fanpage của bạn bằng cách (dán link Fanpage của bạn vào đây là thấy)
Thay đổi một chút thông số - chat facebook trên website
Thay đổi một chút thông số – chat facebook trên website

Vậy là xong. Quay ra ngoài và tận hưởng thôi các bạn ơi, thật quá là đơn giản. Mình hi vọng thủ thuật nhỏ này có thể giúp các bạn tăng doanh thu website nhé.

Lưu ý:
Hãy tắt các plugin live chat khác để tránh xung đột với code này của facebook nha. Bởi vì hai live chat không thể hiển thị cùng một vị trí được