Blogspot, Web design, Wordpress

Tích hợp “LiveChat” (Gửi tin nhắn) của Facebook vào Website

Thêm box gửi tin nhắn, hỗ trợ trực tuyến (live chat) Facebook trên Website. Gọi nó là “Live Chat” kể cũng không...

Written by Tú Cao · 5 min read >
Gửi tin nhắn, livechat facebook trên Website

Thêm box gửi tin nhắn, hỗ trợ trực tuyến (live chat) Facebook trên Website. Gọi nó là “Live Chat” kể cũng không thật sự chuẩn xác, nhưng xét về bản chất thì mình không có từ nào tốt hơn. Cũng khá lâu rồi Facebook đã cho phép chúng ta tích hợp phần live chat này giữa Website và Fanpage.

Người dùng khi truy cập Website, có thể để lại tin nhắn, chat trực tiếp với Fanpage. Hầu hết mọi người đều có tài khoản Facebook, khi khách hàng chat với bạn thông qua đó, tin nhắn sẽ được gửi tới fanpage. Bất kỳ khi nào bạn trả lời, họ sẽ nhận được thông báo, tỷ lệ đọc là 100%, cao hơn nhiều so với Email hay SMS, nó hoàn toàn miễn phí.

Gửi tin nhắn, livechat facebook trên Website
Tích hợp, cách làm nút gửi tin nhắn, livechat facebook trên Website

Hiện tại có nhiều phần mềm có khả năng re-inbox và bạn có thể nhắn tin, gửi chương trình khuyến mại cho khách hàng trọn đời và miễn phí. Điều mà các công cụ Livechat khác không thể làm được. Đó là lý do vì sao rất nhiều Website đang chuyển qua phương pháp này, nó rất phù hợp với các web nhỏ và vừa.

Với cả Website lớn thì thời điểm bạn không có người trực livechat truyền thống (ngoài giờ hành chính) tại sao ko bật livechat facebook lên?

Phần live chat, nút gửi tin nhắn Facebook phù hợp cho

  • Những Website bán hàng có lượng truy cập thấp đến trung bình.
  • Blog, website cá nhân muốn tương tác và trao đổi với độc giả không thường xuyên.
  • Website có lượng truy cập lớn, nhưng bán hàng chủ yếu qua facebook.
  • Website dạng cộng đồng như diễn đàn, câu hỏi về live chat không nhiều.

Nhược điểm:

  • Người gửi có thể gửi tin nhắn đi nhưng sẽ không nhận được tin nhắn trả lời ngay trên cửa sổ chat của web.

Ưu điểm

  • Hoàn toàn miễn phí
  • Khả năng tương tác với người dùng tốt hơn. Tỷ lệ đọc tin nhắn của khách hàng là 100%.
  • Hỗ trợ trên mobile (ở bản này Tú đã nâng cấp sẽ đưa người dùng qua ứng dụng gửi tin nhắn của Facebook)
  • Gọn nhẹ, hoạt động và tích hợp đơn giản.
  • Giao diện, hỗ trợ Tiếng Việt.
  • Tăng LIKE, tương tác cho Fanpage.
  • Thu thập nhiều hơn thông tin người dùng, giúp thu hút và re-inbox fanpage hiệu quả.

Rất nhiều Website hướng dẫn cách tích hợp và cấu hình nhưng nó hơi khó làm, và không sử dụng được trên mobile. Ngoài ra để tăng hiệu quả, Tú có trang trí thêm câu chào “Bạn cần hỗ trợ” và số 1 để tạo cảm giác họ có tin nhắn (một trải nghiệm quen thuộc với những ai dùng fb nhiều sẽ bị thu hút). Bản này khác biệt nhất là tích hợp dễ dàng và tự phát hiện ra trình duyệt người dùng sử dụng là Desktop hay Mobile để xử lý.

Hướng dẫn tích hợp Live Chat, box gửi tin nhắn Facebook trên Website.

Bước 1: Điền link fanpage của bạn VD: https://www.facebook.com/chanhtuoicom

Bước 2: Nhấn vào nút Tạo nút Chat

Bước 3: Bạn Copy đoạn code bên dưới và gắn vào thẻ dưới thẻ <body> trên Website bạn muốn hiển thị.

Lưu ý: Một số Website có nút Back Top Top (có thể sẽ bị xung đột) nó bị đè vào nút Gửi tin nhắn Facebook này nên Tú có làm thêm một phần tùy biến là Khoảng cách với chân trang. Mặc định sẽ là 50px, nếu bạn muốn thay đổi bạn có thể cung cấp một con số khác. VD: 100

