Hướng dẫn tích hợp Chat Facebook (Facebook Messenger) vào website WordPress rất đơn giản

Bạn đang tìm 1 công cụ chat để hỗ trợ khách hàng cho Website của mình? Bạn đã từng dùng qua Zopim Chat, vChat, Subiz chat,…nhưng tất cả đều bắt phải trả phí mới có thể chat với nhiều người và sử dụng thêm nhiều tiện ích và bạn không thích điều đó. Bạn đã từng nghĩ đến giải pháp tích hợp Chat Facebook vào web nhưng lại không biết làm sao để chèn vào. Vậy nên trong bài viết này, NguyenHungPlus.Com sẽ giúp bạn cách để thêm Chat Facebook (Facebook Messenger) vào website đơn giản nhất.

huong-dan-tich-hop-chat-facebook-vao-website-rat-don-gian

Facebook mới phát hành Customer Chat Facebook giúp cài chat Facebook cho web. Bây giờ bạn có thể làm theo hướng dẫn cài Customer Chat Facebook cho web để cài trực tiếp livechat của Facebook mà không cần cài qua plugin của bên nào khác.

Những ưu điểm của Facebook chat cho website

  • Ưu điểm lớn nhất so với các công cụ chat khác là bạn có thể chat với rất nhiều người 1 lúc mà lại hoàn toàn miễn phí.
  • Bạn có thể biết tên khách hàng, có thể xem thông tin về khách hàng qua facebook của họ.
  • Khách hàng không phải khai báo thông tin hay đăng ký tài khoản để chat trên web của bạn.
  • Lưu trữ tin nhắn của khách hàng không giới hạn, bạn có thể tìm lại tin nhắn bất cứ khi nào cần.
  • Điểm đặc biệt là bạn có thể support khách hàng mọi lúc mọi nơi chỉ cần 1 chiếc smartphone có cài đặt trình quản lý Fanpage Facebook là có thể chat như khi online facebook chat với bạn bè.
  • Facebook Messenger cho website hiển thị tốt trên Mobile, iPad và PC.

Nhược điểm của Chat Facebook cho website

  • Khách hàng của bạn phải có tài khoản Facebook và phải đăng nhập FB để có thể chat. Nhưng đây chỉ là 1 nhược điểm nhỏ vì đa số người dùng hiện nay đều có tài khoản facebook.
  • Bạn không biết được khách hàng đang xem sản phẩm gì, đã xem những sản phẩm nào như trình chat Zopim.

Tham khảo thêm

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

Cách 1: Tích hợp chat Facebook vào web bằng code

Nếu bạn không thích cài đặt plugin chat Facebook cho WordPress thì có thể sử dụng đoạn code sau để chèn chat Facebook vào web WordPress. Cách làm như sau:

Copy đoạn code dưới đây và chèn vào trước thẻ </body> trong file footer.php trong thư mục theme bạn đang dùng hoặc child-theme (nếu có).

Code chat Facebook cho web

<!-- NguyenHungPlus.Com Facebook Messenger  -->
<div class="drag-wrapper drag-wrapper-right">
<div data-drag="data-drag" class="thing">
<div class="circle facebook-messenger-avatar facebook-messenger-avatar-type0">
<img class="facebook-messenger-avatar" src="https://nguyenhungplus.com/chat-fb/facebook-messenger.svg" />
</div>
<div class="content">
<div class="inside">
<div class="fb-page" data-width="310" data-height="310" data-href="https://www.facebook.com/blogcongdongcom" data-tabs="messages" data-small-header="true" data-hide-cover="false" data-show-facepile="true" data-adapt-container-width="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/blogcongdongcom"><a href="https://www.facebook.com/blogcongdongcom">Loading...</a></blockquote></div></div>
</div>
</div>
</div>
<div class="magnet-zone">
<div class="magnet"></div>
</div>
</div>
<link type='text/css' rel='stylesheet' href='https://nguyenhungplus.com/chat-fb/style.css' />
<script type='text/javascript' src='https://nguyenhungplus.com/chat-fb/jquery.event.move.js'></script>
<script type='text/javascript' src='https://nguyenhungplus.com/chat-fb//rebound.min.js'></script>
<script type='text/javascript' src='https://nguyenhungplus.com/chat-fb/index.js'></script>
<!-- NguyenHungPlus.Com Facebook Messenger  -->

Lưu ý: Trong đoạn code trên bạn thay link các đoạn facebook.com/blogcongdongcom thành link fanpage facebook của bạn là ok.

Cách 2: Tích hợp chat Facebook vào web bằng plugin

Để tích hợp Chat Facebook vào web WordPress thì ngoài cách dùng code ở trên bạn có thể sử dụng plugin dưới đây cho nhanh nhé.

Bước 1: Cài đặt và kích hoạt plugin WP Facebook Messenger

Bước 2: Truy cập vào Cài đặt (Settings) -> Facebook Messenger và thiết lập các thông số cho plugin.

huong-dan-tich-hop-chat-facebook-vao-website-rat-don-gian-1

