Hôm nay Hùng Coder hướng dẫn cho các bạn một đoạn code khá hay cho các bạn bán hàng online hay tự vấn hổ trợ trực tiếp :), một dạng như chat online nhưng lại có thể gọi điện hoặc nhắn tin cho người đó ^^~.


Nếu bạn nào cần thì có thể bỏ đoạn code bên dưới và bỏ trên thẻ : </body> và lưu lại.

<!-- Support online hungcoder.com -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' rel='stylesheet'/>
<style>
.support-online{position:fixed;z-index:999;left:1%;bottom:11%}
.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}
.support-online i{width:40px;height:40px;background:#43a1f3;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:1.9;position:relative;z-index:999}
.support-online a span{border-radius:2px;text-align:center;background:#67b634;padding:9px;display:none;width:180px;margin-left:10px;position:absolute;color:#fff;z-index:999;top:0;left:40px;font-size:14.5px;transition:all .2s ease-in-out 0;-moz-animation:headerAnimation .7s 1;-webkit-animation:headerAnimation .7s 1;-o-animation:headerAnimation .7s 1;animation:headerAnimation .7s 1}
.support-online a:hover span{display:block}
.support-online a{display:block}
.support-online a span:before{content:&quot;&quot;;width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #67b634 transparent transparent;position:absolute;left:-10px;top:10px}
.kenit-alo-circle-fill{width:60px;height:60px;top:-12px;position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(0,175,242,0.5);opacity:.75;right:-12px}
.kenit-alo-circle{width:50px;height:50px;top:-6.5px;right:-6.5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.1;border-color:#0089B9;opacity:.5}
.support-online .btn-support{cursor:pointer}
</style>
<div class='support-online'>
<div class='support-content'>
<a class='call-now' href='tel: 0868 7878 92' rel='nofollow'>
<i aria-hidden='true' class='fa fa-whatsapp'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
<span>Hotline: 0868 7878 92</span>
</a>
<a class='mes' href='https://www.facebook.com/messages/t/100002632149630'>
<i aria-hidden='true' class='fa fa-facebook-official'/>
<span>Nhắn tin facebook</span>
</a>
<a class='zalo' href='https://chat.zalo.me/'>
<i aria-hidden='true' class='fa fa-comment'/>
<span>Zalo: 0868 7878 92</span>
</a>
<a class='sms' href='sms:0868787892'>
<i aria-hidden='true' class='fa fa-weixin'/>
<span>SMS: 0868 7878 92</span>
</a>
</div>
<a class='btn-support'>
<i aria-hidden='true' class='fa fa-user-circle'/>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
</a>
</div>
<script type='text/javascript'>
 //<![CDATA[
$(document).ready(function(){

    $('a.btn-support').click(function(e){
      e.stopPropagation();
      $('.support-content').slideToggle();
    });
    $('.support-content').click(function(e){
      e.stopPropagation();
    });
    $(document).click(function(){
      $('.support-content').slideUp();
    });
});
  //]]>
</script>
<!-- End Support -->
Và qua đoạn code trên bạn như thay đỗi những phần mình bôi đỏ trên đoạn code đó nhé :)


DEMO BÊN TAY TRÁI CỦA CÁC BẠN


Chúc các bạn thành công với thủ thuật này nhé :)