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. Bạn cho nó vào sau thẻ đoạn đầu tiên hoặc

      chứ ko phải ở trước

      bị xung đột với cái gì đó trong web rồi. làm lại nhé.

      1. Sao em làm mà nó hiển thị bảng trống không có gì hết em sử dụng Blogspot

    2. Trường hợp của bạn ko biết giống mình ko ,bạn thử chỉnh sửa đường dẫn tới fanpage trong đoạn code copy đó xem sao
      tìm tới từ khóa này class=”ctrlq fb-close”><div class="fb-page" data-href="https:

  1. Mình làm theo hướng dẫn mà khi click vào thì lại lên khung trắng thôi. Mong giúp đỡ.

  2. Em sử dụng plugin chat mới của fb để viết plugin chat trên wordpress, giờ em đặt nút chat ở trang chi tiết sản phẩm, khi người dùng click vào sẽ mở nút chat ở góc lên, cho em hỏi là có làm được như vậy không anh, và hướng làm như nào ạ. em cảm ơn
    facebook.new2new.com/product/ninja-silhouette-2/

    1. Em đặt đoạn code này ở trang nào thì nó hiển thị ở trang đó.

      Website có Home, 404, Page, Post nếu cài thêm plugin sẽ có thêm các trang tương ứng. Nếu muốn tất cả đều hiện hãy gắn vào header.php

        1. Bản này ko phải là bản chat ngay trên website. Bản chat ngay trên website chờ 1 thời gian nữa, hoặc làm theo hướng dẫn của facebook.

        2. Bạn ơi, mình muốn tích hợp messenger trên website giống website của bạn ạ, vậy mình làm như thế nào ạ, mình đã coppy đoạn code trên thì lại lên khung trắng thui ạ. Mong bạn giúp mình. Thanks bạn ạ

  3. mình muốn hiển thị live chát trên phiên bản dành cho di động thì làm thế nào vậy bạn?
    mình có dùng plugin WPtouch Mobile Plugin

  4. Hi Add, em làm đúng như hướng dẫn, khi hiển thị lên website thiếu nút gửi ạ, add giúp em với

  5. Thanks Tú.
    ở cửa sổ chat, mỗi lần nhấn nút Send để gửi tnhan, muốn gửi tin tiếp phải click vào nút Send Another. mình muốn gửi xong, có thể gửi tiếp ( ko cần click lại nút Send Another) thì như sao bạn?
    Thanks!

  6. Dạo quanh mấy bài viết liên quan đến chủ đề này thì chỉ thấy có admin Tú chỉ ra được ưu điểm – nhược điểm của App FB. Cảm ơn nhiều nhé!

  7. Chào anh. Bài viết của anh rất hay. Cho em hỏi nếu muốn khắc phục lỗi nhược điểm để người dùng chat tại web thì phải làm sao ạ. Vì em thấy co nhiều trang web làm được

    1. Chào bạn,

      Facebook thì cần phải login mới gửi được, plugin nào cũng vậy bạn nhé. Xem kỹ cái mình mô tả ở trên nhé.

  8. Hi Bác Tú,

    Cảm ơn bài viết của bác, em thì dốt code lắm em dùng plugin của một thằng hỗ trợ chat luôn,đang tập làm shop bán hàng nek.
    Sẵn tiện bác cho em hỏi luôn. Bác xem giúp em cái site (em để trong thông tin ấy) lúc em cái plugin woocommerce là nó lỗi, nó sinh ra chuỗi ký tự này “?v=e14da64a5617” mà em tắt cái plugin đó là nó k có những ký tự đó. Bác giúp em cho nó biến mất được không ạ. Em chả hiểu bị gì. hi

    1. Chào bạn,

      Nếu link có dấu ? ở sau thì kệ nó, google sẽ tự loại bỏ. Kệ nó không có vấn đề gì cả nhé.

  9. Chào Bác TÚ,
    Mình hỏi sao chỉ mỗi trình duyệt Chrome trên PC mới dùng được cái live chat này,
    tại sao cách trình duyệt khác như firefox thì nhấn vào nút ms chỉ hiện lên popup trắng xóa

      1. a ơi, e làm trên chrome theo các bước vậy, nhưng vẫn không thấy khung chat xuất hiện thị khi f5 lại web ạ.

  10. Có cách nào để tương tác trực tiếp không Tú Cao nhỉ? Mình muốn khách hàng có thể nói truyện trực tiếp luôn trên widget ở website của mình. Cái này có hạn chế là khách hàng phải vào facebook thì mới tương tác tiếp được.

  11. hi, mình làm mà page thông báo “Không thể kết nối với website để kiểm tra lỗi fatal, vì vậy các thay đổi PHP đã được hoàn tác. Bạn sẽ cần tải file PHP được cập nhật thông qua cách thức khác, ví dụ như sử dụng sFTP.”

    Như vậy mình phải làm sao đây?

  12. Cảm ơn anh Tú về bài viết,
    Mình góp ý thêm 1 cách đơn giản hơn để chèn live chat cho website và tracking được người dùng, đó là công cụ “Customer chat” trong harafunnel.com

  13. Khi mình dán code thì đã chát được nhưng Facebook trên web của mình bị vỡ tỷ lệ. Không còn đúng như ban đầu nữa. Mong ad hỗ trợ

  14. Chào anh Tú, cám ơn bài chia sẻ của anh, em đã gắn code vào website wordpress, đã thấy hiện icon messenger trên màn hình, nhưng khi em bấm vào chat không được anh ạ, nó chỉ bảo “Powered by Chanhtuoi”, hi vọng được anh giải đáp

  15. Tích hợp vào có làm chậm website không, minh thấy rất hữu ích vì tác giả đã chia sẻ. Website lớn không tích hợp sợ chậm.

    1. Chào bạn,
      Thực ra nó load, nhưng không chậm hơn là bao. Nếu bạn thấy cần thiết, bạn có thể cài.

  16. Không lấy được đoạn mã làm như link bị chết rồi bạn à
    Mong giúp đở
    Zalo 0902830950

  17. Minh làm ok mà sao trên mobi không thấy nút line chat nhỉ
    Hỗ trợ mình với

  18. Mình tích hợp vào website thì một số hiệu ứng slide sản phẩm và map bị lỗi. Nhờ ad fix dùm ạ

  19. Chát thì Ok mà bị lỗi khi kết hợp với Woocommecre. Lỗi xảy ra ở trang giỏ hàng, khi xóa hoặc cập nhật số lượng sản phẩm =>> bị xoay mãi không cập nhật được. Hy vọng bạn có cách khắc phục lỗi này, cám ơn!

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 *