Tạo Widget Chat Popup Đa Kênh (Messenger, Zalo, Telegram...)

Gần đây, Facebook (Meta) đã chính thức vô hiệu hóa tính năng nhúng trực tiếp hộp thoại Chat Plugin vào website. Các đoạn mã cũ chia sẻ trên mạng không chỉ ngừng hoạt động mà còn phụ thuộc nhiều vào thư viện jQuery, gây ảnh hưởng nghiêm trọng đến tốc độ kết xuất trang và điểm số Google PageSpeed Insights.

Để tối ưu hiệu suất hiển thị, mình đã thiết kế một Widget Chat đa kênh dạng Popup hoàn toàn mới. Bộ mã này sử dụng 100% Vanilla JavaScript và CSS nội tuyến (inline CSS), loại bỏ hoàn toàn các thư viện bên ngoài để đảm bảo blog load nhanh nhất có thể. Khi độc giả nhấp vào, một hộp thoại hiện đại sẽ trượt lên mượt mà ngay trên trang hiện tại, cung cấp các tùy chọn liên hệ qua Messenger, Zalo, Telegram, WhatsApp và Viber.

Ưu Điểm 

• Siêu nhẹ & Tối ưu PageSpeed: Không dùng jQuery, không nhúng iframe nặng nề.

• Giao diện Grid hiện đại: Bố cục chia lưới gọn gàng, chứa được nhiều mạng xã hội mà không làm choáng ngợp màn hình điện thoại.

• Hiệu ứng mượt mà: Trượt mở (slide-up) và thu phóng (scale) bằng CSS Transform chuyên nghiệp.

• Chống lỗi liên kết: Điều hướng trực tiếp đến ứng dụng của người dùng, đảm bảo tin nhắn không bị kẹt lại trên trình duyệt web.

Hướng Dẫn Cài Đặt

Bạn chỉ cần thực hiện một thao tác duy nhất là chèn đoạn mã dưới đây vào template của Blogspot.

Bước 1: Đăng nhập vào trang quản trị Blogger > chọn mục Chủ đề (Theme) > Chỉnh sửa HTML (Edit HTML).

Bước 2: Kéo xuống dưới cùng, tìm thẻ đóng </body>.

Bước 3: Copy toàn bộ đoạn mã HTML, CSS và JavaScript dưới đây và dán vào ngay phía trên thẻ </body>.

