Code nút gọi điện rung lắc cực đẹp cho Wordpress

Bạn muốn tăng tỷ lệ chuyển đổi trên website? Một nút gọi điện rung lắc bắt mắt ở góc màn hình chính là “vũ khí” bí mật giúp khách hàng chủ động nhấc máy gọi cho bạn ngay lập tức. Thay vì dùng các Plugin nặng nề, hôm nay mình sẽ chia sẻ cho các bạn đoạn code HTML/CSS siêu nhẹ để tạo hiệu ứng nút gọi chuyên nghiệp.

Hình minh họa bên dưới để hình dung rõ hơn cách hoạt động của Code nút gọi điện rung lắc cực đẹp cho Wordpress

1. Tại sao nên sử dụng nút gọi điện hiệu ứng rung lắc?

• Thu hút sự chú ý: Hiệu ứng rung lắc nhẹ nhàng giúp người dùng chú ý đến số hotline mà không gây cảm giác khó chịu.
• Tối ưu trải nghiệm di động: Giúp khách hàng thực hiện cuộc gọi chỉ với một cú chạm (Click to Call).
• Không ảnh hưởng tốc độ Web: Code thuần HTML/CSS giúp website của bạn tải nhanh hơn hẳn so với việc cài đặt các Plugin bên thứ ba.

2. Hướng dẫn chèn nút gọi điện vào WordPress

Để cài đặt, bạn chỉ cần thực hiện theo các bước đơn giản sau. Đoạn code này hoạt động tốt nhất khi được nhúng vào phần Footer Scripts.

Bước 1: Copy đoạn mã Code dưới đây

Bạn hãy sao chép toàn bộ đoạn mã bao gồm cả HTML hiển thị và CSS định dạng:

<div class="tel_rung_lac">
<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:0912345678"><img class="lazy" src="https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2026/02/code-nut-goi-dien-rung-lac-cho-website-1.png" alt="G"></a>
</div>
</div>
<div class="tel">
<a href="tel:0912345678">
<div class="fone">
091 23 45 678
</div>
</a>
</div>
</div>
<style>
/*them nut call*/:root {
--phone-text-color:#f00;
/* màu chữ */
--phone-icon-color:coral;
--phone-bg-color:#52bebd;
/* màu nền nút gọi */
--phone-text-bg-color:#eeeb7c;
/* màu nền text */
--phone-border-color:#47a862;
/* màu vòng tròn */
--phone-hover-color:#f86e00;
/* màu vòng tròn re chuột */
--phone-hover2-color:red;
/* màu vòng tròn re chuột */
}
.fone {
font-size:19px;
/* chữ cạnh nút gọi */
color:var(--phone-text-color);
line-height:40px;
font-weight:bold;
padding-left:48px;
/* cách bên trái cho chữ */
margin:0 0;
}
.tel_rung_lac {
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 */
.tel_rung_lac a {
text-decoration:none;
display:block;
}
.tel {
background:var(--phone-text-bg-color);
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:var(--phone-border-color);
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:var(--phone-hover2-color);
opacity:0.5;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle {
border-color:var(--phone-border-color);
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:var(--phone-hover-color);
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:var(--phone-hover-color);
opacity:0.75 !important;
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill {
background-color:var(--phone-hover-color);
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:var(--phone-text-bg-color);
}
.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:var(--phone-hover2-color);
}
.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle {
background-color:var(--phone-bg-color);
}
@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;
}
}
</style>

Bước 2: Chèn code vào Footer WordPress

Có 2 cách thông dụng để bạn nhúng đoạn code này:

Sử dụng tùy chọn của Theme: Nếu bạn dùng các theme như Flatsome, hãy vào Quản trị ==> Flatsome ==> Advanced ==> Global Setting Dán code vào ô Footer Script.

Sử dụng Plugin hỗ trợ: Cài đặt plugin “Insert Headers and Footers”, sau đó dán toàn bộ code vào mục Scripts in Footer.

Sửa file trực tiếp: Bạn có thể dán vào file footer.php của Child Theme trước thẻ đóng </body>.

Bước 3: Thay đổi thông tin cá nhân

Đừng quên thay đổi số điện thoại 0912345678 trong đoạn code bằng số điện thoại thật của bạn để khách hàng có thể liên lạc nhé!

3. Tùy chỉnh màu sắc theo ý muốn

Mình đã thiết kế sẵn phần :root ở đầu đoạn CSS. Bạn chỉ cần thay đổi mã màu tại đây để nút gọi phù hợp với tông màu website của mình:

–phone-bg-color: Thay đổi màu nền của vòng tròn chứa icon.

–phone-text-bg-color: Thay đổi màu nền của dải hiện số điện thoại.

Lời kết

Chỉ với vài phút thao tác, bạn đã sở hữu một nút gọi điện rung lắc cực kỳ chuyên nghiệp mà không hề làm nặng website. Đây là một thủ thuật nhỏ nhưng mang lại hiệu quả rất lớn cho các website bán hàng, dịch vụ.

Nếu bạn gặp khó khăn trong quá trình chèn code, hãy để lại bình luận phía dưới, mình sẽ hỗ trợ bạn ngay!