Thêm nút chat Zalo, Facebook, gọi điện thoại… cho website WordPress mà không cần dùng plugin.
Trong các bài viết trước đây, tôi đã từng hướng dẫn cho các bạn cách tích hợp Facebook Messenger, Zalo Chat, nút gọi điện thoại… vào website WordPress rồi phải không nào? Tuy nhiên, điểm hạn chế của việc tích hợp trực tiếp code của Facebook, Zalo… vào website là chúng ảnh hưởng nhiều tới tốc độ load web. Nếu bạn đang tìm kiếm một giải pháp đơn giản và nhẹ nhàng (không cần sử dụng plugin) để tích hợp nút chat Zalo, Facebook, gọi điện thoại… vào website thì đây chính là hướng dẫn dành cho bạn.
Tham khảo thêm:
- Tạo nút call now trong WordPress một cách dễ dàng
- Tích hợp Facebook Chat cho website không cần dùng plugin
- Hướng dẫn chèn Zalo Chat vào website WordPress
Thêm nút chat Zalo, Facebook, gọi điện cho WordPress
Trên thực tế, những nút này được tạo bằng HTML và CSS nên các bạn có thể thêm chúng vào bất cứ website nào, không riêng gì website WordPress.
1. Đầu tiên, download bộ icon tại đây và upload chúng lên website của bạn, copy lấy link hình ảnh.
2. Chèn đoạn code sau đây vào footer của theme mà bạn đang sử dụng. Nếu theme không hỗ trợ sẵn tính năng chèn code vào footer, các bạn có thể tham khảo bài viết “Chèn code vào header và footer của website WordPress“.
<div class="float-contact">
<div class="chat-zalo">
<a href="https://zalo.me/0123456789" target="_blank"><img title="Chat Zalo" src="https://wpcanban.com/zalo-icon.png" alt="zalo-icon" width="40" height="40" /></a>
</div>
<div class="chat-facebook">
<a href="https://m.me/wpcanban" target="_blank"><img title="Chat Facebook" src="https://wpcanban.com/facebook-icon.png" alt="facebook-icon" width="40" height="40" /></a>
</div>
<div class="call-hotline">
<a href="tel:0123456789"><img title="Call Hotline" src="https://wpcanban.com/phone-icon.png" alt="phone-icon" width="40" height="40" /></a>
</div>
</div>
Trong đó:
- Thay
https://zalo.me/0123456789
bằng link Zalo của bạn, với0123456789
là số điện thoại đăng ký Zalo. - Thay
https://m.me/wpcanban
bằng link Facebook Messenger của bạn, vớiwpcanban
là ID (copy trên link Facebook Profile hoặc Facebook Page). - Thay
0123456789
trongtel:0123456789
bằng số điện thoại của bạn. - Ngoài ra, thay link của các icon mà bạn đã copy ở bước 1 cho phù hợp.
3. Chèn đoạn code CSS sau đây vào file style.css
của theme hoặc child theme mà bạn đang sử dụng. Các bạn cũng có thể thêm nó vào Appearance => Customize => Additional CSS để tránh code bị xóa mất khi update theme.
.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo, .chat-facebook, .call-hotline {
display: block;
margin-bottom: 6px;
line-height: 0;
}
Kết quả mà các bạn nhận được sẽ trông tương tự như thế này:
4. Nếu bạn muốn xoay ngang các nút chat Zalo, Facebook, gọi điện… trên giao diện mobile, hãy thêm tiếp đoạn code CSS sau:
@media (max-width: 480px) {
.chat-zalo, .chat-facebook, .call-hotline {
display: inline-block;
}
}
Kết quả sẽ trông giống thế này:
Còn nếu muốn ẩn luôn chúng đi trên giao diện mobile nhìn cho gọn, hãy thay thế bằng code CSS sau:
@media (max-width: 480px) {
.float-contact {
display: none;
}
}
Các bạn hoàn toàn có thể tùy biến code theo mẫu để thêm hoặc bớt các nút bấm theo nhu cầu sử dụng. Không quá phức tạp phải không nào? Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Cảm ơn bạn mình đã cài được cho web của mình. Trân trọng cảm ơn.