Các thông số như sau:

  • Your Facebook Fan Page URL: Nhập link fanpage Facebook để nhận tin nhắn.
  • Custom text for button: Tùy biến dòng chữ của nút Chat Messenger trong trang chi tiết sản phẩm của WooCommerce.
  • Upload icon or image: Tải lên icon hoặc hình ảnh tùy biến cho nút Messenger. Bản free chỉ chọn được icon.
  • Main Color: Thiết lập màu sắc chính cho icon và nút Chat Messenger.
  • Custom text for open Messenger app button: Tùy biến dòng chữ của nút mở ứng dụng Messenger trên di động. Chỉ có tác dụng khi tích chọn Open Messenger app button và chỉ có trên bản Pro.
  • Language: Chọn ngôn ngữ hiển thị cho Chat Messenger.
  • Display: Tùy chọn nơi hiển thị Chat Messenger. Chọn Display all pages but except để hiển thị ở tất cả các trang, ngoại trừ những trang bạn chọn ở bên dưới; Display for page… để chỉ hiển thị trong trang do bạn chọn ở bên dưới.
  • Các mục khác bạn không cần quan tâm vì nó chỉ có trong bản trả phí.

Sau khi thiết lập xong nhớ ấn Save để lưu lại.

Đây là kết quả sau khi chèn Facebook Chat vào web

huong-dan-tich-hop-chat-facebook-vao-website-rat-don-gian-2

Và icon chat Facebook này bạn có thể kéo thả bất cứ chỗ nào ở cạnh trái hoặc phải trên giao diện web. Khi click vào nó thì khung chat mở ra cho phép người dùng có thể chat với fanpage.

huong-dan-tich-hop-chat-facebook-vao-website-rat-don-gian-3

Lưu ý: Nếu khi click vào mà không hiển thị ra khung chat thì rất có thể fanpage của bạn đang tắt chat. Bạn hãy đăng nhập vào quản lý fanpage và chọn Cài đặt -> Chung -> Tin nhắn và tích vào Cho mọi phép người và Trang liên hệ riêng với Trang của tôi như sau.

huong-dan-tich-hop-chat-facebook-vao-website-rat-don-gian-4

Đặc biệt, nếu bạn sử dụng Woocommerce để tạo web bán hàng thì cũng dễ dàng tích hợp Facebook Messenger vào giao diện giúp khách hàng dễ dàng liên hệ với bạn. Ngoài ra, plugin WP Facebook Messenger cũng hỗ trợ thêm widget để bạn có thể chèn vào sidebar hoặc footer.

huong-dan-tich-hop-chat-facebook-vao-website-rat-don-gian-5

Quá tuyệt vời phải không nào! Giờ bạn đã có thể chèn chat Facebook vào web WordPress nhanh chóng mà không cần sử dụng code rườm rà mất thời gian nữa nhé.

Nếu muốn dùng thêm các chức năng khác bạn có thể tham khảo bản trả phí của plugin Facebook Messenger for WordPress ở đây nhé.

Hướng dẫn hỗ trợ LiveChat Facebook trên điện thoại

Để có thể hỗ trợ khách hàng của bạn từ điện thoại di dộng thì bạn cần có đủ các điều kiện sau:

  • Điện thoại phải được kết nói Internet bằng Wifi hoặc 3G.
  • Điện thoại phải được cài đặt ứng dụng trình quản lý trang Facebook

Sau khi đã cài đặt đủ những thứ trên bạn truy cập vào ứng dụng để chat như khi bạn chat trên facebook. Vậy là bạn có thể hỗ trợ khách hàng qua facebook chat trên website.

Để cài ứng dụng trình quản lý trang Facebook cho điện thoại bạn chọn ứng dụng phù hợp với hệ điều hành của bạn để cài đặt.

Cài đặt ứng dụng trình quản lý trang Facebook

Android IOS (Iphone/Ipad) Windows Phone

Lời kết

Với cách này bạn có thể hỗ trợ khách hàng của mình qua facebook chat cực tốt. Hi vọng với bài viết chia sẻ cách tạo khung Chat Facebook cho website này bạn có thể tạo cho website của mình khung support giúp khách hàng dễ dàng tương tác với bạn và bạn có thể bán được nhiều hàng hơn nhé.

Bạn có đang sử dụng chat Facebook cho web không? Hãy cho mình biết cách bạn dùng để chèn chat Facebook vào web như nào bằng để lại bình luận ở bên dưới nhé. Chúc bạn thành công!

Hướng dẫn tích hợp Chat Facebook (Facebook Messenger) vào website WordPress rất đơn giản
5 31 votes

Bình luận mới

  1. Dương Việt Duy 24/05/2018
  2. Hẹn 27/03/2018
    • Nguyễn Hùng 30/03/2018
  3. Tùng 05/03/2018
  4. Lê Văn Hưng 06/12/2017
    • Nguyễn Hùng 06/12/2017
  5. hocvatlythcs 02/05/2017
    • Nguyễn Hùng 03/05/2017
      • hocvatlythcs 03/05/2017
  6. mohivn 29/03/2017
  7. Minh Clear 27/03/2017
  8. Tan 25/03/2017
  9. Quý 14/11/2016
  10. CoTvn 03/09/2016
  11. Phan Anh Vũ 03/09/2016
  12. Shunga Việt Nam 14/08/2016
  13. Phạm Tâm 31/07/2016
  14. Bùi Thơm 26/05/2016
  15. ngoc nguyen 06/05/2016
    • Nguyễn Hùng 06/05/2016
      • ngoc nguyen 06/05/2016
        • Nguyễn Hùng 06/05/2016
  16. Dang 27/04/2016
    • Nguyễn Hùng 27/04/2016
  17. muahaxinh 22/04/2016
    • Nguyễn Hùng 25/04/2016

Để lại ý kiến của bạn

Hello! Tớ là Nguyễn Hùng, blog này tớ xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tớ biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua blog, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho tớ nha. → Xem tiếp"
Đăng ký nhận bản tin!

Đăng ký nhận bản tin!

Đăng ký email để nhận bài viết mới và các khuyến mãi, quà tặng trên blog Nguyễn Hùng.

Đăng ký thành công!