Hướng dẫn tích hợp Customer Chat Facebook vào website

LongAnIT 2/22/2019
Trong bài viết hôm trước tôi đã có giới thiệu với các bạn cách tích hợp live chat facebook vào trong blogspot đây là code mà mình lấy nguồn từ bạn Nguyễn Cao Tú chia sẻ trên site.

Trong bài viết hôm nay mình sẽ tiếp tục hướng dẫn các bạn thêm một cách tích hợp "Live chat Facebook" version 2 vào trong web của mình. Trước tiên mình xin giới thiệu đôi chút về plugin này
Live chat Facebook version 2
"Live chat Facebook" version 2

Customer Chat Facebook là plugin do chính Facebook phát hành, giúp các webmaster có thể tạo khung live chat nhanh chóng, hỗ trợ khách hàng đối với doanh nghiệp cũng như là các site cá nhân. Tuy vẫn còn một số hạn chế về Customize nhưng tất cả những thứ mà mà plugin này mang lại còn hơn cả mong đợi.

Ưu điểm:

  • Hoàn toàn miễn phí (Không cần phải trả phí như một số Live chat khác)
  • Dễ cài đặt và vận hành.
  • Hỗ trợ người dùng nhanh chóng thông qua Facebook messenger.
  • Customer Chat Facebook hiển thị, hoạt đông tốt trên mọi loại trình duyệt trên PC, Mobile và Tablet.

Nhược điểm:

  • Người dùng cần có một tài khoản Facebook để đăng nhập.
  • Chưa thật sự có nhiều tùy biến.
  • Không thể theo dõi người dùng có đang truy cập Online hay không.
  • Các bước tích hợp Customer Chat Facebook vào website:
  • Yêu cầu cơ bản để tích hợp được Customer Chat Facebook vào website là:
  • Bạn phải có một tài khoản Facebook và có một trang Fanpage.
  • Bạn phải có 1 App Facebook để lấy ID cho phần source code của plugin có thể hoạt động.
  • Bước 1: Cấu hình plugin Customer Chat Facebook từ cài đặt của Fanpage Facebook.
  • Đầu tiên, bạn vào trang Fanpage Facebook, nhấn vào Cài đặt nằm ở góc phải trên màn hình. Tiếp theo là chọn Nền tảng Messenger nằm bên thanh menu bên trái. Nhấn chọn tiếp “Chuyển đển phần” Plugin Chat với khách hàng.

Các bước tích hợp Customer Chat Facebook vào website:

Bước 1: Vào trang Fanpage Facebook, nhấn vào "Cài đặt" nằm ở góc phải trên màn hình.

Giao diện cài đặt của trang Fanpage facebook
Giao diện cài đặt của trang Fanpage facebook

Tiếp theo là chọn Nền tảng Messenger nằm bên thanh menu bên trái. Nhấn chọn tiếp “Chuyển đển phần” Plugin Chat với khách hàng như hình.

Plugin Chat với khách hàng
Plugin Chat với khách hàng

Tại khung Plugin chat với khách hàng chọn thiết lập:

Tại cửa sổ Setup Customer Chat chọn Next:

Setup Customer Chat Facebook
Setup Customer Chat Facebook
Tiếp theo bạn cần thiết lập vài thông số cho plugin:
  • Ngôn ngữ: Bạn có thể thiết lập ngôn ngữ tùy ý.
  • Lời chào: Để mặc định hoặc muốn tùy chỉnh bạn có thể nhấn vào “Thay đổi”.


Thiết thông thông số ngôn ngữ và lời chào cho live chat
Thiết thông thông số ngôn ngữ và lời chào cho live chat

Sau đó nhấn “Tiếp” để chuyển sang bước tiếp theo.

Bước 2: Bạn có thể thay đổi màu khung chat, thời gian phản hồi và nhấn “Tiếp” để chuyển đến bước cuối cùng.

Thay đổi màu khung hộp thoại chat

Bước 3: Bước cuối cùng của phần thiết lập
  • Thêm tên miền trang web của bạn vào và nhấn “Lưu”.
  • Copy đoạn code mà Facebook cung cấp.


Thiết lập tên miền và sao chép code vào trong website
Thiết lập tên miền và sao chép code vào trong website

Nhấn “Hoàn tất” để hoàn thành việc thiết lập

Hoàn tất thiết lập Facebook live chat
Hoàn tất thiết lập Facebook live chat 

Sau khi hoàn tất xong bạn đăng nhập vào Blogger và dán đoạn code vào trước thẻ đóng </body> thế là xong

Nếu bạn nào lười thì có thể dùng code bên dưới nhớ sửa Page ID thành Page ID của FB bạn nhé
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : &#39;v3.2&#39;
    });
  };
  (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 = &#39;https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!-- Your customer chat code -->
<div attribution='setup_tool' class='fb-customerchat' page_id='328582747712453'>
</div>


Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách tích hợp Customer Chat Facebook (LiveChat Facebook) vào website trong quá trình thực hiện nếu có báo lỗi hay code không chạy vui lòng comment bên dưới để được hỗ trợ.


1 nhận xét

Nếu phát hiện spam bạn sẽ bị xử lý. Bạn có thể đặt backlink tại đây Hướng dẫn đặt backlink nofollow tại đây