Hướng dẫn thêm widget Chat Bubble vào website WordPress

Nút chat đa kênh: Zalo, Messenger, Hotline, WhatsApp, Telegram. Tích hợp vào WordPress chỉ trong vài phút.

Xem Demo → Dùng miễn phí

Tổng quan

WordPress là CMS phổ biến nhất thế giới. Bạn có thể nhúng widget bằng block Custom HTML trong Gutenberg hoặc widget HTML trong sidebar.

Widget Chat Bubble của Widget.vn giúp bạn nút chat đa kênh: zalo, messenger, hotline, whatsapp, telegram. Bài viết này hướng dẫn bạn từng bước nhúng widget vào WordPress, từ đăng ký tài khoản đến hoàn tất tích hợp.

Tại sao nên dùng widget Chat Bubble?

  • Tích hợp tất cả kênh liên lạc trong một nút
  • Tải nhẹ ~3KB, không ảnh hưởng tốc độ trang
  • Tùy chỉnh vị trí, màu sắc, animation
  • Hiển thị theo giờ làm việc (online/offline)

Bước 1: Tạo widget trên Widget.vn

Trước tiên, bạn cần tạo và cấu hình widget Chat Bubble trên dashboard Widget.vn.

  1. 1Truy cập Widget.vn và đăng ký tài khoản miễn phí
  2. 2Vào Dashboard → Tạo Widget mới → Chọn "Chat Bubble"

Bước 2: Cấu hình widget Chat Bubble

Thiết lập các tùy chọn cho widget theo nhu cầu doanh nghiệp:

  1. 1Thêm các kênh liên lạc: Zalo, Messenger, Hotline...
  2. 2Cấu hình thứ tự hiển thị kênh ưu tiên
  3. 3Chọn vị trí: góc phải hoặc góc trái
  4. 4Thiết lập lịch online/offline (tùy chọn)

Bước 3: Lấy mã nhúng

Sau khi cấu hình xong, sao chép mã nhúng từ dashboard:

<script src="https://api.widget.vn/v1/loader.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-api="https://api.widget.vn"
  data-cdn="https://api.widget.vn"
  async defer></script>

Thay YOUR_WIDGET_ID bằng ID widget thực từ dashboard Widget.vn.

Bước 4: Nhúng vào WordPress

Làm theo các bước sau để nhúng widget vào WordPress:

  1. 1Đăng nhập WordPress Admin (yourdomain.com/wp-admin)
  2. 2Vào Trang (Pages) hoặc Bài viết (Posts) cần nhúng widget
  3. 3Click nút '+' để thêm block mới → chọn 'Custom HTML'
  4. 4Dán đoạn mã nhúng widget vào block Custom HTML
  5. 5Click 'Xem trước' để kiểm tra widget hiển thị đúng
  6. 6Click 'Xuất bản' hoặc 'Cập nhật' để lưu thay đổi

Mẹo khi nhúng vào WordPress

  • Dùng block Custom HTML, không dùng block Paragraph
  • Nếu dùng Classic Editor, chuyển sang tab 'Text' trước khi dán code
  • Widget hoạt động tốt với hầu hết theme WordPress (Astra, GeneratePress, Flavflavor...)
  • Có thể nhúng vào sidebar bằng widget HTML trong Appearance → Widgets

Xem Demo Trực Tiếp

Trải nghiệm widget Chat Bubble trước khi nhúng vào website:

Mở Demo →