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

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 Shopify

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

1. 1Đăng nhập Shopify Admin (yourdomain.myshopify.com/admin)
2. 2Vào Online Store → Themes → Customize
3. 3Chọn trang cần nhúng widget (Homepage, Product page...)
4. 4Thêm section 'Custom Liquid' hoặc 'Custom HTML'
5. 5Dán đoạn mã nhúng widget vào section
6. 6Click 'Save' để lưu và kiểm tra trên storefront

Mẹo khi nhúng vào Shopify

• Với Online Store 2.0, dùng App Blocks hoặc Custom Liquid section
• Nhúng vào tất cả trang: chỉnh sửa theme.liquid, dán script trước </body>
• Widget tương thích với Dawn, Sense, Craft và các theme OS 2.0 khác
• Dùng Shopify Metafields để truyền dữ liệu động vào widget

Xem Demo Trực Tiếp

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