Tạo nút gọi điện, chat Zalo, Facebook cho WordPress bằng HTML và CSS – Style 3

Bạn muốn khách hàng liên hệ với mình ngay lập tức khi họ đang lướt web? Thay vì bắt khách phải tìm trang “Liên hệ” rườm rà, tại sao không đặt ngay các nút “Gọi điện”, “Zalo” và “Messenger” nổi bật ngay góc màn hình?

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo bộ nút liên hệ cực đẹp bằng HTML và CSS. Cách này cực kỳ nhẹ, không làm chậm web và quan trọng là ai cũng làm được!

Tại sao không nên dùng Plugin cho các nút liên hệ?

Nhiều bạn thường cài Plugin để tạo nút liên hệ, nhưng điều này có 2 nhược điểm:

• Làm chậm web: Mỗi Plugin sẽ load thêm file script khiến web nặng hơn.
• Khó tùy biến: Bạn khó có thể chỉnh sửa màu sắc, kích thước theo ý muốn. Sử dụng code HTML/CSS giúp web của bạn “xịn” hơn và tối ưu SEO tốt hơn nhiều.

Hình minh họa bên dưới để hình dung rõ hơn cách hoạt động của Tạo nút gọi điện, chat Zalo, Facebook cho WordPress bằng HTML và CSS – Style 3

Đối với theme Flatsome

Bước 1: Dán code nút gọi điện, chat Zalo, Facebook

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é:

<style>
.actionbutton-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.actionbutton-contact .hotline {
background: #d11a59!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 15px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
/*@media (max-width: 549px){
.actionbutton-contact{
display:none
}
}ẩn trên mobile*/
</style>
<div class="actionbutton-contact">
<button class="chat-zalo">
<a href="//zalo.me/0977246679">Chat Zalo</a>
</button>
<button class="chat-face">
<a href="//m.me/webchuyennghiep247">Chat Facebook</a>
</button>
<button class="hotline">
<a href="tel:0977246679">Hotline: 0977246679</a>
</button>
</div>

Bước 2: Thay thế, chỉnh sửa thông tin cần thiết

• Số điện thoại: Thay 0977246679 thành số của bạn
• Số Zalo: Thay 0977246679 thành số đăng ký Zalo của bạn.
• Link Messenger: Thay webchuyennghiep247 thành ID hoặc tên người dùng Messenger của bạn
• Bạn cũng có thể thay đổi background, font chữ, màu chữ… để phù hợp với giao diện website của mình nhé

Đối với theme bất kỳ không phải Flatsome

Bước 1: Copy code HTML và CSS

Các bạn vào Quản trị ==> Giao diện ==> Sửa ==> Chọn theme đang sử dụng ==> Footer.php

Sau đó, các bạn copy toàn bộ đoạn code ở bước 1 (dành cho theme Flatsome) ở trên và paste vào giữa thẻ đóng </body> và </html>

Bước 2: Chỉnh sửa thông tin

Các bạn thực hiện các thao tác chỉnh sửa thông tin như ở trên mình hướng dẫn (cho theme Flatsome)

Bước 3: Lưu lại và hưởng thành quả

Cuối cùng, các bạn lưu lại và ra trang chủ xem sự thay đổi nha!

Kết luận

Chỉ với một đoạn HTML và CSS đơn giản, bạn đã có thể bổ sung hệ thống nút gọi điện, chat Zalo và chat Facebook cực kỳ tiện lợi cho website WordPress. Không cần kiến thức lập trình phức tạp, không cần plugin rườm rà, chỉ cần copy và đặt đúng vị trí là có thể sử dụng ngay.

Đây là một cải tiến nhỏ nhưng mang lại hiệu quả lớn trong việc tăng tương tác và chuyển đổi cho website. Nếu bạn muốn website dễ liên hệ hơn và thân thiện hơn với khách hàng, đừng bỏ qua giải pháp này.