<!-- ============================================== WIDGET CHAT POPUP ĐA KÊNH - TRỰC BLOG ============================================== --> <style> .truc-chat-widget { position: fixed; bottom: 25px; right: 25px; z-index: 999999; font-family: sans-serif; } /* Nút Icon Chat Nổi */ .truc-chat-toggle { width: 60px; height: 60px; background: linear-gradient(135deg, #0084ff 0%, #00c6ff 100%); border: none; border-radius: 50%; color: white; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 132, 255, 0.4); display: flex; align-items: center; justify-content: center; transition: transform 0.3s, box-shadow 0.3s; outline: none; } .truc-chat-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5); } .truc-chat-toggle svg { width: 28px; height: 28px; fill: currentColor; transition: transform 0.3s ease; } /* Hộp Thoại (Panel) */ .truc-chat-panel { position: absolute; bottom: 80px; right: 0; width: 340px; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transform-origin: bottom right; } .truc-chat-panel.active { opacity: 1; visibility: visible; transform: translateY(0); } /* Header Hộp Thoại */ .truc-chat-header { background: linear-gradient(135deg, #0084ff 0%, #00c6ff 100%); color: white; padding: 16px; display: flex; align-items: center; justify-content: space-between; } .truc-chat-info { display: flex; align-items: center; gap: 12px; } .truc-chat-info img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); } .truc-chat-title { display: flex; flex-direction: column; } .truc-chat-title strong { font-size: 15px; line-height: 1.2; } .truc-chat-title span { font-size: 12px; opacity: 0.9; margin-top: 2px; } .truc-chat-close { background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .truc-chat-close:hover { background: rgba(255, 255, 255, 0.4); } /* Nội Dung (Body) */ .truc-chat-body { padding: 20px; background: #f8fafc; } .truc-chat-bubble { background: white; padding: 12px 16px; border-radius: 0 16px 16px 16px; font-size: 14px; color: #334155; box-shadow: 0 2px 5px rgba(0,0,0,0.05); line-height: 1.5; border: 1px solid #e2e8f0; } /* Vùng Nút Bấm (Footer) */ .truc-chat-footer { padding: 16px; background: white; display: flex; flex-direction: column; gap: 8px; } .truc-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .truc-btn-contact { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; color: white !important; transition: opacity 0.2s; white-space: nowrap; border: none; } .truc-btn-contact:hover { opacity: 0.85; } .truc-btn-contact svg { width: 18px; height: 18px; fill: currentColor; } /* Màu Đặc Trưng Các Nền Tảng */ .btn-messenger { background: #0084ff; padding: 12px; font-size: 14px; } .btn-zalo { background: #0180c7; } .btn-telegram { background: #0088cc; } .btn-whatsapp { background: #25D366; } .btn-viber { background: #7360f2; } </style> <div class="truc-chat-widget"> <div class="truc-chat-panel" id="trucChatPanel"> <div class="truc-chat-header"> <div class="truc-chat-info"> <!-- LINK ẢNH ĐẠI DIỆN --> <img src="https://ui-avatars.com/api/?name=Truc+Blog&background=ffffff&color=0084ff" alt="Avatar"> <div class="truc-chat-title"> <strong>Đỗ Trực</strong> <span>Chọn nền tảng bạn muốn chat 👇</span> </div> </div> <button class="truc-chat-close" id="trucCloseChat" aria-label="Đóng">✕</button> </div> <div class="truc-chat-body"> <div class="truc-chat-bubble"> Xin chào! Mình có thể giúp gì cho bạn hôm nay? Nhắn tin ngay nhé. </div> </div> <div class="truc-chat-footer"> <!-- MESSENGER (Điền tên người dùng Fanpage/Cá nhân) --> <a href="https://m.me/Chinhtrucblog" target="_blank" rel="noopener" class="truc-btn-contact btn-messenger"> <svg viewBox="0 0 36 36"><path d="M18 2C9.163 2 2 8.847 2 17.3c0 4.8 2.296 9.07 5.894 11.954.215.172.35.433.35.717v3.52c0 .546.59.866 1.04.56l3.864-2.585c.18-.12.392-.17.6-.144 1.344.17 2.75.26 4.252.26 8.837 0 16-6.848 16-15.3C34 8.846 26.837 2 18 2zm1 14.86l-3.32-3.55c-.415-.443-1.127-.47-1.574-.06l-4.73 4.316c-.466.425-.333 1.173-.238 1.417l3.778 1.62c.31.134.664.088.932-.12l3.32-3.55c.415-.442 1.127-.47 1.574-.06l4.73 4.316c.466.425.333 1.173-.238 1.417l-3.778 1.62c-.31.134-.664.088-.932-.12z"/></svg> Chat qua Messenger </a> <!-- CÁC KÊNH MẠNG XÃ HỘI KHÁC --> <div class="truc-btn-grid"> <!-- ZALO (Điền số điện thoại của bạn) --> <a href="https://zalo.me/09xxxxxxxx" target="_blank" rel="noopener" class="truc-btn-contact btn-zalo"> <svg viewBox="0 0 24 24"><path d="M21.1 12c0-5-4.5-9.1-10.1-9.1C5.5 2.9 1 7 1 12c0 2.9 1.5 5.5 3.8 7.2.1.1.2.2.1.3l-.8 2.8c-.1.2.1.4.3.3l3.2-1.6c.1-.1.2-.1.3-.1 1 .3 2 .4 3.1.4 5.6 0 10.1-4.1 10.1-9.1zm-13.4 2.8c-.2.2-.5.1-.7-.1-.4-.6-1-1.3-1.8-1.5-.4-.1-.5-.5-.2-.7 1.2-.9 3.2-.2 4.1 1 .2.3 0 .7-.3.8-.3.2-.8.5-1.1.5zm4.4 0c-.2.2-.5.1-.7-.1-.4-.6-1-1.3-1.8-1.5-.4-.1-.5-.5-.2-.7 1.2-.9 3.2-.2 4.1 1 .2.3 0 .7-.3.8-.4.2-.8.5-1.1.5z"/></svg> Zalo </a> <!-- TELEGRAM (Điền username Telegram của bạn) --> <a href="https://t.me/yourusername" target="_blank" rel="noopener" class="truc-btn-contact btn-telegram"> <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.04-.04.04-.1-.01-.13-.05-.03-.11-.02-.16 0-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.21-1.12-.32-1.08-.68.02-.19.29-.39.81-.6 3.17-1.38 5.28-2.29 6.33-2.73 3.01-1.26 3.64-1.48 4.05-1.49.09 0 .29.02.4.1.09.07.13.16.14.26-.01.07-.01.17-.03.33z"/></svg> Telegram </a> <!-- WHATSAPP (Điền mã quốc gia + số điện thoại, VD: 849xxxxxxxx) --> <a href="https://wa.me/849xxxxxxxx" target="_blank" rel="noopener" class="truc-btn-contact btn-whatsapp"> <svg viewBox="0 0 24 24"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91 0-5.46-4.45-9.91-9.91-9.91zm5.44 14.36c-.23.66-1.35 1.26-1.87 1.34-.47.07-1.07.14-3.11-.71-2.46-1.03-4.04-3.55-4.16-3.71-.12-.16-1-1.32-1-2.52 0-1.2.62-1.78.84-2.02.22-.24.48-.3.64-.3h.46c.15 0 .37-.06.57.42.22.52.74 1.79.8 1.91.07.12.12.27.04.42-.07.15-.12.24-.24.38-.11.14-.24.3-.34.42-.11.12-.23.26-.1.48.12.22.55.92 1.18 1.48.81.72 1.49.94 1.71 1.06.22.12.35.1.48-.04.14-.15.54-.63.69-.85.14-.22.29-.18.5-.1.21.08 1.33.63 1.56.74.23.11.38.17.44.27.06.1.06.57-.17 1.23z"/></svg> WhatsApp </a> <!-- VIBER (Điền mã quốc gia + số điện thoại có dấu cộng phía trước đã mã hóa thành %2B) --> <a href="viber://chat?number=%2B849xxxxxxxx" target="_blank" rel="noopener" class="truc-btn-contact btn-viber"> <svg viewBox="0 0 24 24"><path d="M21.36 10.38c-.28-3.08-1.93-5.75-4.46-7.23-2.17-1.3-4.93-1.72-7.51-1.2-3.16.63-5.83 2.77-7.15 5.73-1.28 2.89-1.13 6.13.44 8.88 1.15 2.03 3.01 3.51 5.21 4.15.41.12.83.21 1.25.28.66.1 1.33.11 2 .03 1.2-.15 2.37-.56 3.42-1.2.22-.13.44-.28.66-.43.53-.38 1.03-.81 1.48-1.27.2-.21.4-.44.58-.67.65-.83 1.16-1.76 1.49-2.75.11-.33.19-.67.25-1.02.18-1.02.16-2.07-.02-3.09v-.01zm-2.22 5.93c-.35.88-.82 1.71-1.41 2.44-.17.22-.36.43-.55.63-.42.43-.88.83-1.38 1.18-.2.15-.41.28-.62.41-.98.59-2.06.97-3.18 1.11-1.05.13-2.13.08-3.16-.15-1.89-.43-3.53-1.57-4.58-3.24-1.36-2.15-1.6-4.88-.68-7.37 1-2.7 3.32-4.66 6.11-5.32 2.22-.53 4.61-.22 6.56 1.01 2.2 1.39 3.63 3.71 3.96 6.36.08.63.07 1.26-.03 1.88-.05.29-.11.58-.2.86v.11zm-2.92-5.47c-.23-.23-.6-.23-.83 0l-1.35 1.35c-.14.14-.35.18-.54.08-1.58-.78-3.02-2-4.14-3.48-.12-.16-.08-.38.07-.5l1.24-1.24c.23-.23.23-.6 0-.83l-2.5-2.5c-.23-.23-.6-.23-.83 0l-1.25 1.25c-.48.48-.68 1.18-.5 1.84.45 1.63 1.32 3.12 2.5 4.3 1.25 1.25 2.82 2.18 4.54 2.65.65.18 1.32-.02 1.78-.5l1.32-1.32c.23-.23.23-.6 0-.83l-2.4-2.4c-.03-.04-.08-.06-.13-.07z"/></svg> Viber </a> </div> </div> </div> <!-- Nút Bấm Khởi Động --> <button class="truc-chat-toggle" id="trucChatBtn" aria-label="Liên hệ"> <svg viewBox="0 0 24 24"><path d="M12 2C6.477 2 2 6.03 2 11c0 2.85 1.516 5.39 3.882 7.02l-1.077 3.24a1 1 0 0 0 1.258 1.259l3.411-1.137A10.932 10.932 0 0 0 12 20c5.523 0 10-4.03 10-9s-4.477-9-10-9zm0 16c-1.066 0-2.096-.15-3.076-.43a1 1 0 0 0-.642.064l-2.015.672.63-1.895a1 1 0 0 0-.156-.995C5.071 14.11 4 12.63 4 11c0-3.86 3.582-7 8-7s8 3.14 8 7-3.582 7-8 7z"/></svg> </button> </div> <!-- Kịch bản Vanilla JS siêu nhẹ --> <script> document.addEventListener('DOMContentLoaded', function() { const chatBtn = document.getElementById('trucChatBtn'); const closeBtn = document.getElementById('trucCloseChat'); const chatPanel = document.getElementById('trucChatPanel'); // Chuyển đổi trạng thái đóng/mở chatBtn.addEventListener('click', function() { chatPanel.classList.toggle('active'); }); closeBtn.addEventListener('click', function() { chatPanel.classList.remove('active'); }); // Tự động đóng nếu click ra ngoài vùng hiển thị document.addEventListener('click', function(event) { const widget = document.querySelector('.truc-chat-widget'); if (!widget.contains(event.target) && chatPanel.classList.contains('active')) { chatPanel.classList.remove('active'); } }); }); </script>

Các Tùy Chỉnh Cá Nhân Hóa

Sau khi dán mã, bạn cần thay đổi một số thông tin ở phần <!-- CHÚ THÍCH IN HOA --> bên trong mã HTML:

1. Đổi Avatar & Tên: Tìm đến dòng chứa thẻ <img> và thẻ <strong>Đỗ Trực</strong>. Thay liên kết hình ảnh và tên hiển thị bằng thông tin thật của bạn hoặc logo website.

2. Cập nhật Link Mạng Xã Hội:

   • Zalo: Đổi 09xxxxxxxx thành số điện thoại đăng ký Zalo của bạn.

   • Telegram: Đổi yourusername thành tên định danh cá nhân trên app Telegram.

   • WhatsApp & Viber: Đổi mã vùng và số điện thoại tương ứng. Nhớ giữ nguyên định dạng %2B thay cho dấu cộng ở Viber.

DEMO

Trực Blog Chọn nền tảng bạn muốn chat 👇

✕

Xin chào! Mình có thể giúp gì cho bạn hôm nay?

Chat qua Messenger

Zalo Telegram WhatsApp Viber

Lưu mã chủ đề lại, quay về trang chủ blog và F5 để kiểm tra thành quả trực tiếp.