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

  • Thuận

    07/03/2019 lúc 11:57

    Tại sao khi click vào trò chuyện trên messenger thì pop up hiển thị ra là 1 vậy anh?

    • Thịnh Nguyễn

      13/03/2019 lúc 17:43

      cái này bạn phải hỏi trực tiếp trên trang develop của facebook nhé, nó quy định chỉ có một cái thui 😀

  • Cao

    03/03/2019 lúc 16:31

    block chat_messenger ở đâu vậy a 🙁

    • Thịnh Nguyễn

      04/03/2019 lúc 11:08

      Block chat này là do người viết code giao diện cho website của bạn, nếu ko có thì bạn copy nguyên đoạn source do fb cung cấp rồi nhúng vào site cũng được

  • hạnh

    29/01/2019 lúc 10:18

    hình như a ở vĩnh bảo hp đúng ko ạ

    • Thịnh Nguyễn

      29/01/2019 lúc 14:41

      Đúng rùi bạn, bạn có vấn đề gì cần giúp đỡ?

  • Hải

    14/01/2019 lúc 15:50

    Sao trang mình không cần https vẫn hiện bình thường. vn3c.net

    • Thịnh Nguyễn

      21/01/2019 lúc 13:33

      Hiện tại mình thấy site bạn không hiện nhé, do bạn chạy https ở dạng cảnh báo đỏ thì nó hiện thôi

  • Hòa

    21/12/2018 lúc 11:43

    Cảm ơn bạn. Làm thế nào để đo lường lượng khách hàng click vào nút chat này bạn nhỉ?

    • Thịnh Nguyễn

      23/12/2018 lúc 23:19

      Cái này thì bạn tích hợp thêm công cụ của fb nhé, mình chỉ hướng dẫn cơ bản để bạn có công cụ chát

  • Hoàng Công Vương

    05/11/2018 lúc 14:51

    Cảm ơn bạn, mình đã thực hiện thành công theo hướng dẫn

  • Tuấn

    02/11/2018 lúc 19:34

    nghĩa là muốn tạo messenger chat cho fanpage nào thì phải dùng tài khoản face đó để tạo app ID hả bạn?.
    còn cái page ID thì mình thấy ngta có HD dán link fanpage của mình vào (findmyfbid. com ) để nó show page ID cho mình chứ tìm trong page mình ko có:D

  • Tuấn

    01/11/2018 lúc 22:01

    Mình dùng trên nukeviet có block fb-messenger thấy có hai mục nhập app ID và page ID vậy nhờ bạn giải thích giúp mình app ID là gì và khác page ID hay không? Mình đã tích hợp vào site này aothunth.com nhưng ko hiểu rõ lắm. (mình nghĩ page ID là ID của trang fanpage nhưng cái app ID thì ko biết là gì)

    • Thịnh Nguyễn

      02/11/2018 lúc 09:54

      APPID là cái id dùng để bạn tạo ứng dụng, hoặc dùng nó trong việc tạo login vào site của bạn, cái này thì bạn phải tự đnăg ký tạo, còn page id thì khi reg fanpage nó tự có luôn theo fanpage rồi

Để 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

Hướng dẫn cách tải về code được chia sẻ trên trang gitlab.com

Bài trước mình hướng dẫn các bạn cách tạo tài khoản gitlab trên trang gitlab thì bài này là cách tải về code được mình share trên trang gitlab.com. Sau khi bạn xem xong hướng dẫn bạn hoàn toàn có thể download về cũng như lời giải đáp cho các bạn đang muốn lấy được […]

Xem chi tiết →

Hướng dẫn tạo mật khẩu ứng dụng của Gmail

Như ở bài trước: Hướng dẫn bật xác thực 2 lớp cho tài khoản Gmail mình đã hướng dẫn các bạn kích hoạt xác thực 2 lớp thì ở bài này mình tiến hành hướng dẫn các bạn tạo mật khẩu ứng dụng SMTP cho việc sử dụng Gmail làm máy chủ mail để tích hợp vào […]

Xem chi tiết →

Các phần mềm cần thiết trước khi cài đặt phần mềm lập trình Aptana

Phần mềm Aptana là một phần mềm lập trình khá quen thuộc với các lập trình viên. Tuy nhiên không phải ai cũng cài được nó đặc biệt là một số phần mềm đi kèm trước khi cài đặt và sử dụng nó một cách bình thường cũng như đồng bộ với các kho code […]

Xem chi tiết →