Thiết kế website

Code nút gọi ngay cho website bán hàng (Code Call now) full website

English

Nút gọi ngay rất tiện cho việc khách hàng liên hệ ngay cho chủ shop online, vì ngày nay con người luôn hướng tới sự hiện đại và đơn giản, nếu khách hàng đang thích hay đang cần món đồ đăng xem trên website, còn gì hay hơn là khách hàng của bạn chỉ cần chạm vào nút gọi là có thể liên hệ ngay với bạn. Hầu hết các lượt truy cập vào website bán hàng hiện nay lên đến 70% là vào bằng điện thoại smartphone, vì vậy nút gọi ngay sẽ giúp bạn có thêm tới 50% khách hàng so với không có nút liên hệ. Với các nút gọi ngay hầu hết các website gắn vào chỉ là hình nút gọi nhưng không có chữ chỉ dẫn, như vậy rất nhiều khách hàng không hiểu nó là cái gì ?

nút gọi ngaySau đây mình chia sẻ cho các bạn một nút gọi có thể nói là chuẩn nhất hiện nay. Với nút call now có thêm dòng chữ “Bấm để gọi ngay” hoặc “Số điện thoại” đây là code mình tách ra từ một plugin của wordpress. Mình tách ra là để giảm bớt code cho web load nhanh hơn, 2 là có thể áp dụng cho tất cả các loại website khác đều dùng được.

Demo online: https://khomaythegioi.com

Download Full code nút gọi ngay trên website:

Download free

Nên dùng code download trọn bộ.  hoặc copy từng phần theo link .txt bên dưới

  :

<!-- code nút gọi dán vào web. Thường là footer -->
<div class="fix_tel">
<div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon" style="right: 150px; bottom: -12px;">
<div class="ring-alo-ph-circle"></div>
<div class="ring-alo-ph-circle-fill"></div>
<div class="ring-alo-ph-img-circle">

<a href="tel:0946673322"><img class="lazy" src="https://khomaythegioi.com/icon/goi.png" alt="G"></a>

</div>
</div>
<div class="tel">
<a href="tel:0946673322"><p class="fone">Bấm để gọi ngay</p></a>
</div>
</div>

Hiện web chặn sao chép, các bạn copy đoạn mã  Phần HTML này tại link này : https://hocviendinhcao.com/file/code-nut-call-now.txt

Hoặc tự động đảo số

<div class="fix_tel">
<div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon" style="right: 150px; bottom: -12px;">
<div class="ring-alo-ph-circle"></div>
<div class="ring-alo-ph-circle-fill"></div>
<div class="ring-alo-ph-img-circle">

<!-- <a href="tel:0946673322"><img class="lazy" src="https://khomaythegioi.com/icon/goi.png" alt="G"></a>-->
<p id="daoso2"></p>
<script>
if (Math.random() < 0.5) {
text = "<a href='tel:0946673322'><img class='lazy' src='https://khomaythegioi.com/icon/goi.png' alt='G'></a>";
} else {
text = "<a href='tel:0948873322'><img class='lazy' src='https://khomaythegioi.com/icon/goi.png' alt='G'></a>";
}
document.getElementById("daoso2").innerHTML = text;
</script>

</div>
</div>
<div class="tel">
<p id="daoso"></p>

<script>
if (Math.random() < 0.5) {
text = "<a href='tel:0946673322'><p class='fone'>Bấm để gọi ngay</p></a>";
} else {
text = "<a href='tel:0948873322'><p class='fone'>Bấm để gọi ngay</p></a>";
}
document.getElementById("daoso").innerHTML = text;
</script>
</div>
</div>

Web chặn copy, bạn copy đoạn mã đảo số tại link này : https://hocviendinhcao.com/file/code-nut-call-now-dao-so.txt

Phần CSS:

/*them nut call*/

