Nếu bạn đang cần Code action button để gắn liên hệ nhanh cho website WordPress (Zalo – Messenger – Gọi điện – Email) mà không muốn cài plugin nặng, thì bài viết này là dành cho bạn. Chỉ cần copy đúng HTML + CSS bên dưới, bạn sẽ có một cụm nút liên hệ nổi gọn nhẹ, hoạt động tốt trên mobile và desktop.
Nếu website của bạn đang kinh doanh dịch vụ, tư vấn hoặc bán hàng online, việc tích hợp Code action button liên hệ nhanh cho website WordPress là một bước tối ưu không nên bỏ qua.
Hình minh họa bên dưới để hình dung rõ hơn cách hoạt động của Code action button liên hệ nhanh cho website WordPress – Style 5
Code action button liên hệ nhanh cho website WordPress
Nhúng Code action button liên hệ nhanh cho website WordPress
Đoạn code này cực kỳ đơn giản và dễ áp dụng, đặc biệt phù hợp với những bạn mới làm website hoặc chưa từng tiếp xúc với lập trình trước đó.
Bạn không cần kiến thức chuyên sâu về code. Chỉ cần sao chép và dán đúng theo hướng dẫn, mọi thứ sẽ hoạt động trơn tru. Mình đã kiểm tra kỹ nhiều lần, chỉ cần đặt đúng vị trí là hệ thống nút liên hệ sẽ hiển thị ngay lập tức, không cần chỉnh sửa phức tạp hay cấu hình thêm.
Đối với theme Flatsome
Bước 1: Dán code vào website wordpress
Bạn đăng nhập vào website, vào Quản trị ==> Flatsome ==> Advanced ==> Global Setting ==> Footer Script copy và paste toàn bộ đoạn code dưới đây vào Footer Script nhé:
<div id="webchuyennghiep247" class="actionbutton-contact">
<div id="zaloButton" class="action_button">
<a href="https://zalo.me/0977246679" target="_blank" onclick="_gaq.push(['_trackEvent', 'Call To Action', 'Zalo Button', 'Mobile']);"><i class=""></i></a>
</div>
<div id="messengerButton" class="action_button">
<a href="https://m.me/webchuyennghiep247" target="_blank"><i class=""></i></a>
</div>
<div id="callNowButton" class="action_button">
<a href="tel:0977246679"><i class="icon-phone"></i></a>
</div>
<div id="callNowButtonClick" class="action_button">
<a href="mailto:websitechuyennghiep247@gmail.com"><i class="fas fa-envelope"></i></a>
</div>
</div>
<style>
.actionbutton-contact {
position: fixed;
bottom: 195px;
right: 10px;
text-align: center;
z-index: 999;
width: 60px;
}
#zaloButton {
display: inline-block;
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 100%;
margin-bottom: 10px;
}
.action_button {
position: relative;
box-shadow: 0 5px 10px rgb(0 0 0 / 15%), 0 4px 15px rgb(0 0 0 / 13%);
}
#webchuyennghiep247 .webchuyennghiep247_description {
position: absolute;
top: 5px;
right: -300px;
width: 200px;
padding: 10px;
font-size: 13px;
line-height: 18px;
z-index: 1;
background-color: #ffd145;
color: #111;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
border-radius: 3px 0 0 3px;
}
#webchuyennghiep247 .webchuyennghiep247_description:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-left-color: #ffd145;
border-width: 8px;
margin-top: -8px;
}
#zaloButton>a>i {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2026/01/widget_icon_zalo.svg) no-repeat scroll 0 0 transparent;
width: 50px;
height: 50px;
display: inline-block;
background-size: 100%!important;
}
#messengerButton {
display: inline-block;
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 100%;
margin-bottom: 10px;
}
#messengerButton>a>i {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2026/01/widget_icon_messenger.svg) no-repeat scroll 0 0 transparent;
width: 50px;
height: 50px;
display: inline-block;
background-size: 100%!important;
}
#callNowButton {
display: inline-block;
position: relative;
border-radius: 50%;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 10px;
margin-bottom: 10px;
}
#callNowButton i {
color: white;
border-radius: 100%;
display: inline-block;
width: 50px;
height: 50px;
background: #ed1c24;
line-height: 50px;
font-size: 24px;
}
#callNowButtonClick i{
color:white !important
}
#webchuyennghiep247 .action_button:hover .webchuyennghiep247_description {
right: 68px;
opacity: 1;
filter: alpha(opacity=100);
}
#callNowButtonClick {
display: inline-block;
position: relative;
border-radius: 50%;
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 10px;
margin-bottom: 10px;
}
#callNowButtonClick i {
border-radius: 100%;
display: inline-block;
width: 50px;
height: 50px;
background: #76b51b;
line-height: 44px;
font-size: 24px;
}
</style>
Bước 2: Thay thế, chỉnh sửa thông tin cần thiết
Các bạn thay thế thông tin các nút liên hệ, các icon tương ứng với link nội dung của mình nhé
- Icon: Bạn tải các ảnh icon về máy tính rồi upload lên host, lấy url link ảnh để thay thế vào các link ảnh của wiki.webchuyennghiep247.com nha
- Nếu thay vào website không hỗ trợ hiển thị cần cài đặt thêm plugin Font Awesome
- Thay thế các thông tin: Zalo – Messenger – Số điện thoại – Email tương ứng với website của bạn
Bước 4: Lưu lại và hưởng thành quả
Sau khi bạn copy code và sửa thông tin tương ứng với website của bạn, lưu lại và ra trang chủ hưởng thành quả nhé!
Đối với theme bất kỳ không phải Flatsome
Nếu bạn không dùng Flatsome, bạn coppy tất cả code desktop và mobile vào giữa hai thẻ đóng </body> và </html> của file Footer.php nhé!
Còn bạn nào mà không biết file Footer.php ở chỗ nào thì vào Quản trị ==> Giao diện ==> Sửa giao diện tìm file Footer.php ở cột bên phải nhé!
Note: Sửa file nên sử dụng Child theme để khi update theme các thay đổi không bị mất nhé
Lời kết:
Việc sử dụng Code action button để tạo liên hệ nhanh cho website WordPress là một giải pháp đơn giản nhưng mang lại hiệu quả rất lớn. Chỉ với vài dòng HTML và CSS, bạn đã có thể giúp khách truy cập dễ dàng nhắn Zalo, chat Messenger, gọi điện hoặc gửi email ngay khi cần, từ đó tăng tỷ lệ chuyển đổi mà không cần phụ thuộc vào plugin nặng.
