Cách tùy chỉnh giao diện Shoply AI Chat

Cách tùy chỉnh Shoply AI Chat

Shoply AI Chat và AI Search cung cấp hơn 40 tùy chọn để tùy chỉnh giao diện của ứng dụng.

Phần này hướng dẫn bạn các tùy chọn tùy chỉnh khác nhau hiện có cho AI Chatbot. Bạn có thể cá nhân hóa giao diện, thiết kế cửa sổ trò chuyện và trải nghiệm nhắn tin để phù hợp với thương hiệu của mình.

Bạn đã sẵn sàng bắt đầu chưa? Hãy truy cập trang Customize AI Chat trong bảng điều khiển quản trị của ứng dụng để bắt đầu tùy chỉnh trải nghiệm trò chuyện. Sau khi bật Shoply AI Chat trong Theme Editor của Shopify, biểu tượng trò chuyện sẽ xuất hiện ở góc dưới bên phải của trang web cửa hàng.

Lựa chọn biểu tượng trò chuyện

Chọn biểu tượng

Bạn có thể chọn một biểu tượng trò chuyện từ 17 biểu tượng khác nhau được định nghĩa sẵn của chúng tôi hoặc tải lên một hình ảnh để làm biểu tượng trò chuyện riêng.

Chọn các biểu tượng khác nhau cho nút AI Chat

Màu sắc và kích thước biểu tượng trò chuyện

Tùy chỉnh nút AI Chat

Màu chính

Đây là màu chủ đề chính, đồng thời cũng được dùng làm màu văn bản được làm nổi bật trong cửa sổ trò chuyện.

Nếu bạn sử dụng chế độ sáng trên trang web, vui lòng chọn một màu không phải màu trắng làm màu chủ đề — để đảm bảo văn bản được làm nổi bật vẫn dễ đọc trên nền sáng. Nếu bạn sử dụng chế độ tối trên trang web, vui lòng chọn một màu không phải màu đen làm màu chủ đề.

Màu bổ trợ

Đây là màu bổ trợ kết hợp với màu chính để tạo hiệu ứng chuyển màu (chuyển tiếp mượt mà giữa hai màu) cho biểu tượng trò chuyện và phần đầu của cửa sổ trò chuyện, giúp biểu tượng trò chuyện bắt mắt hơn và phù hợp với thương hiệu của bạn.

Màu đường viền của biểu tượng

Đây là màu đường viền của biểu tượng trò chuyện.

Có xóa màu nền của biểu tượng trò chuyện hay không.

Tùy chọn này thường hữu ích nếu bạn tải lên một hình ảnh làm biểu tượng trò chuyện và muốn xóa màu nền (màu chính) của biểu tượng trò chuyện.

Có xóa bóng của biểu tượng trò chuyện hay không.

Tùy chọn này cho phép bạn xóa hiệu ứng bóng đổ khỏi biểu tượng trò chuyện để có thiết kế phẳng hơn, tối giản hơn. Tùy chọn này đặc biệt hữu ích nếu cửa hàng của bạn có phong cách thẩm mỹ sạch sẽ, hiện đại hoặc nếu bạn đã tải lên một biểu tượng tùy chỉnh vốn đã có hiệu ứng bóng hoặc chiều sâu riêng.

Kích thước biểu tượng nổi trên máy tính và thiết bị di động.

Trên thiết bị di động, bạn có thể muốn đặt kích thước biểu tượng trò chuyện nhỏ hơn để tránh che khuất tầm nhìn của khách hàng trên màn hình di động.

Định vị biểu tượng trò chuyện

Vị trí biểu tượng trò chuyện trên máy tính và thiết bị di động.

Z-index của biểu tượng trò chuyện:

Hãy sử dụng giá trị cao hơn nếu bạn muốn biểu tượng luôn nằm phía trước các thành phần giao diện người dùng khác.

Tự động ẩn biểu tượng trò chuyện trên thiết bị di động

Ẩn biểu tượng trò chuyện sau một số giây được chỉ định trên các thiết bị di động.

Tùy chọn này chỉ khả dụng trên các thiết bị di động. Tùy chọn này giúp ngăn biểu tượng trò chuyện che khuất tầm nhìn của khách hàng trên màn hình di động.

Tùy chỉnh cửa sổ trò chuyện

Khi bạn nhấp vào biểu tượng trò chuyện của Shoply AI, cửa sổ trò chuyện sẽ bật lên. Khách hàng có thể tương tác với Shoply AI thông qua cửa sổ trò chuyện đó.