Credit: Powered by TT

Update 7/5/2019: Trong trường hợp bạn làm theo hướng dẫn, nhưng khi nhấn vào nút chat nó lại không hoạt động. Nguyên nhân là do fanpage của bạn chưa đặt tên người dùng (tức chưa đặt link).

VD: https://www.facebook.com/Sửa-chữa-điên-thoại-tại-vinh-nghệ-an-967357600134318/

Nếu vậy các bạn vào Fanpage của mình với tài khoản admin, sau đó vào mục Giới thiệu => Đặt tên người dùng > Chọn tên nào đó được phép => Nhấn lưu. (Xem hình bên dưới)

Đặt tên cho fanpage (đặt url)
Đặt tên cho fanpage (đặt url)

Thêm một lưu ý, Fanpage phải có trên 25 like thì Facebook mới cho phép đặt tên (cũng có trường hợp là chỉ cần 10 like).

Hướng dẫn với bạn bạn dùng WordPress.

Truy cập Admin => Appearance  (Giao diện) ==> Editor (Sửa) => Tìm file header.php

Kéo xuống hoặc nhấn CTRL + F và Tìm thẻ <body và thêm đoạn code ở bên trên xuống dưới.

Thêm nút chat facebook trên website WordPress
Thêm nút chat facebook trên website WordPress

Sau đó lưu lại để hoàn tất (nhấn nút Cập nhật tập tin)

Hướng dẫn cho Blogspot

Bước 1: Bạn truy cập Blogger.com và chọn Blog cần thay đổi.

Bước 2: Chọn Bố cục

Bước 3: Chọn Thêm tiện ích (có thể chọn nút thêm tiện ích ở bất kỳ vị trí nào)

Bước 3: Hộp thoại bật lên, Chọn tiếp  HTML/JavaScript 

Bước 4: Dán code đã tạo được ở trên và dán vào nội dung của thuộc tính này sau đó nhấn Lưu

Chèn code và nhấn Lưu để hoàn tất
Chèn code và nhấn Lưu để hoàn tất

Vậy là xong, hãy quay lại trang Blogspot của bạn và tận hưởng kết quả.

Rất đơn giản vậy thôi, không tùy chỉnh thêm gì cả. Bạn nào biết CSS có thể tùy biến theo ý thích của mình ở trong <style>. Khi triển khai tính năng này đã giúp hiệu quả bán hàng tăng rất nhiều. Đặc biệt là việc thu thập thông tin khách hàng ở những thời điểm không có người trực livechat vào buổi tối (21h,22h là thời điểm online nhiều nhất trong ngày của người dùng).

Mình đã nâng cấp nó ngày 20/4/2019 so với bản cũ, giao diện và nhiều tính năng tốt hơn, đã cài đặt trên nhiều website phức tạp nó đều hoạt động tốt. Hy vọng sẽ giúp ích cho bạn, nếu gặp khó khăn hãy comment xuống bên dưới nhé.

Chúc bạn thành công.

Written by Tú Cao
Tôi là Tú Cao. Tôi chia sẻ và dạy mọi người cách kinh doanh trên Internet. Bởi vì "Hạnh phúc không phải là nhận, hạnh phúc chính là sự cho đi". Bài viết này dựa trên quan điểm, hiểu biết của Tôi. Bạn tự cân nhắc và chịu trách nhiệm khi làm theo, nếu nó hữu ích với bạn hãy Mời Tú Cao một tách CÀ PHÊ. Profile

