Thêm nút chat Zalo, Facebook, gọi điện không cần dùng plugin

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ới 0123456789 là số điện thoại đăng ký Zalo.
• Thay https://m.me/wpcanban bằng link Facebook Messenger của bạn, với wpcanban là ID (copy trên link Facebook Profile hoặc Facebook Page).
• Thay 0123456789 trong tel: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. :)