Tạo nút gọi điện rung lắc cho web và bản amp di động

Nút gọi điện trên web cho phép khách hàng dễ dàng liên lạc với bạn khi cần. Nó nhanh gọn hơn là điền vào contact form rồi gửi đi.

Trong bài viết này mình sẽ chỉ cho bạn cách thêm nút gọi điện Có 2 cách để thêm

Tạo nút gọi điện rung lắc bằng code

Cách này cho bạn nào biết về code có thể dùng code HTML và CSS dưới đây để tạo nút gọi điện thoại. Chèn code sau vào phần footer của web.
<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:0123456789" class="pps-btn-img">
<img src="https://kiot37.com/wp-content/uploads/2019/12/icon-call-kiot37.png" alt="Gọi điện thoại" width="50">
</a>
</div>
</div>
<div class="hotline-bar">
<a href="tel:0123456789">
<span class="text-hotline">0123.456.789</span>
</a>
</div>
</div>
Sau đó, chèn đoạn CSS dưới đây vào file style.css trong theme bạn đang dùng. hoặc thêm trong phần tùy biến của trang
.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;
}
}

Nếu bạn biết về CSS có thể chỉnh sửa lại màu sắc, kích thước cho phù hợp với web của bạn để hiển thị đẹp hơn.
P/s: Bạn nhớ sửa lại số điện thoại thành số điện thoại của bạn nhé.

Tạo nút gọi rung lắc bằng plugin

Đối với web WordPress, việc tạo nút gọi điện thoại rất đơn giản với sự trợ giúp của plugin. Có nhiều plugin có thể hỗ trợ tạo nút gọi điện nhưng mình thấy thích nhất vẫn là plugin Hotline Phone Ring.
Với plugin này, bạn có thể không biết code vẫn có thể dễ dàng tùy chỉnh màu sắc, kiểu hiển thị cho nút gọi điện thoại.
Sau khi cài plugin xong, bạn sẽ thấy menu HPR Options. Đây là phần thiết lập cho plugin, nó rất đơn giản như sau:

Số điện thoại: Nhập số hotline bạn muốn hiện thị trên web để người dùng gọi cho bạn.
Chọn giao diện: Plugin có 2 kiểu cho bạn lựa chọn: kiểu 1 là màu đỏ. kiểu 2 là màu xanh
Màu sắc: Chọn màu sắc hiển thị cho nút gọi điện thoại.
Ấn thanh chứ số điện thoại: Tích vào nếu bạn muốn nó chỉ hiện thị nút Call rung lắc trên máy tính chứ không hiển thị số điện thoại.
P/s: Bạn nhớ sửa lại số điện thoại thành số điện thoại của bạn nhé.

Tạo nút gọi hiển thị trên bản amp đơn giản

Tạo nút gọi đơn giản mà không cần mua plugin bản pro và Search Console báo lỗi
Bạn copy đoạn mã sau và file (functions.php) của theme
add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
// only CSS here please...
?>
#callnowbutton {
display: block;
position: fixed;
text-decoration: none;
z-index: 2147483647;
width: 100%;
left: 0;
bottom: 0;
height: 60px;
border-top: 1px solid #2dc62d;
border-bottom: 1px solid #006700;
text-shadow: 0 1px #006700;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 120%;
overflow: hidden;
padding-right: 20px;
background: #009900;
display: flex;
justify-content: center;
align-items: center;
}
<?php
}
Nếu bạn biết css thì thêm hoặc sửa vào đoạn trên để hiển thị đẹp hơn
Rồi dán code sau vào file (footer.php) của plugin amp như hình dưới
<a href="tel:0123456789" id="callnowbutton">0123.456.789</a>

Đơn giản phải không. Hãy áp dụng ngay cách tạo nút gọi điện thoại này cho web bán hàng, shop online của bạn ngay để gia tăng lượng khách hàng tăng lượt chuyển đổi cuộc gọi.