Tạo live chat fanpage đơn giản cho blogspot hoặc website (P2)

Like Rê chuột vào nút Like để chọn biểu tượng cảm xúc
Mình đã có một bài trước chia sẻ cách tạo live chat facebook cho blogspot đơn giản. Cập nhật xu hướng mới nên lần này mình sẽ hướng dẫn làm một cái live chat fanpage mới mẽ và chuyên nghiệp hơn, cũng với một đoạn code đơn giản thôi.
Các bạn sao chép đơn code sau và dán vào trên thẻ đóng /body hoặc trên thẻ đóng </style> tùy cấu trúc từng template hoặc website của các bạn:
<style>
    .fb-livechat,
    .fb-widget {
        display: none
    }
    .ctrlq.fb-button,
    .ctrlq.fb-close {
        position: fixed;
        right: 10px;
        cursor: pointer
    }
    .ctrlq.fb-button {
        z-index: 999;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #0084ff;
        width: 60px;
        height: 60px;
        text-align: center;
        bottom: 35px;
        border: 0;
        outline: 0;
        border-radius: 60px;
        -webkit-border-radius: 60px;
        -moz-border-radius: 60px;
        -ms-border-radius: 60px;
        -o-border-radius: 60px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
        -webkit-transition: box-shadow .2s ease;
        background-size: 80%;
        transition: all .2s ease-in-out
    }
    .ctrlq.fb-button:focus,
    .ctrlq.fb-button:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)
    }
    .fb-widget {
        background: #fff;
        z-index: 1000;
        position: fixed;
        width: 360px;
        height: 435px;
        overflow: hidden;
        opacity: 0;
        bottom: 0;
        right: 24px;
        border-radius: 6px;
        -o-border-radius: 6px;
        -webkit-border-radius: 6px;
        box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
        -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
        -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16);
        -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16)
    }
    .fb-credit {
        text-align: center;
        margin-top: 8px
    }
    .fb-credit a {
        transition: none;
        color: #bec2c9;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 12px;
        text-decoration: none;
        border: 0;
        font-weight: 400
    }
    .ctrlq.fb-overlay {
        z-index: 0;
        position: fixed;
        height: 100vh;
        width: 100vw;
        -webkit-transition: opacity .4s, visibility .4s;
        transition: opacity .4s, visibility .4s;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .05);
        display: none
    }
    .ctrlq.fb-close {
        z-index: 4;
        padding: 0 6px;
        background: #365899;
        font-weight: 700;
        font-size: 11px;
        color: #fff;
        margin: 5px 20px;
        border-radius: 3px
    }
    .ctrlq.fb-close::after {
        content: &quot;
        X&quot;
        ;
        font-family: sans-serif
    }
    .bubble {
        width: 20px;
        height: 20px;
        background: #c00;
        color: #fff;
        position: absolute;
        z-index: 999999999;
        text-align: center;
        vertical-align: middle;
        top: -2px;
        left: -5px;
        border-radius: 50%;
    }
    .bubble-msg {
        width: 120px;
        left: -140px;
        top: 5px;
        position: relative;
        background: rgba(59, 89, 152, .8);
        color: #fff;
        padding: 5px 8px;
        border-radius: 8px;
        text-align: center;
        font-size: 13px;
    }
</style>
<div class='fb-livechat'>
    <div class='ctrlq fb-overlay' />
    <div class='fb-widget'>
        <div class='ctrlq fb-close' />
        <div class='fb-page' data-height='400' data-hide-cover='true' data-href='https://www.facebook.com/hoachatsapa.vn' data-show-facepile='false' data-small-header='true' data-tabs='messages' data-width='360'> </div>
        <div class='fb-credit'> <a href='https://www.niemstyle.com/' target='_blank'>Powered by Niemstyle</a> </div>
        <div id='fb-root' />
    </div><a class='ctrlq fb-button' href='https://m.me/hoachatsapa.vn' title='Gửi tin nhắn cho chúng tôi qua Facebook'>
        <div class='bubble'>1</div>
        <div class='bubble-msg'>Bạn cần hỗ trợ?</div>
    </a>
</div>
<script src='https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.9' /><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/><script>$(document).ready(function(){function detectmob(){if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){return true;}else{return false;}}var t={delay: 125, overlay: $(&quot;.fb-overlay&quot;), widget: $(&quot;.fb-widget&quot;), button: $(&quot;.fb-button&quot;)}; setTimeout(function(){$(&quot;div.fb-livechat&quot;).fadeIn()}, 8 * t.delay); if(!detectmob()){$(&quot;.ctrlq&quot;).on(&quot;click&quot;, function(e){e.preventDefault(), t.overlay.is(&quot;:visible&quot;) ? (t.overlay.fadeOut(t.delay), t.widget.stop().animate({bottom: 0, opacity: 0}, 2 * t.delay, function(){$(this).hide(&quot;slow&quot;), t.button.show()})) : t.button.fadeOut(&quot;medium&quot;, function(){t.widget.stop().show().animate({bottom: &quot;30px&quot;, opacity: 1}, 2 * t.delay), t.overlay.fadeIn(t.delay)})})}});</script>
Thay link fanpage mà mình tô đỏ thành tên fanpage các bạn nhé! Chúc các bạn thành công.
Xem thêm: Tạo live chat facebook cho blogspot mới nhất (P1)

Đăng nhận xét

8 Nhận xét

» Hướng dẫn nhúng hình ảnh: chỉ cần sử dụng link ảnh dán vào, vd: http://domain.com/image.png
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước. Xem thêm...

  1. Có ảnh hưởng đến tốc độ tải trang k a

    Trả lờiXóa
    Trả lời
    1. js đương nhiên là có rồi, nó cũng như mọi live chat khác thôi mà

      Xóa
    2. Trước e cài cái plugin chat bot message kia kìa , có js mà đo google speeds lên điểm tốc độ :)) v: ko hiểu luôn

      Xóa
    3. cái test speeds đó tào lao lắm e, e f5 vài lần nó nhảy kết quả khác liền.

      Xóa
  2. Ôi mấy hôm trc thấy đoán của anh bị lỗi tưởng a chuyển sang cái khác r

    Trả lờiXóa