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ì ?
Sau đâ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, có tính năng rung lắc nút gọi, hiển thị số, hoặc đoạn văn bản giúp gây chú ý tăng chuyển đổi. 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://congtybinhquan.com
Phần HTML: (Hiển thị nút gọi rung lắc)
Xem đoạn mã tại đây : Mã html nút gọi
Note: Trong đoạn mã HMTL có 2 phần. Phần 1 là chỉ hiển thị 1 số điện thoại. Còn 1 đoạn nữa là có thể hiển thị 2 số điện thoại, và tự động đảo kiểu Random (Ngẫu nhiên).
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;}}
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 :
hoặc tạo 1 file có định dạng .css rồi cho code vào upload lên hosting (hoặc VPS) và dùng lệnh gọi :
Bấm cài đặt, sau đó kích hoạt plugin lên và cài đặt số điện thoại vào là xong.
Giá của plugin là $19 khoảng trên 400.000đ. Mình đã mua plugin này, nếu bạn nào cần mua dùng chung với giá chỉ 50.000đ có update thì liên hệ mình qua Facebook nhé. Hiệp trần 3V