Nút điện thoại trên website là 1 cách để khách hàng nhanh chóng liên hệ với bạn. Nhờ nút điện thoại này mà tỷ lệ bán hàng của bạn trở nên cao và hiệu quả hơn. Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo nút điện thoại rung lắc kèm số điện thoại trên website.
Trong bài này, sau khi hoàn thành, các bạn sẽ có kết quả như hình bên dưới ở chế độ máy tính. Còn ở chế độ mobile và tablet thì chỉ hiển thị nút gọi điện thoại thôi. Lý do là vì máy tính thì khách hàng không thể gọi điện thoại được nên cần hiển thị số điện thoại để thuận tiện cho khách hàng liên lạc. Còn ở chế độ mobile và tablet, khách hàng có thể click vào và điện thoại trực tiếp.
1. Hướng dẫn cách chèn code tạo nút điện thoại trên website:
Nếu bạn dùng theme GeneratePress bản quyền Premium thì có thể sử dụng tính năng Hook. Các thông số cụ thể bao gồm:
- Tên Hook: wp_footer
- Display Rules: All site
Nếu bạn dùng các theme khác thì bạn cần cài thêm plugin Insert Headers and Footers để chèn code.
2. Phần code tạo nút điện thoại
Bạn chèn code này theo cách hướng dẫn ở trên. Lưu ý sửa lại số điện thoại ở các dòng 6, 12, 13. Đối với dòng 6 và 12 là link kết nối sang phần gọi điện thoại nên các bạn cần ghi liên tục các số. Đối với dòng 13 là số điện thoại hiển thị ở chế độ máy tính nên bạn có thể ghi theo ý muốn.
Các bạn có thể mò mẫm để thay đổi vị trí left, right, bottom theo vị trí mà bạn muốn trong thẻ <style> nhé. Theo code này thì nút gọi điện thoại ở góc dưới bên trái.
<div class="hotline-phone-ring-wrap">
<div class="hotline-phone-ring">
<div class="hotline-phone-ring-circle"></div>
<div class="hotline-phone-ring-circle-fill"></div>
<div class="hotline-phone-ring-img-circle">
<a href="tel:0988333069" class="pps-btn-img">
<img src="https://nocodebuilding.com/wp-content/uploads/2020/07/icon-call-nh.png" alt="Gọi điện thoại" width="50">
</a>
</div>
</div>
<div class="hotline-bar">
<a href="tel:0989333069">
<span class="text-hotline">0989 333 069</span>
</a>
</div>
</div>
<style>
.hotline-phone-ring-wrap {
position: fixed;
bottom: 0;
left: 0;
z-index: 999999;
}
.hotline-phone-ring {
position: relative;
visibility: visible;
background-color: transparent;
width: 110px;
height: 110px;
cursor: pointer;
z-index: 11;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
left: 0;
bottom: 0;
display: block;
}
.hotline-phone-ring-circle {
width: 85px;
height: 85px;
top: 10px;
left: 10px;
position: absolute;
background-color: transparent;
border-radius: 100%;
border: 2px solid #e60808;
-webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
width: 55px;
height: 55px;
top: 25px;
left: 25px;
position: absolute;
background-color: rgba(230, 8, 8, 0.7);
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
background-color: #e60808;
width: 33px;
height: 33px;
top: 37px;
left: 37px;
position: absolute;
background-size: 20px;
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
}
.hotline-phone-ring-img-circle .pps-btn-img {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
width: 20px;
height: 20px;
}
.hotline-bar {
position: absolute;
background: rgba(230, 8, 8, 0.75);
height: 40px;
width: 180px;
line-height: 40px;
border-radius: 3px;
padding: 0 10px;
background-size: 100%;
cursor: pointer;
transition: all 0.8s;
-webkit-transition: all 0.8s;
z-index: 9;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px !important;
/* width: 175px !important; */
left: 33px;
bottom: 37px;
}
.hotline-bar > a {
color: #fff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-indent: 50px;
display: block;
letter-spacing: 1px;
line-height: 40px;
font-family: Arial;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(0.5) skew(1deg);
-webkit-opacity: 0.1;
}
30% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
-webkit-opacity: 0.5;
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
-webkit-opacity: 0.1;
}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
}
@-webkit-keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
}
}
@media (max-width: 768px) {
.hotline-bar {
display: none;
}
}
</style>
Nhớ Save lại rồi tận hưởng nha.
3. Bonus phần nút icon Zalo và Messenger
Bên cạnh nút điện thoại thì Zalo và Messenger cũng thường được sử dụng. Mình bonus thêm code của hai nút chat nhanh này để các bạn có nhu cầu có thể dùng. Các bạn nhớ chỉnh sửa lại dòng số 4 và 7 theo địa chỉ messenger và zalo của mình nha.
Tương tự ở trên, các bạn có thể tùy chỉnh trong thẻ <style> các thông số liên quan đến left, right, bottom. Theo code này thì 2 nút zalo và messenger ở góc dưới bên phải.
<div class="social-button">
<div class="social-button-content">
<a href="https://m.me/nocodebuilding/" target="_blank" class="mes">
<img src="https://nocodebuilding.com/wp-content/uploads/2020/07/fb.png" alt="Chat Messenger">
</a>
<a href="http://zalo.me/0989333069" target="_blank" class="zalo">
<img src="https://nocodebuilding.com/wp-content/uploads/2020/07/zl.png" alt="Chat Zalo">
</a>
</div>
</div>
<style>
.social-button{
display: inline-grid;
position: fixed;
background-color:rgba(255,255,255,0) !important;
bottom: 15px;
right: 20px;
min-width: 45px;
text-align: center;
z-index: 99999;
}
.social-button-content{
display: inline-grid;
}
.social-button a {padding:8px 0;cursor: pointer;position: relative;}
.social-button i{
width: 40px;
height: 40px;
background: #F05A5E;
color: #fff;
border-radius: 100%;
font-size: 20px;
text-align: center;
line-height: 1.9;
position: relative;
z-index: 999;
}
.social-button span{
display: none;
}
.mes:hover > span, .zalo:hover > span{display: block}
.social-button a span {
border-radius: 2px;
text-align: center;
background: #ffffff;
padding: 9px;
display: none;
width: 180px;
margin-right: 10px;
position: absolute;
color: #ffffff;
z-index: 999;
top: 9px;
right: 20px;
</style>
Cảm ơn các bạn đã theo dõi bài viết về hướng dẫn tạo nút gọi điện thoại trên website có kèm số điện thoại của No Code Building.