Phần này sẽ hướng dẫn bạn các tùy chọn khác nhau để tùy chỉnh cửa sổ trò chuyện.

Chủ đề màu sắc (chế độ tối hoặc chế độ sáng) của cửa sổ trò chuyện

Nếu bạn chọn chế độ tối, nền của cửa sổ trò chuyện sẽ có màu đen và màu phông chữ sẽ là màu trắng. Chúng tôi khuyến nghị bạn áp dụng tùy chọn chế độ tối nếu chủ đề của cửa hàng cũng đang ở chế độ tối.

Chế độ tối hoặc sáng cho cửa sổ AI Chat

Chiều rộng cửa sổ trò chuyện trên máy tính

Tùy chọn này chỉ áp dụng cho máy tính. Trên thiết bị di động, cửa sổ trò chuyện luôn chiếm toàn bộ màn hình.

Chọn hình ảnh thương hiệu và hình nền

Bạn có thể chọn tải lên hình ảnh thương hiệu và hình nền của riêng mình cho cửa sổ trò chuyện hoặc chỉ cần để Shoply AI tạo những hình ảnh đó cho bạn.

Nếu bạn chọn sử dụng hình ảnh do AI tạo, Shoply AI sẽ tạo hình ảnh thương hiệu và hình nền dựa trên phần mô tả cửa hàng của bạn.

Điều chỉnh độ trong suốt và tỷ lệ khung hình của hình nền cho cửa sổ trò chuyện.

Hình nền trong cửa sổ trò chuyện có thể khiến văn bản bên trên khó đọc. Vì vậy, theo mặc định, chúng tôi thêm một lớp bán trong suốt lên trên hình nền.

Có xóa Logo của Shoply AI trong thanh nhập liệu hay không

Tùy chọn này cho phép bạn xóa logo Shoply AI khỏi thanh nhập liệu trò chuyện để có trải nghiệm gọn gàng hơn và mang đậm thương hiệu hơn. Tùy chọn này đặc biệt hữu ích nếu bạn muốn duy trì nhận diện thương hiệu nhất quán trên toàn bộ cửa hàng mà không có logo của bên thứ ba hoặc nếu bạn thích thiết kế giao diện trò chuyện tối giản hơn.

Tùy chọn này chỉ khả dụng cho các gói trả phí.

Tin nhắn được định sẵn cho AI Chat

Bạn cũng có thể thiết lập hoặc chỉnh sửa các tin nhắn mặc định để hướng dẫn khách hàng khi họ lần đầu tương tác với chatbot. Ngoài ra, bạn có thể cấu hình các tùy chọn dịch cho những tin nhắn đó (xem trang FAQ này để biết thêm chi tiết).

Tin nhắn chào mừng bật lên (hiển thị phía trên biểu tượng trò chuyện nếu không để trống)

Nếu bạn để trống tin nhắn chào mừng, chúng tôi sẽ không hiển thị tin nhắn chào mừng phía trên biểu tượng trò chuyện.

Tin nhắn chào mừng bật lên

Tin nhắn được định sẵn trong cửa sổ trò chuyện

Bạn có thể thiết lập tối đa 3 loại tin nhắn được định sẵn trong cửa sổ trò chuyện:

  1. Tin nhắn đầu tiên trong cửa sổ trò chuyện - Đây là lời chào mở đầu tự động xuất hiện khi khách hàng lần đầu mở cửa sổ trò chuyện. Hãy sử dụng tin nhắn này để chào đón khách hàng và thiết lập không khí cho cuộc trò chuyện.

  2. Tối đa 4 câu hỏi bắt đầu - Đây là các gợi ý câu hỏi có thể nhấp vào, được hiển thị khi bắt đầu cuộc trò chuyện. Chúng giúp hướng dẫn khách hàng bằng cách cung cấp các câu hỏi phổ biến mà họ có thể nhấp vào để bắt đầu trò chuyện, giúp khách hàng bắt đầu dễ dàng hơn.

  3. Tin nhắn giữ chỗ trong ô nhập liệu - Đây là dòng gợi ý xuất hiện trong trường nhập liệu trò chuyện trước khi khách hàng bắt đầu nhập. Dòng này hướng dẫn khách hàng về những điều họ có thể hỏi, chẳng hạn như “Hãy hỏi tôi bất cứ điều gì 🤗” hoặc “Hôm nay tôi có thể giúp gì cho bạn?”

Xem ví dụ cho từng loại tin nhắn được định sẵn:

Tin nhắn được định sẵn trong cửa sổ trò chuyện