Tạo nút chat Zalo Facebook Hotline

Tạo nút chat Zalo Facebook Hotline không cần plugin và chỉ cần thêm HTML và CSS thì có thể sử dụng nhanh chóng và đơn giản. Với những cá nhân nào không thích dùng plugin chat thì đây là giải pháp thuận tiện và gọn nhẹ mà mình đã sưu tầm và chia sẻ cho các bạn tiện sử dụng.

1 – Bước đầu tiên :

Đầu tiên, download bộ icon zalo, icon facebook. icon calling và upload chúng lên website của bạn. Nhớ cùng một chuẩn kích thước ( 30-40 pixel ) cho các icon. Các bạn có thể lên google seach và tìm kiếm cho mình các icon ưa thích.

2 – Chèn HTML và CSS vào Footer :

– Chèn đoạn code PHP dưới đây vào Footer của theme mà bạn đang sử dụng. Đối với theme Flatsome hỗ trợ sẵn tính năng chèn code vào Footer, bằng cách vào Flatsome > Advanced Options > Global Settings chèn vào phần FOOTER SCRIPTS. Đối với những Theme không hỗ trợ sẵn tính năng này bạn có thể cài plugin bổ trợ WPCode – Insert Headers and Footers hoặc tìm file footer.php của theme để chèn vào.

<div class="float-contact">
<div class="call-hotline">
<a href="tel:09x.123.5678"><img title="Call Hotline" src="/wp-content/themes/......../phone.gif" alt="phone-icon" width="40" height="40" /></a>
</div>
<div class="chat-facebook">
<a href="https://m.me/facebook.vn" target="_blank"><img title="Chat Facebook" src="/wp-content/themes/........./fb.png" alt="facebook-icon" width="40" height="40" /></a>
</div>
<div class="chat-zalo">
<a href="https://zalo.me/09x.123.5678" target="_blank"><img title="Chat Zalo" src="/wp-content/themes/........./zl.png" alt="zalo-icon" width="40" height="40" /></a>
</div>

LƯU Ý  ( THAY THẾ NỘI DUNG TEXT MÀU ĐỔ PHÍA TRÊN )

– Thay số hotline 09x.123.5678 bằng số điện thoại của bạn đang sử dụng.
– Thay số zalo thành của số của bạn https://zalo.me/09x.123.5678 – nếu bị lỗi zalo chát trực tiếp, bạn có thể liên hệ với bên admin zalo hoặc tạo 1 trang mã QR để khách hàng liên hệ.
– Dùng facebook chat, bạn dùng https://m.me/facebook.vn bằng link Facebook Messenger của bạn. Có thể điền ID facebook thay thế.
– Thay đường dẫn SRC màu đỏ phía trên là link ảnh icon zalo, facebook, hotline mà bạn đã có trong host của bạn.

2 – BƯỚC CUỐI:

Chèn đoạn code CSS sau đây vào file style.css của theme mà bạn đang sử dụng. Các bạn cũng có thể thêm nó vào Giao diện => Tùy biến => CSS bổ sung hoặc child theme để tránh code bị 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;
}

Các bạn hoàn toàn có thể tùy biến thêm icon chat online theo nhu cầu sử dụng. Không quá phức tạp phải không. Chúc các bạn thành công và có một nút chat online nhanh chóng thuận tiện.

SƯU TẦM  – TỔNG HỢP