iBegins
 

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>

Ngày 4 Tháng Tư, 2020 ( 458 )

Tagged with: , ,

Bình luận bài viết

Đăng nhập để bình luận và xem các bình luận khác.