21 Tháng 5, 2018 Tác giả: Thịnh Nguyễn Chuyên mục: Công cụ

Hướng dẫn kích hoạt nền tảng chat messenger để tích hợp chatbox vào website

Ở bài trước mình đã viết hướng dẫn các bạn kích hoạt tính năng chat messenger cho fanpage thì ở bài này mình tiếp tục hướng dẫn các bạn tích hợp chat messenger của fanpage cho website của bạn làm chatbox tăng độ tương tác.

Xem thêm: Hướng dẫn kích hoạt tính năng tin nhắn trên fanpage

Sau khi bạn kích hoạt tin nhắn trên trang fanpage thì bạn làm công việc tiếp theo là kích hoạt chế độ “Nền tảng messenger” thì mới có thể sử dụng được chatbox trên website tích hợp. Nhưng nếu như bạn đã kích hoạt rồi thì bạn chỉ việc kích hoạt luôn nền tảng messenger.

  1. Sau khi bạn đã kích hoạt chế độ tin nhắn trên bạn quay sang tab bên trái bạn sẽ thấy danh sách các tính năng thì bạn kích chọn “Nền tảng Messenger”.
  2. Tiếp đến bạn thêm tiên miền vào phần nền tảng messenger. Lưu ý: bạn thêm tên miền thì tên miền của bạ phải kích hoạt SSL tức là https thay vì http như bình thường. Để sử dụng ssl thì bạn mua chứng chỉ số ssl và cài vào vps, hosting của website.
  3. Tiếp theo bạn kéo xuống dưới và thiết lập “Plugin chat với khách hàng”.
  4. Tại đây bạn bấm nút “Thiết lập” nó sẽ hiển thị cửa sổ popup. Bạn bấm nút “Tiếp”.
  5. Tiếp đến bạn chọn ngôn ngữ tiếng việt và đổi lại lời chào cho phù hợp rồi bấm nút “Tiếp”.
  6. Tiếp theo bạn chọn chế độ thời gian phản hồi rồi bấm nút “Tiếp”.
  7. Tiếp theo nó hiển thị danh sách tên miền mà bạn đã thêm, tại đây bạn có thể thay đổi lại hoặc thêm mới trong phần số 1. Tiếp bạn chọn tích “Tôi đã thêm mã vào trang web” ở ô số 2 để nút hoàn tất hiển thị. Ở ô số 3 là mã code và bạm bấm vào nó tự động copy cho bạn. Bạn sẽ paste vào bộ gõ văn bản và lấy ID của fanpage trong đoạn code đó.


    Ví dụ như hình mình có đoạn code.

    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>(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 = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    
    <!-- Your customer chat code -->
    <div class="fb-customerchat"
      attribution="setup_tool"
      page_id="182427458556909">
    </div>
    

Bạn copy ID của fanpage đó và cho vào block chat_messenger trong mã nguồn là được.Trong đoạn code trên bạn sẽ có page_id = “182427458556909” thì số 182427458556909 là id của fanpage của bạn.

  1. Tiếp đến bạn bấm nút “Hòa tất” ở ô số 4 ở hình trên.

Sau khi hoàn thành nó sẽ hiển thị như hình sau

Lưu ý: website của bạn phải kích hoạt chứng chỉ số ssl (đường dẫn site https) thì chatbox mới hoạt động. Đó là yêu cầu quy định của Facebook đưa ra.

Chúc các bạn thành công!

Tác giả: Thịnh Nguyễn

Chuyên gia chia sẻ kiến thức về lập trình, thiết kế web và tối ưu hệ thống server.

Chia sẻ bài viết này:

18 bình luận

  • Tuan

    15/08/2021 lúc 08:31

    Anh oi e dang tim hieu de tich hop mensenger chat tren wedsite dang chay localhost co duoc khong

    • Thịnh Nguyễn

      27/08/2021 lúc 11:24

      trên localhost ko dc nhé, vì messenger nó xác định domain online

  • Lê Tiến Đạt

    17/10/2019 lúc 11:05

    Mình copy đoạn này rồi cho vào mục nào của WordPress nhỉ

    • Thịnh Nguyễn

      17/10/2019 lúc 11:10

      Bạn copy mã của fb rồi nhúng vào cuối file footer.php trước thẻ đóng của theme bạn đang xài là được

Để lại bình luận của bạn

Địa chỉ email của bạn sẽ không được công bố rộng rãi. Các trường bắt buộc được đánh dấu *

Bài viết liên quan

Cách khắc phục Teamviewer bị out sau 5 phút kết nối

Teamviewer là một trong những phần mềm điều khiển máy tính từ xa tốt nhất hiện nay, nó không chỉ có phiên bản dành cho máy tính mà có cả phiên bản dành cho thiết bị di động thông minh. Hiện nay với số lượng người dùng khá là nhiều thì thường khi cài đặt […]

Xem chi tiết →

Tổng quan về framework bootstrap trong lập trình web

Bootstrap là gì? Bootstrap là một framework được phát triển bởi Twitter mà Twitter thì nó là mạng xã hội nổi tiếng tương tự như facebook. Bootstrap là một tợp hợp các thuộc tính, giá trị có sẵn giúp các web web designer tiết kiệm thời gian thực hiện một dự án web không phải tạo […]

Xem chi tiết →

Hướng dẫn xác định tọa độ một địa điểm cần thiết trên Google Maps

Google Maps là một dạng bản đồ miễn phí đến từ Google. Nó cho phép chúng ta xem được bản đồ của toàn cầu, bất kể vị trí nào mà bạn muốn. Không những thế mà Google đang ngày càng hoàn thiện nó với những công nghệ tiên tiến như xác định khoảng cách, đường […]

Xem chi tiết →