248 Replies to “Tích hợp “LiveChat” (Gửi tin nhắn) của Facebook vào Website”

  1. Mình chèn code vào thì bị mất hiển thị slider revolution, chắc là bị xung đột js, có cách nào xử lý được không Tú nhỉ?

  2. mình coi phần preview thì thấy nó có hiển thị facebook chat thành công rồi, nhưng khi ra ngoài website thì lại không thấy hiển thị. Vậy là mình bị lỗi gì nhỉ?

  3. mình có làm như cách bạn chỉ nhưng nó chỉ hiển thị nút chat chứ k đánh chữ chat được và trang web cũng bị phóng to ra

  4. Phiên bản này đã được nâng cấp và chỉnh sửa thêm 1 số đoạn code vào ngày 20/4/2019. Nếu các bạn gặp lỗi xung đột hãy làm lại, thường do các bạn gắn sai hoặc xoá nhầm code khác của Website.

    Cần thêm hỗ trợ gì, các bạn comment xuống bên dưới, hoặc có thể inbox cho Tú vào buổi tối khoảng 21h30. Chúc bạn thành công.

    1. mình có làm như cách bạn chỉ nhưng nó chỉ hiển thị nút chat chứ k đánh chữ chat được

      1. bạn để ý phần đánh chữ là ở phần trên của khung chat, chứ phần khung cạnh nút send/gửi là không nhập được chữ vào.

  5. Mình muốn cửa sổ nó hiện lên luôn chứ không phải thu gọn vào thì sửa như nào bạn nhỉ

    1. Chào bạn,

      Làm vậy không ổn vì sẽ bị che nội dung của trang, ảnh hưởng xấu tới trải nghiệm người dùng.

    1. Bạn gặp lỗi gì chụp giúp mình cái hình hoặc để lại link web mình vào xem nhé. Mình vào bằng cái url bạng ắn lúc comment, thấy website chạy bt nhé.

    1. Đổi đuợc bạn nhé, bạn thay cái đoạn chỗ code loằng ngoằng base64 bằng cái link ảnh mới là được. Nhưng mà cái icon này là của fb nó là chuẩn rồi, chắc không thay cái gì trải nghiệm tốt hơn đâu.

  6. Mình chèn code vào thì bị mất hiển thị slider revolution, nó nói bị xung đột js, có cách nào xử lý được không Tú nhỉ?

    1. Bạn cài vào rồi cho Tú cái link, hoặc inbox qua nick Tú nhé. Cái này mình update rồi, bị cũng hơi lạ.

      1. đơn giản dễ dùng mà tiếc quá bị xung đột nhiều vế trang web như slider nên không thể dùng đc.:((

  7. Anh Tú Cao cho em hỏi sao em gắn vô mesenger nó ko chạy theo trang mà đứng ở vị trí cuối wed vậy anh? (www.banmefood.net)

  8. E chào a ạ,a có thể chỉ giúp e các chỗ đổi màu toàn bộ cái icon đc ko a? E chỉ tìm thấy chỗ khung tròn bên ngoài còn bên trong thì vẫn chưa tìm ra ạ :3

  9. cho mình hỏi mình chèn vào rồi nó chỉ hiển chị icon nhưng hk chat được. Để chat được phải làm thế nào vậy Tú chỉ giúp.

    1. Chào bạn,

      Khả năng là do fanpage của bạn chưa đặt url (VD: VD: https://www.facebook.com/Sửa-chữa-điên-thoại-tại-vinh-nghệ-an-967357600134318/ )

      Trong trường hợp bạn làm theo hướng dẫn, nhưng khi nhấn vào nút chat nó lại không hoạt động. Nguyên nhân là do fanpage của bạn chưa đặt tên người dùng (tức chưa đặt link).

      Nếu vậy các bạn vào Fanpage của mình với tài khoản admin, sau đó vào mục Giới thiệu => Đặt tên người dùng > Chọn tên nào đó được phép => Nhấn lưu. (Xem hình bên dưới)

  10. Đã làm đầy đủ,
    hiển thị oke.
    nhưng khi nhập text vào và gửi báo lỗi.
    thử với fb/chanhtuoi thì được.
    fb mình đã đổi tên đầy đủ.

    1. Chào bạn,

      Mình cũng không rõ lắm, nhưng bạn có thể xem lại các phần cài đặt của Fanpage xem sao. Bạn thử cái fabe của chanhtuoi.com được mà fanpage bạn ko được thì chắc chắn nó nằm ở cái fanpage đó rồi.

      VD: url, hay trạng thái xuất bản.

  11. Mong hướng dẫn giúp mình cài đặt vào website với ạ, mình làm rồi nhưng k hiển thị, cảm ơn Tú Cao

  12. Chào anh, anh cho em hỏi với, cái template của em có cài uchat vậy có cách nào để xóa cái uchat rakhỏi template không ạ. Em thấy dùng facebook chat đã là khá đủ rồi

    1. Bạn chỉ cần gỡ đoạn code uhchat ra là được, Sau đó cài code bên trên vào là đc bạn nhé.

  13. cho mình hỏi mình chèn vào rồi nó chỉ hiển chị icon nhưng hk chat được. Để chat được phải làm thế nào vậy Tú chỉ giúp.

    1. Chỉ cần gắn code kia vào là đc, khi người dùng truy cập website thì họ có thể click vào đó mà chat như bt bạn nhé. Nếu ko chat đc bạn Imbox qua fb cho mình fb.com/nguyencaotu

    2. Chào bạn, bạn bấm vào cái icon là có thể chat được. Không cần làm thêm gì nhé. Nếu gặp lỗi là do cái fanpage cài đặt chưa đúng.

      Inbox mình cái web, mình check online fb.com/nguyencaotu

  14. Anh Tú ơi sao bên em gắn vô rồi mà nó đòi đăng nhập, khi bấm đăng nhập thì cũng ko thành công là s ạ? Em cám ơn anh

    1. Vấn đề này Tú đã hỗ trợ qua facebook, do cài đặt về phân quyền của website, chứ ko liên quan gì tới code livechat fb trên.

  15. Mình tin tưởng và sử dụng custom live chat facebook của bạn. mặc dù Custom Messenger của Facebook đã được tích hợp tuy nhiên nó bất lợi khi mình lại không có quyền truy cập quản trị fanpage của họ. Vì thế chỉ còn cách này thôi. hihi. Cảm ơn nhe

  16. Cảm ơn code này rất hữu ích vì icon hiện ra chênh ngoài màn hình tý nên khách dễ dàng tiếp cận, rất hữu ích cảm ơn bạn nhiều

  17. Chào Bạn Bạn Có Thể Chỉ Mình Cho Nó Ẩn Trên Giao diện máy tính không bạn, mình chỉ muốn nó hiện trên điện thoại, Cảm ơn bạn nhiều

  18. code này lỗi rồi đúng k ad. hiện biểu tượng chat nhưng k thể chat đc ad fix sớm nhé

    1. Code này dùng bình thường bạn nhé. Nếu gặp lỗi bạn chèn code vào website và nhắn địa chỉ website lên đây, mình sẽ check và trả lời cho bạn qua blog hoặc email.

    1. Mình có vào website tinhdaulachampa.net mà bạn để trong phần comment thì thấy chưa gắn code này lên, nên ko xem được vì sao, bạn cứ gắn vào sau đó gửi email qua cho mình hoặc trả lời bình luận ở blog nhé.

    1. Bạn cứ cho tên cụ thể, có gì mình check, vì cũng không rõ lắm là mọi người cần tích hợp những cái gì.

  19. Cảm ơn bạn nhé, những mình hỏi làm sao để thay đổi vị tris của biểu tưởng chat box trên website nhỉ?

    1. Muốn đổi vị trí thì cần chỉnh đoạn CSS tìm ở trong đoạn code bạn gắn vào có chỗ right bạn chỉnh qua left.

  20. Mình chạy multisite chèn cả 2 code vào nhiều giao diện thấy nó khá chậm, hay là do ảnh hưởng đến host vậy Tú ơi.

    1. Chào bạn,

      Toàn bộ những phần này đều là gọi từ facebook. Nếu có chậm là do tốc độ mạng. Bạn thử chuyển đoạn code xuống phần footer nhé. Vì mình nghĩ trải nghiệm bạn thấy chậm là do một số tính năng nào đó đòi hỏi trạng load hết mới thực thi.

  21. Em chào anh. Rất cảm ơn anh đã hướng dẫn ạ.
    Em làm theo và bị 2 lỗi như sau:
    – Mất chức năng silder.
    – Click vào chat box thì không thể gõ được dữ liệu để tương tác ạ.
    Đây là website của bên em: https://www.vinajapan.com/
    Rất mong nhận được sự hỗ trợ của anh ạ.
    Em cảm ơn và chúc anh nhiều sức khỏe

  22. Dạ chào anh, web em đã tích hợp nút chat messenger lên website. Hiện tại em có chạy ads cho website đấy, vậy có cách nào để em phân biệt được 1 khách bất kì nhắn tin vô messenger, là nguồn từ web hay từ organic của page ko ạ, fanpage em cũng đang chạy song song. Rất mong nhận được sự giúp đỡ của anh

    1. Chào bạn,

      Có thể tracking đc bạn nhé. Chèn đoạn mã đo lường để bắt sự kiện của cái nút. Nó hơi dài, hôm nào có thời gian mình sẽ viết về chủ đề này.

  23. Tú ơi, mình đã chèn rồi nhưng ko thấy livechat hiển thị, có cần xác minh doanh nghiệp không vậy Tú?

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *