# Tùy chỉnh giao diện widget

Đặt màu, giao diện sáng tối, vị trí, nút mở chat, đầu khung chat, ngôn ngữ và những trang hiện widget, rồi xem ngay trong khung xem trước.

Làm cho widget hợp với thương hiệu của bạn: đúng màu, có logo, nút có chữ, giao diện tối cho website tối màu. Mọi thiết lập nằm trên trang của website trong Hạ Tầng, và khung xem trước bên cạnh hiện widget thật ngay khi bạn thay đổi.

Bạn cần quyền **Quản lý** với module Hỗ trợ.

## Thiết lập nằm ở đâu

1. Vào **Hỗ trợ khách hàng → Kênh**.
2. Bấm vào website của bạn trong nhóm **Website & ứng dụng**.

Trang của website có ba tab:

| Tab | Có gì |
|---|---|
| **Cài đặt** | Đoạn mã cài đặt, mọi thiết lập widget trong bài này và các bài sau, mã bí mật định danh, và xoá site. |
| **Tự động hoá** | Tin nhắn nhắc lại (không gửi khi cửa sổ trả lời của kênh đã đóng: 48 giờ sau tin cuối của khách với Zalo OA và TikTok, 24 giờ với Messenger, Instagram và WhatsApp), social proof, đánh giá hài lòng (CSAT), theo dõi chuyển đổi, cùng các luồng và chiến dịch đang chạy trên website. Xem [Chiến dịch](https://hatang.dev/vi/help/automation/campaigns) và [Mức độ hài lòng (CSAT)](https://hatang.dev/vi/help/reports/satisfaction-csat). |
| **Ứng dụng** | Ứng dụng di động dùng chung cài đặt widget của website này. Phần này do lập trình viên thiết lập; xem [hướng dẫn SDK](https://hatang.dev/vi/docs/guides/sdks/overview). |

Xong, bấm **Lưu cài đặt** ở cuối biểu mẫu. Dòng "Đã lưu. Widget cập nhật trong vòng một phút." xác nhận đã lưu; khách thấy thay đổi trong vòng một phút mà bạn không phải sửa gì trên website.

## Khung xem trước

Khung **Xem trước** (bên phải biểu mẫu trên màn hình rộng, bên dưới trên màn hình hẹp) chạy widget thật với các thay đổi chưa lưu. Dùng các nút phía trên để chuyển giữa:

- **Đang mở** và **Nút chat**: khung chat đang mở, hoặc chỉ nút ở góc màn hình.
- **Ngoại tuyến**: widget trông thế nào khi không ai trực.
- **Form thông tin**: biểu mẫu hỏi thông tin khi khách gửi tin nhắn đầu tiên.
- **Máy tính** và **Điện thoại**, **VI** và **EN** cho ngôn ngữ.

Gõ thử một tin nhắn trong khung xem trước để thấy bong bóng tin nhắn. Những gì gõ ở đây không được gửi đi.

![Khung xem trước widget](https://hatang.dev/help/img/vi/widget/preview.webp)

## Màu, giao diện và vị trí

Thẻ **Chung** chứa các thiết lập cơ bản.

| Thiết lập | Tác dụng |
|---|---|
| **Tiêu đề widget** | Tên trên đầu widget. Đây cũng là tên của website trong Hạ Tầng. |
| **Màu** | Màu của nút mở chat, đầu khung chat và tin nhắn của khách. Bấm vào ô màu để chọn. |
| **Vị trí** | **Góc dưới phải** (mặc định) hoặc **Góc dưới trái**. |
| **Giao diện** | **Sáng** (mặc định), **Tối**, hoặc **Theo hệ thống của khách**: theo chế độ sáng tối trên máy khách và tự đổi theo. |
| **Trạng thái** | **Đang hoạt động**, hoặc **Đã tắt (ẩn widget)** để ẩn widget ở mọi nơi mà vẫn giữ lịch sử. |

![Thẻ Chung với màu, vị trí, giao diện và nút mở chat](https://hatang.dev/help/img/vi/widget/appearance-settings.webp)

## Nút mở chat

Nút tròn ở góc màn hình dùng để mở chat.

- **Biểu tượng**: **Bong bóng chat**, **Tai nghe hỗ trợ**, **Dấu hỏi** hoặc **Tin nhắn tròn**, theo màu của bạn.
- **Chữ trên nút (tiếng Việt)** và **Chữ trên nút (tiếng Anh)**: tối đa 24 ký tự, ví dụ "Tư vấn" hay "Chat with us". Nút tròn thành nút dài có chữ. Để trống cả hai nếu chỉ muốn biểu tượng. Có chữ sẽ giúp khách không nhầm khi website đã có một nút chat hay nút "Liên hệ" khác.
- **Ảnh riêng (tuỳ chọn)**: địa chỉ `https://` của một ảnh vuông, ví dụ logo, để thay cho biểu tượng.

Khi khung chat đang đóng, nút hiện một chấm đỏ với số câu trả lời khách chưa đọc.

## Kích thước và khoảng cách tới góc

- **Độ rộng khung chat**: **Hẹp (340px)**, **Vừa (380px)** (mặc định) hoặc **Rộng (440px)**. Trên điện thoại, khung chat luôn mở toàn màn hình.
- **Khoảng cách nút chat tới góc (px)**: **Desktop: dưới** và **Desktop: cạnh** (trống là 20 px), **Điện thoại: dưới** và **Điện thoại: cạnh** (trống là 16 px). Nếu website trên điện thoại có thanh cố định ở cuối màn hình, như nút "Thêm vào giỏ" hay thanh menu, hãy tăng **Điện thoại: dưới** để nút chat nằm phía trên. Khi để trống cả hai ô điện thoại, điện thoại dùng số của máy tính.

## Đầu khung chat

Thẻ **Đầu khung chat** quyết định phần trên cùng của khung chat.

- **Hiển thị**: **Ảnh nhân viên đang trực** (mặc định) hiện tối đa ba nhân viên đang trực tuyến. **Ảnh nhân viên đang trực, không ai trực thì logo** cũng vậy, nhưng hiện logo khi không ai trực. **Ảnh một nhân viên được chọn** luôn hiện người bạn chọn ở ô **Nhân viên hiển thị**, ví dụ chủ shop, dù họ có trực hay không. **Logo doanh nghiệp** hiện logo trong ô **Logo (URL https, ảnh vuông)**, hoặc chữ cái đầu của tiêu đề widget nếu chưa có logo.
- **Dòng giới thiệu (Tiếng Việt)** và **Dòng giới thiệu (English)**: tối đa 120 ký tự, ví dụ "Thường trả lời trong vài phút".

Dưới dòng giới thiệu, đầu khung chat ghi "Chúng tôi đang trực tuyến", hoặc "Hiện chúng tôi vắng mặt" kèm giờ quay lại nếu bạn dùng giờ làm việc. Xem [Giờ làm việc và tin nhắn ngoài giờ](https://hatang.dev/vi/help/widget/office-hours).

## Ngôn ngữ

Widget nói tiếng Việt hoặc tiếng Anh. Trong thẻ **Tin nhắn**, **Ngôn ngữ mặc định** quyết định ngôn ngữ:

- **Tự động (theo trình duyệt)** (mặc định): tiếng Việt cho khách có trình duyệt tiếng Việt, tiếng Anh cho những người còn lại.
- **Tiếng Việt** hoặc **English**: luôn dùng ngôn ngữ đó.

Các nội dung bạn tự viết, như lời chào hay chữ trên nút, đều có ô tiếng Việt và ô tiếng Anh. Có khách nước ngoài thì điền cả hai. Lập trình viên cũng có thể đổi ngôn ngữ theo từng trang; plugin WordPress tự làm việc này.

## Nơi hiện widget

Thẻ **Nơi hiện widget** giới hạn widget ở một số trang hoặc thiết bị:

- **Thiết bị**: **Mọi thiết bị**, **Chỉ máy tính** hoặc **Chỉ điện thoại** (màn hình rộng từ 640 px trở xuống).
- **Chỉ hiện trên URL chứa (mỗi dòng một chuỗi; trống = mọi trang)**: ví dụ `/san-pham`. Widget chỉ hiện trên trang có địa chỉ chứa một trong các chuỗi này.
- **Ẩn trên URL chứa (mỗi dòng một chuỗi)**: ví dụ `/checkout` để widget không hiện ở trang thanh toán.
- **Phát âm thanh khi có tin nhắn mới** và **Nhấp nháy tiêu đề tab khi khách đang ở tab khác**: bật sẵn, để khách không bỏ lỡ câu trả lời của bạn.

Khung chat khách đang mở vẫn hiện, kể cả khi họ chuyển sang trang bạn đã loại trừ.