Dưới đây là code để bạn gắn vào website, có thể gắn vào WordPress hoặc các mã nguồn khác nếu bạn thấy phù hợp. Code Hotline mình đã lấy từ các web khác và đưa lên để làm content cho mọi người dùng hãy chia sẻ nếu thấy hữu ích nhé.
Demo online tại : https://webnganh.vn/
Mọi người dùng nhớ tải các icon và sửa lại hình ảnh và icon nhé.
Dưới đây là code hotline đẹp như hình cho các bạn.
<div id="hotline-btn" class="hotline-fixed" title="Liên hệ ngay">
<span class="title-popover"><div class="arrow"></div>Liên hệ ngay</span>
<i class="icon-whatsapp"></i><div class="hotline-fixed--group">
<div class="fixed-btn fixed-btn-sm">
<a target="_blank" href="tel:0965218696">
<div class="support-icon nt-rotate"><i class="icon-whatsapp"></i> </div>
<span>0965 21 8696</span></a>
</div>
<div class="fixed-btn fixed-btn-sm support-btn--zalo">
<a target="_blank" href="//zalo.me/0965218696"><img class="support-icon--img nt-rotate" src="https://webnganh.vn/wp-content/uploads/2020/10/zalo-icon.png" alt=""><span>Chat Zalo</span></a>
</div>
<div class="fixed-btn fixed-btn-sm support-btn--zalo">
<a target="_blank" href="https://www.messenger.com/t/ifnt.vn">
<img class="support-icon--img nt-rotate" src="https://webnganh.vn/wp-content/uploads/2020/10/facebook-messenger.png" alt=""><span>Facebook</span></a>
</div>
</div>
</div>
<style>
.hotline-fixed {
position: fixed;
z-index: 1020;
right: 120px;
bottom: 90px;
background: #d10a00;
width: 50px;
height: 50px;
border-radius: 999px;
font-size: 1.7rem;
color: #ffffff;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; }
.hotline-fixed:after {
position: absolute;
top: 0;
left: -1px;
width: 50px;
height: 50px;
border: 4px solid #cd1818;
content: '';
border-radius: 50%;
-webkit-transform: scale(0.9);
transform: scale(0.9);
z-index: -1;
-webkit-animation: ripple 2s ease-out infinite;
animation: ripple 2s ease-out infinite; }
.hotline-fixed--group {
position: absolute;
bottom: 60px;
left: 0px;
display: block;
z-index: 1020;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
width: 160px; }
.hotline-fixed--group .fixed-btn-sm {
position: relative;
left: auto;
bottom: auto;
padding: 5px 10px 5px 40px;
min-width: auto;
margin-top: 10px; }
.hotline-fixed--group .fixed-btn-sm .support-icon {
position: absolute;
border: 1px solid #000;
width: 30px;
height: 30px;
position: absolute;
border-radius: 50px;
left: 3px;
top: 2px;
background: #000;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px; }
.hotline-fixed--group .fixed-btn-sm.support-btn--zalo a {
color: #fff; }
.hotline-fixed--group .fixed-btn-sm.support-btn--zalo img {
width: 24px;
height: 24px;
position: absolute;
left: 6px;
top: 5px; }
.hotline-fixed--group.show {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(-10px);
transform: translateY(-10px); }
.hotline-fixed:hover {
cursor: pointer; }
@-webkit-keyframes ripple {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 1; }
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0; } }
@keyframes ripple {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 1; }
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0; } }
.title-popover{
width: 84px;
height: 30px;
background: #2f2b2b;
position: absolute;
font-size: 12px;
left: 60px;
display: flex;
align-items: center;
justify-content: center;
bottom: 8px;
border-radius: 5px;
top: unset;
text-align: center;
z-index: -1;
}
.title-popover .arrow{
position: absolute;
display: block;
left: calc((6px + -1px) * -1);
width: 6px;
height: 12px;
margin: .3rem 0;
top: 4px;
}
.title-popover .arrow::after, .title-popover .arrow::before{
position: absolute;
display: block;
content: "";
border-color: transparent;
border-right-color: transparent;
border-style: solid;
}
.title-popover .arrow::before {
right: 0;
border-width: 6px 6px 6px 0;
border-right-color: rgba(0,0,0,.25);
}
.title-popover .arrow::after {
right: 1px;
border-width: 6px 6px 6px 0;
border-right-color: #2f2b2b;
}
.fixed-btn {
min-width: 160px;
max-width: 180px;
background: #FFC107;
position: fixed;
left: 10px;
bottom: 10px;
color: #fff !important;
font-size: 16px;
font-weight: bold;
border-radius: 999px;
padding: 8px 8px 8px 44px;
display: block;
margin: 0 auto; }
.fixed-btn a {
color: #252525;
text-decoration: none; }
.fixed-btn--icon {
position: absolute;
border: 1px solid #252525;
width: 30px;
height: 30px;
position: absolute;
border-radius: 50px;
left: 7px;
top: 5px;
color: #252525;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.fixed-btn--img {
height: 40px;
border-radius: 126px;
position: absolute;
left: 0px;
top: 0; }
.fixed-btn--zalo {
background: #2196f3;
left: 10px;
bottom: 60px;
color: #fff; }
.fixed-btn--zalo a {
color: #fff; }
.nt-rotate {
-webkit-animation: Rotate 1.3s linear 1.3s 5;
animation: Rotate 1.3s linear 1.3s 5;
-webkit-animation-iteration-count: 5;
animation-iteration-count: 5;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite; }
@-webkit-keyframes Rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
4% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
8% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
12% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
16% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
20% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
24% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
@keyframes Rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
4% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
8% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
12% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
16% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
20% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
24% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); } }
</style>
<script>
$("#hotline-btn").click(function(){
$('.hotline-fixed--group').toggleClass('show');
$('.body-overlay').toggleClass('open');
});
</script>
