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.

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ợ và 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 Jquery + Font Awesome

<!--Button hỗ trợ-->
<div class="support"><i class="fa fa-comment"></i> Hỗ trợ</div>

<!--Button scroll to top-->
<div class="backtotopx"><i class="fa fa-angle-up"></i></div>

<!--
HTML load Facebook Live Chat
Bạn chỉ cần đổi https://www.facebook.com/thichcode.net thành link fanface của bạn là xong
-->
<div class="wrap">
    <div class="close"><i class="fa fa-times"></i></div>
    <div
        class="fb-page"
        data-adapt-container-width="true"
        data-height="320"
        data-hide-cover="false"
        data-href="https://www.facebook.com/thichcode.net"
        data-show-facepile="true"
        data-show-posts="false"
        data-small-header="false"
        data-tabs="messages"
        data-width="280"
        style="position: relative; z-index: 9999999; left: 0px; bottom: 21px; border-left: 1px solid #fff; border-top: 1px solid #fff;"
    ></div>
</div>
<!--CSS cho button hỗ trợ và button scroll to top-->
<style>
    backtotopx,
    .support {
        visibility: hidden;
        z-index: 2;
        background: rgba(46, 204, 113, 0.9);
        color: #fff;
        font-size: 20px;
        width: 37px;
        height: 37px;
        line-height: 37px;
        text-align: center;
        position: fixed;
        bottom: 10px;
        right: 10px;
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.4s;
    }

    .backtotopx.arlniainf,
    .support.arlniainf {
        visibility: visible;
        cursor: pointer;
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: all 0.4s;
    }

    .support {
        width: auto;
        padding: 0 10px;
        right: 50px;
    }
    .wrap {
        right: 10px;
        position: fixed;
        bottom: -11px;
        display: none;
        z-index: 3;
    }
</style>
<script type="text/javascript">
    //Javascript xử lý button hỗ trợ và button scroll to top
    $(function () {
        $(window).scroll(function () {
            $(this).scrollTop() > 400 ? $(".backtotopx,.support").addClass("arlniainf") : $(".backtotopx,.support").removeClass("arlniainf");
        }),
            $(".backtotopx").click(function () {
                return (
                    $("html,body").animate(
                        {
                            scrollTop: 0,
                        },
                        400
                    ),
                    !1
                );
            });
    });

    $(".support").click(function () {
        $(".wrap").fadeIn();
    });

    $(".wrap .close").click(function () {
        $(".wrap").fadeOut();
    });
</script>