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

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

  1. Thông tin rất bổ ích cho website kinh doanh trực tuyến, tôi sẽ làm theo hướng dẫn áp dụng vào site fpt24h.com của tôi

        1. Chào bạn,
          Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

    1. Bài viết của Tú rất hỗ ích. Cảm ơn Tú đã chia sẻ.Mong Tú có nhiều bài viết hay hơn

    1. Chào bạn,

      Tú dã update lại nhé. Lần đàu update code này ko để ý là WordPress nó dịch luôn nên nhiều chỗ bị thiếu. Tú đã sửa rồi đó. Bạn thao tác lại nhé.

  2. Chào Tú.
    Mình chỉnh sửa trên blog thì báo lỗi ở dòng js.src = “//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5”;
    Bạn cho hỏi cách khắc phục với

    1. Chào bạn,

      Xin lỗi bạn đoạn code trên chưa chạy được trên Blogspot. Bạn chuyển giúp Tú dấu ” thành dấu ‘ là sử dụng được. Do blogspot sử dụng xml, hoặc bạn có thể thêm tiện ích xuống cuối footer với kiểu là HTML và chèn đoạn code này nhé.

  3. Bạn nào dùng wordpress có thể sử dụng plugin “ZOTABOX”, chỉ cần cài vào và sử dụng rất nhanh và đơn giản, ko cần đụng gì đến code cả. Và tích hợp cả trên mobile nhìn khá đẹp. Demo trên web mình đây nhé: http://balothocam.com/

    1. Chào bạn,
      Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

  4. Cũng mới lạ và hấp dẫn nhưng với 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. thì chỉ thử xem như thế nào chứ không dùng lâu dài cho weblog được bạn nhỉ!

    1. Chào bạn,

      Cái này có vài tháng rồi. Bạn cân nhắc xem có phù hợp với khách hàng của mình không rồi hãy dùng nhé.

      1. Rất cảm ơn Tú về code chat này. Nhưng làm sao để có thể sửa phần “nhập tin nhắn cho chanh tuoi.com” và phần ở dưới thành tên trang web của mình Tú nhỉ.

        1. Chào bạn,
          Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

    1. Chào bạn,
      Nó sẽ hiện thông báo trong phần tin nhắn của fanpage nhé. Tú nhận được suốt, bạn có thể cầu hình nhận thông báo của fanpage vào tài khoản cá nhân. Tìm phần setting của fanpage nhé.

  5. Anh ơi sao em cho code vào thấy hiển thị nhưng không mở được hộp thoại lên chỉ có mỗi dòng chữ “Phản hồi của bạn”

    1. Chào bạn,
      Bạn kiểm tra lại các bước làm đã gắn đúng chưa nhé. Cái code này đơn giản và gần như ko có xung đột với bất kỳ phần nào của Website. Tú cài đặt mọi thứ đều ok.

  6. ad ơi cho mình hỏi làm cách nào để hộp chát hiện lên ngay khi vào web mà không cần phải ấn vào

    1. Chào bạn,
      Chỉnh lại code sẽ làm được việc này. Bạn tìm display:none chỉnh thành display:block

  7. Ấn gửi tin nhắn cho page thì nó lại yêu cầu xác thực ảnh để gửi anh à? Mà cái khung thì nhỏ, không biết có ai gặp trường hợp nv không ạ. :'(

    1. Chào bạn,
      Tú cũng chưa gặp, nếu bạn giải quyết hay có giải pháp, hãy chia sẻ. Cảm ơn.

  8. Em chào anh Tú.
    Bài viết của anh rất hay và hữu ích, em thấy để thêm hình ảnh fanpage có nút like page ý.
    Nhìn khung chat sẽ sinh động hơn. Em có dùng mấy đoạn code khác nhưng nó lại không đóng mở khung chat.

    1. Chào bạn,
      Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

  9. Dùng Công cụ chat của Facebook cho website khá hiệu quả. Khách hàng nhắn tin xong thoát ra thì không bị mất mà nó vẫn lưu ở inbox của khách hàng. Khác với các phần mềm live chat khác khách out web là ko liên hệ được
    * Tuy nhiên có 1 điều muốn cải thiện là Không muốn hiện trên mobile vì trình duyệt trên mobile ko đăng nhập facebook. Muốn nt thì phải đăng nhập rất bất tiện.
    Tú xem có sửa được chỉ hiển thị trên PC không. Thanks

        1. Chào bạn,
          Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

    1. Facebook đang thử nghiệm việc này vào tháng 10/2017. Dự là sắp tới có rồi nhé, có mình sẽ update.

    1. Cũng như mình phân tích ở trên. Nếu phú hợp hãy làm.

      Mình có dùng Vchat 1 thời gian, nhưng giờ nó mất phí lại thiếu tính năng xem trước nội dung chat, mình khuyên dụng tawk.to ổn hơn rất nhiều. Có 1 cái nữa là nó từ Vật Giá, mình ko tin tưởng lắm khi để database khách hàng ở đó :D.

  10. Chào bạn. mình có dùng qua theo hướng dẫn của bạn, cảm nhận là chạy khá mượt, giao diện ổn, Tuy nhiên thiếu mất phần thể hiện fanpage để khách hàng có thể tự click vào like (Giúp tăng thêm fanpage) nên hơi tiếc. Có thể sẽ là làm khó cho bạn nhưng nếu được thì bạn có thể viết thêm phần thể hiện fanpage giống như của trang này phát triển không https://zotabox.com/zbv2/facebookchat

    1. Đầu tiên, bạn vào link này, làm theo hướng dẫn để lấy đoạn mã nguồn (code) thích trang FB về rồi chèn vào sau thẻ .
      Tiếp theo, bạn chèn đoạn mã này vào bên dưới thẻ trong đoạn mã nguồn mà Chủ thớt đã chia sẻ. (Bỏ dấu ngoặc kép ở đầu và cuối thẻ div đi, chỉnh sửa tên trang FB và thông số cho phù hợp)

      TRUNG KIEN JSC


      Cuối cùng là xem thành quả thôi. Mình vừa làm xong, bạn có thể vào website fibcbag.vn để xem 🙂

  11. Còn muốn thay chữ phản hồi của bạn bằng chữ khác như là Hỗ trợ khách hàng thì sao ạ

    1. Chào bạn,
      Ở trong đoạn code của mình có đoạn > Phản hồi của bạn. Bạn chỉ cần thay phần text trên bằng nội dung bạn muốn trước khi gắn vào website là đc bạn nhé.

  12. Tại sao cùng là 2 trang web một trang em làm lại có Favicon của FB bên cạnh chữ liên hệ,còn 1 trang thì không có Favicon vậy bác,với lại đổi màu hover chữ(màu vàng sang màu khác ở chỗ nào vậy bác)

  13. Chào Tú !
    Thật hữu ích Tú ạ. Tuy nhiên, khi chèn vào bật cửa sổ lên chỉ là màu trắng, không hiển thị nội dung, liệu có phải code Facebook đã thay đổi ko Tú ?

    1. Chào bạn,
      Tú không rõ lắm, nhưng Tú đã nâng cấp code này lên 1 bản khác. bạn thử cài đặt lại xem.

  14. Bạn Tú ơi! mình làm theo hướng dẫn của bạn copy đoạn code bỏ vào đầy đủ sao nó chỉ hiện mà không mở được hợp thoại chat. Giúp với

    1. Chào bạn,

      Chắc xung đột ở đâu đó về java script, bạn gửi kèm cho Tú địa chỉ web của bạn. Tú check thử.

    1. Chào bạn,
      Cái này ko chỉnh thêm logo được, vì bản chất là nó nhúng của facebook vào. nên một số tùy biên bị hạn chế.

  15. Cái này rất hat vì hiện nay rât nhiều người sử dụng Facebook, nên dùng nó sẽ rất hiệu quả. Nhưng không biết những cách này đã có sự chấp nhận từ facebook chưa, vì nếu có thì Facebook đã hỗ trợ cách tích hợp như Like Page rồi

    1. Cái này là của facebook, hiện nó chuẩn bị cho phép live chat luôn bạn nhé. Vậy nên yên tâm.

  16. Cho mình hỏi tại sao cửa sổ Live Chat hiện ra trên Mobile bình thường nhưng hiển thị trắng tinh khi xem trên PC.

  17. Anh Tú ơi e cho vào phần chân trang có được ko ạ. hiện e đang cho thì nó hiện chữ phản hồi của bạn nhưng clik vào thì ko có gì ạ

  18. bạn ơi sao m trích hợp vào nó báo lỗi ; sau đó thì mình bỏ toàn bộ dấu ” trong code đó thành ‘ cũng kô đc

    1. Chào bạn,
      Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

  19. Mình đã thử đi thử lại mà sao vẫn không tích hợp đc page của mình vào web, hix. Tích hợp page ” chanhtuoicom” thì lại ok, ad hỗ hợ mềnh với

    1. Chào bạn,
      Cái này có thể là do xung đột với JS. Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

  20. anh ơi cho em hỏi em muốn di chuyển box sang phải thì sửa thế nào ạ, em cảm ơn ạ

    1. Chào bạn,
      Thường cái này nên để bên trái vì đó là màn hình phụ. Nếu muốn qua phải tìm cái float:left sửa thành float:right

  21. js.src = “//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5”

    Mình bị lỗi phần này là sao bạn nhỉ

    1. Chào bạn,
      Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

  22. Chào Tú.Bài viết rất hữu ít.Tuy nhiên mình cũng có câu hỏi tương tự bạn Bùi Phú Truyện.Trên máy tính thì hộp chat hiện lên mục login để đăng nhập tài khoản fb.Còn trên giao diện ĐT nhấp vào nó đứng yên bạn ạ.Mình cũng đã thử đổi display từ “none” sang “block” thì ngược lại nó cứ hiện lên khung to khi nhấp để thu nhỏ thì không được.Chỉ xảy ra lỗi trên ĐT

    1. Chào bạn,
      Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn là sẽ sử dụng được và chăm sóc khách hàng tốt hơn.
      Chúc bạn thành công.

  23. Chào Tú! Cám ơn bạn vì những chia sẻ rất hữu ích. Mình đang dùng Blogspot đã tích hợp được biểu tượng bằng tiện ích html/java nhưng khi click vào biểu tượng nó không hiển thị được phần chat bạn check giúp mình nhé http://www.dennhay.com/

    1. Chào bạn,
      Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

  24. js.src = “//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.5”;
    nó báo dòng này lỗi làm sao tú

    1. Chào bạn,
      Hiện Tú đã cập nhật lại đoạn code và nâng cấp nó hỗ trợ trên cả bản mobile. Bạn có thể cài đặt lại theo hướng dẫn.

  25. Tuyệt vời. Cảm ơn Tú !
    Cho mình hỏi thêm là cái này có ảnh hưởng đến load nhiều file js ảnh hưởng đến SEO ko ạ ?

  26. CHÀO AD VÀ CÁC ANH EM, MÌNH CÓ LÀM THEO THỦ THUẬT AD MÀ LÀM MÃI KHÔNG THÀNH CÔNG. CHÁN THẬT, CÓ HIỂN THỊ LOGO MÀ LICK VÀO TRẮNG TINH…

  27. Xin chào anh Cao Tú, anh có thể chỉ thêm 1 chút về đo lường chuyển đổi cho nút này được k ạ?
    Gắn mã tracking vào nút Send kiểu gì ạ?

    1. Chào bạn,

      Nếu muốn làm phải tìm hiểu về GTM (Google tag manager) hoặc trackview chắc cũng làm đc. Mình cũng chưa thử, để bữa nào có thời gian ngâm cứu lại, nhưng khả năng là làm đc.

    1. Bạn thử lại nhé, chắc lúc đó server của mình nó bị lỗi. Hồi sáng nó bị treo 1 lúc, giờ ok rồi.

  28. Anh Tú ơi, em cho vào được rồi, gửi ok mà khi bấm dấu X đóng lại không được ạ. Anh hướng dẫn e với ạ. Thanks anh nhiều!

    1. Chào bạn,
      Làm theo cách này khi khách nhắn tin nó đổ hết về fanpage đó. Đúng yêu cầu của bạn rồi.

    1. Chào bạn,

      Bạn có thể vào Admin, vào Theme, tìm cái header chèn vào trước thẻ body là được. Thực ra cái code này chạy chỗ nào cũng được :D.

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 *