Gắn hỗ trợ Hotline Zalo Fanpage Facebook vào website

Một website về bán hàng hay dịch vụ chúng ta cần có một giải pháp giúp khách hàng liên hệ với bạn qua hỗ trợ Hotline, Zalo, Fanpage Facebook trên máy tính và điện thoại.

Dưới đây là đoạn code gắn vào để hiện lên hỗ trợ.

Hiển thị trên máy tính – Hiển thị trên di động

<style>
.hotline-footer{
display:none
}
.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background:#7dbd2a;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #21a342!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 15px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
@media (max-width: 549px){
.hotline-footer{
display:block;
position:fixed;
bottom:0;
width:100%;
height:50px;
z-index:99;
background:rgba(0,0,0,0.6);
}
.hotline-footer .left{
width: 65%;
float: left;
height: 100%;
color: white;
line-height: 43px;
text-align: center;
}
.hotline-footer .right{
width: 35%;
float: right;
height: 100%;
line-height: 43px;
text-align: center;
}
.absolute-footer{
font-size:13px
}
.blog-single .large-9, .blog-single .large-3{
flex-basis: 100%;
max-width: 100%;
}
.blog-single .large-3{
padding-left:15px;
font-size:15px
}
.blog-single .large-3 .widget-area .section4{
display:none
}
.tin-tuc-section .cot1-2{
display:none
}
.hotline-footer a{
color:white
}
.hotline-footer a{
display:block;
}
.hotline-footer .left a{
background: #0082d0;
line-height: 40px;
margin: 5px;
border-radius: 3px;
}
.hotline-footer .right a{
background: #3fb801;
line-height: 40px;
margin: 5px;
border-radius: 3px;
}
.hotline-footer .left img, .hotline-footer .right img{
width:30px;
padding-right: 10px;
}
.float-contact{
display:none
}
}</style>
<div class="float-contact">
<button class="chat-zalo">
<a href="http://zalo.me/0965218696">Chat Zalo</a>
</button>
<button class="chat-face">
<a href="http://m.me/dichvuseowebgoogle">Chat Facebook</a>
</button>
<button class="hotline">
<a href="tel:0965218696">Hotline: 0965218696 </a>
</button>
</div>
<div class="hotline-footer">
<div class="left">
<a href="https://messenger.com/t/dichvuseowebgoogle" >Chat Facebook</a>
</div>
<div class="right">
<a href="tel:0965218696">Gọi ngay</a>
</div>
<div class="clearboth"></div>
</div>

Tagged with: code hotline cho web, hotline facebook zalo, share code hotline