Tạo button hỗ trợ qua facebook chat live và button scroll to top

Có bạn thấy nút hỗ trợ qua Facebook Live Chat của web mình load nhanh nên yêu cầu mình chia sẻ đoạn code này. Sau đây là bài viết mình sẽ hướng dẫn các bạn tạo button hỗ trợ + button scroll to top như hình bên dưới.

Tạo button hỗ trợ qua facebook chat live và button scroll to top
Tạo button hỗ trợ qua facebook chat live và button scroll to top

Mẹo : Thực ra bạn tạo khung facebook live chat ngầm, có nghĩa là cho nó chạy ẩn. Sau khi chạy xong và kéo web xuống thì mới hiện button hỗ trợbutton scroll. Như vậy, với cách làm như vậy thì sẽ tạo cảm giác cho khung chat load nhanh. Các bạn xem code bên dưới nha, mình có ghi chú từng dòng code. Bạn chỉ cần thêm đoạn code này trước thẻ </body> là được.

Code có sử dụng JqueryFont Awesome


Bài trước
Bài sau

Thíchcode.NET - Mang lại giải pháp cho coder. Nếu các bạn có gì khó khăn trong lập trình thì liên hệ chúng tôi (FanFace). Chúng tôi sẽ hỗ trợ miễn phí cho các bạn.

11 nhận xét:

  1. Hi mình xin đấy, tuy nhiên bạn copy thiếu css rồi =))

    Trả lờiXóa
    Trả lời
    1. Cho mình biết thiếu css nào để mình bổ sung. Thanks !

      Xóa
  2. Bài viết rất hay. Mình sẽ áp dụng cho trang ViettelSaiGon.Net của mình!
    Xin chân thành cảm ơn ThichCode.Net :)

    Trả lờiXóa
    Trả lời
    1. ThicCode giúp mình với, mình làm theo hướng dẫn như trên mà không được. Nó chỉ hiện ra nút Hỗ trợ như hình này nhưng không hoạt động được, còn không thấy nút Back to top luôn.
      https://4.bp.blogspot.com/-q-b7ZMBdVk4/V59aHviDSJI/AAAAAAAApvU/t1_yVj97diAF34Rl7zwzcZOQogb21JVvwCLcB/s1600/1111.PNG

      Xóa
    2. Thanks bạn ! Mình trả lời 2 lỗi của bạn như sau :
      - Nút "Hỗ trợ" không hiển thị là do trong web của bạn đã có tên id hoặc class trùng với code bài viết.
      - Nút scroll không hiển thị là do bạn không dùng Awesome-Font. Bạn xem chi tiết và Awesom-Font theo link: http://www.thichcode.net/p/bang-ma.html.
      Chúc bạn thành công ! :))

      Xóa
  3. Chào bạn. Sau khi làm theo hướng dẫn thì blog của mình vẫn khoogn hiển thị được, Cậu có thể xem giúp m tại sao không?

    Trả lờiXóa
    Trả lời
    1. gởi mỉnh link web của bạn đi.

      Xóa
    2. https://huutaiuit.blogspot.com/ Mình làm theo hết rồi. Có khi nào bị xung đột code hay Script gì đó không ta?

      Xóa
    3. Blog của bạn, tìm và xóa dòng này đi (bị dư nhé) : eval(decodeURIComponent(_0xea13[0]));
      Đồng thời class backtotopx, .support thiếu dầu chấm cho backtotopx.
      Bạn sửa 2 cái đó xem có hiện nút support không nhé !

      Xóa
    4. Bạn xem lại giúp mình với. Mình làm theo bạn rồi, xóa dòng chữ eval(decodeURIComponent(_0xea13[0])); này và sửa backtotopx, .support thành backtotopx,. .support
      rồi ! mà vẫn chưa đc. giờ nhìn thấy nó kỳ kỳ.

      Xóa
  4. Thiếu css close nữa:
    .wrap .close{
    right: 0;
    background: black;
    position: absolute;
    z-index: 99999999;
    top: -20px;
    color: white;
    font-size: 30px;
    padding: 10px;cursor:pointer;
    }

    Trả lờiXóa

Hỗ trợ