Nội dung bài viết
Tạo nút chat Messenger đẹp cực kỳ đơn giản
Một trong những lý do giúp cho trang web của bạn thu hút khách hàng đó là tốc độ nhanh. Kèm theo là có nút chát tương tác trực tuyến. Tuy nhiên gần đây thì vấn đề internet phải nói là cực kỳ chậm chạp. Nguyên nhân đến từ việc các tuyến cáp quang quốc tế gặp sự cố.
Mọi người thường nói với nhau là do CÁ MẬP đói quá nên cứ cắn xé tuyến cáp quang biển, khiến cho tuyến cáp đi quốc tế bị đứt hoài. Điều này ảnh hưởng đến các anh em đang chạy website ở máy chủ nước ngoài. Những giờ cao điểm gần như là không thể truy cập được, còn anh em dùng máy chủ trong nước cũng gặp không ít khó khăn. Các dịch vụ có sử dụng máy chủ nước ngoài như facebook sẽ khiến website trở nên chậm chập hơn. Điển hình một dịch vụ mà nhiều người hay sử dụng là widget chat Facebook Messenger.
Cách giải quyết nút chát facebook trên web tốt nhất ?
Để khắc phục điều đó bạn có thể loại bỏ hoàn toàn widget chat Messenger đó đi. Thay thế bằng một biểu tượng chát đơn giãn hơn mà chức năng hoàn toàn tượng tự, vừa nhẹ nhàng mà cũng không kém phần hiệu quả. Cùng PhonuiIT.com theo dõi cách làm dưới đây để tạo nút chat Messenger đẹp cực kỳ đơn giản.
Code thêm nút chat Messenger vào website
Đầu tiên các bạn sao chép đoạn code bên dưới rồi dán vào file header.php. Bạn tìm file header.php trong thư mục theme mà bạn đang sử dụng. Dán đoạn code vào bên dưới thẻ đóng </header>.
<button id="myBtn2" style="background:#00cc00" onclick="window.location.href='https://m.me/phonuiitdotcom'"> <img src='<?php echo get_template_directory_uri() ?>/images/messenger.png' title='Chát Messenger' width='40px'/> </button>
Lưu ý:
- …/images/messenger.png’ thay thể đường dẫn này bằng đường dẫn hình ảnh biểu tượng icon messenger của bạn, chú ý kích thước icon khoảng 70×70 px nhé, bạn cũng có thể tải biểu tượng mà mình đang sử dụng tại đây.
- href=’https://m.me/phonuiitdotcom’: bạn thay phonuiitdotcom thành tên đường dẫn facebook của bạn nhé hoặc fanpage mà bạn muốn khách hàng nhắn tin đến đó (mở facebook lên và xem tên đằng sau địa chỉ facebook hoặc fanpage của bạn là gì rồi thay thế vào nhé).
Tiếp tục sao chép đoạn css bên dưới rồi dán vào file style.css trong thư mục theme mà bạn đang sử dụng.
/* Nut chat messenger */
#myBtn2 {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99;
border: none;
outline: none;
color: white;
cursor: pointer;
border-radius: 30px;
background-color: #00cc00;
width: 60px;
height: 60px;
padding: 10px;
opacity: 0.9;
}
#myBtn2:hover {
background-color: #555;
}Sau khi làm xong các bước nêu trên, bạn lưu file lại, ra màn hình chính của website, nhấn Ctrl + F5 rồi xem kết quả có như hình ảnh bên dưới không nhé.
Ok, vậy là bạn đã được hướng dẫn làm một nút chat Messenger đẹp và đơn giản rồi đấy.
Chúc các bạn thành công!
