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

code

Thích Code | July 10, 2016 | Edit Post

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 như hình bên dưới.

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

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

HTML + CSS + JS
Code by ThichCode.NET

<style>
    backtotopx,
    .support {
        visibility: hidden;
        z-index: 2;
        background: rgba(46, 204, 113, .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 .4s;
    }
    
    .backtotopx.arlniainf,
    .support.arlniainf {
        visibility: visible;
        cursor: pointer;
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        transition: all .4s;
    }
    
    .support {
        width: auto;
        padding: 0 10px;
        right: 50px;
    }
    .wrap {
        right: 10px;
        position: fixed;
        bottom: -11px;
        display: none;
        z-index: 3;
    }
</style>

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

<div class="backtotopx"><i class="fa fa-angle-up"></i></div>

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

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

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

Thích Code | July 10, 2016 | Edit Post

10 comments:

Huỳnh Phụng BloggerJuly 11, 2016 at 11:53 AM
Hi mình xin đấy, tuy nhiên bạn copy thiếu css rồi =))
Viettel TelecomAugust 1, 2016 at 6:04 AM
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 :)
TaiDenRoiOctober 15, 2016 at 6:50 AM
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?
Văn Thắng ĐặngOctober 21, 2016 at 10:16 PM
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;
}

ThichCode.NET

My blog

articles about technology, tricks, programming, ... from practical experience.

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

10 comments:

Most read

Latest