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

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ể cài thêm plugin insert header and footer vào

<div class="float-contact">
<div class="chat-zalo">
<a href="https://zalo.me/0123456789" target="_blank"><img title="Chat Zalo" src="https://yourwebsite.com/wp-content/uploads/2022/12/zalo.png" alt="zalo-icon" width="40" height="40" /></a>
</div>
<div class="chat-facebook">
<a href="https://m.me/tonycongguru" target="_blank"><img title="Chat Facebook" src="https://yourwebsite.com/wp-content/uploads/2022/12/facebook.png" alt="facebook-icon" width="40" height="40" /></a>
</div>
<div class="call-hotline">
<a href="tel:0123456789"><img title="Call Hotline" src="https://yourwebsite.com/wp-content/uploads/2022/12/callnow.png" alt="phone-icon" width="40" height="40" /></a><div class="float-contact">
<div class="chat-zalo">
<a href="https://zalo.me/0123456789" target="_blank"><img title="Chat Zalo" src="https://yourwebsite.com/wp-content/uploads/2022/12/zalo.png" alt="zalo-icon" width="40" height="40" /></a>
</div>
<div class="chat-facebook">
<a href="https://m.me/tonycongguru" target="_blank"><img title="Chat Facebook" src="https://yourwebsite.com/wp-content/uploads/2022/12/facebook.png" alt="facebook-icon" width="40" height="40" /></a>
</div>
<div class="call-hotline">
<a href="tel:0123456789"><img title="Call Hotline" src="https://yourwebsite.com/wp-content/uploads/2022/12/callnow.png" alt="phone-icon" width="40" height="40" /></a>
</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/tonycongguru bằng link Facebook Messenger của bạn, với tonycongguru 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 ảnh của các icon mà bạn đã tải lên website ở 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 Giao diện => Tuỳ biến => CSS bổ sung để tránh code bị xóa mất khi update theme.

.float-contact {
  position: fixed;
  bottom: 20px;
  right: 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;
  }
}

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.