.fone {
font-size: 19px; /* chữ cạnh nút gọi */
color: #f00;
line-height: 40px;
font-weight: bold;
padding-left: 48px; /* cách bên trái cho chữ */
margin: 0 0;
}
.fix_tel { position:fixed; bottom:15px; left:18px; z-index:999;} /* left 18px là cách bên trái 18px. nếu muốn cho nút gọi sang phải thay là right */
.fix_tel a {text-decoration: none; display:block;}
.tel { background: #eee;width:205px; height:40px; position:relative; overflow:hidden;background-size:40px;border-radius:28px;border:none}
.ring-alo-phone {
background-color: transparent;
cursor: pointer;
height: 80px;
position: absolute;
transition: visibility 0.5s ease 0s;
visibility: hidden;
width: 80px;
z-index: 200000 !important;
}
.ring-alo-phone.ring-alo-show {
visibility: visible;
}
.ring-alo-phone.ring-alo-hover, .ring-alo-phone:hover {
opacity: 1;
}
.ring-alo-ph-circle {
animation: 1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;
background-color: transparent;
border: 2px solid rgba(30, 30, 30, 0.4);
border-radius: 100%;
height: 70px;
left: 10px;
opacity: 0.1;
position: absolute;
top: 12px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 70px;
}
.ring-alo-phone.ring-alo-active .ring-alo-ph-circle {
animation: 1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}
.ring-alo-phone.ring-alo-static .ring-alo-ph-circle {
animation: 2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone:hover .ring-alo-ph-circle {
border-color: #009900;
opacity: 0.5;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle {
border-color: #baf5a7;
opacity: 0.5;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle {
border-color: #009900;
opacity: 0.5;
}
.ring-alo-ph-circle-fill {
animation: 2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;
background-color: #000;
border: 2px solid transparent;
border-radius: 100%;
height: 30px;
left: 30px;
opacity: 0.1;
position: absolute;
top: 33px;
transform-origin: 50% 50% 0;
transition: all 0.5s ease 0s;
width: 30px;
}
.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone:hover .ring-alo-ph-circle-fill {
background-color: rgba(0, 175, 242, 0.5);
opacity: 0.75 !important;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill {
background-color: rgba(117, 235, 80, 0.5);
opacity: 0.75 !important;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill {
background-color: rgba(0, 175, 242, 0.5);
opacity: 0.75 !important;
}

 

.ring-alo-ph-img-circle {
animation: 1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;
border: 2px solid transparent;
border-radius: 100%;
height: 30px;
left: 30px;
opacity: 1;
position: absolute;
top: 33px;
transform-origin: 50% 50% 0;
width: 30px;
}

.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone:hover .ring-alo-ph-img-circle {
background-color: #009900;
}
.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle, .ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle {
background-color: #75eb50;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle {
background-color: #009900;
}
@keyframes ring-alo-circle-anim {
0% {
opacity: 0.1;
transform: rotate(0deg) scale(0.5) skew(1deg);
}
30% {
opacity: 0.5;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
100% {
opacity: 0.6;
transform: rotate(0deg) scale(1) skew(1deg);
}
}

 

@keyframes ring-alo-circle-img-anim {
0% {
transform: rotate(0deg) scale(1) skew(1deg);
}
10% {
transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
transform: rotate(0deg) scale(1) skew(1deg);
}
100% {
transform: rotate(0deg) scale(1) skew(1deg);
}
}
@keyframes ring-alo-circle-fill-anim {
0% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
50% {
opacity: 0.2;
transform: rotate(0deg) scale(1) skew(1deg);
}
100% {
opacity: 0.2;
transform: rotate(0deg) scale(0.7) skew(1deg);
}
}
.ring-alo-ph-img-circle a img {
padding: 1px 0 12px 1px;
width: 30px;
position: relative;
top: -1px;
}
}

Web chặn copy, bạn copy đoạn mã css tại đây : https://hocviendinhcao.com/file/css-code-nut-call-now.txt

CSS bạn có thể cho trực tiếp vào cùng nơi chứa đoạn HTML bằng lệnh sau :

<style>code css</style>

hoặc tạo 1 file có định dạng  .css rồi cho code vào và dùng lệnh gọi :

<link rel="stylesheet" href="ten.css" />
Chèn đoạn mã gọi file css vào trong thẻ <head>Mã gọi css<head>

2 comments

Bình luận