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>
