Thành phần - Component
Thành phần (Component) là nơi chứa nội dung mà doanh nghiệp muốn truyền tải đến người dùng hoặc tạo không gian để người dùng điền thông tin.
Last updated
Thành phần (Component) là nơi chứa nội dung mà doanh nghiệp muốn truyền tải đến người dùng hoặc tạo không gian để người dùng điền thông tin.
Last updated
Có 7 nhóm thành phần:
Xác thực người dùng
Dàn trang
Tương tác
Văn bản & Hình ảnh
Form
Lựa chọn
Thời gian
Xác thực người dùng là nhóm thành phần mà hệ thống tự động điền giá trị dựa vào thông tin cá nhân của người dùng tại Mini App. Nhóm thành phần xác thực người dùng này giúp hệ thống đảm bảo lấy chính xác thông tin mà người dùng cung cấp cho Mini App. Thông tin chính xác, sạch sẽ tạo ý nghĩa lớn cho việc phân tích dữ liệu phục vụ cho các hoạt động kinh doanh.
Việc hệ thống có thể lấy được thông tin để tự điền vào trường thành phần sẽ phụ thuộc vào việc người dùng phải cấp quyền. Do đó, khi thiết lập hai trường thông tin này, admin nên yêu cầu quyền phù hợp (yêu cầu quyền xác thực số điện thoại để lấy được thông tin cho trường số điện thoại, yêu cầu quyền quan tâm OA để lấy được thông tin cho trường họ và tên).
Các trường hợp xảy ra:
Trường hợp 1: Admin cài đặt yêu cầu quyền và người dùng cấp quyền: người dùng có thể phép truy cập vào mẫu DynamicAction và hệ thống lấy được thông tin để điền vào thành phần xác thực người dùng
Trường hợp 2: Admin cài đặt yêu cầu quyền và người dùng không cấp quyền: người dùng không được phép truy cập vào mẫu DynamicAction
Trường hợp 3: Admin không cài đặt yêu cầu quyền và người dùng đã cấp quyền trước đó: hệ thống vẫn có thể lấy thông tin để điền vào các trường này
Trường hợp 4: Admin không cài đặt yêu cầu quyền và người dùng không cấp quyền: người dùng có thể truy cập mẫu DynamicAction, và được phép nhập thông tin ở các trường này, hệ thống không thể tự điền thông tin
Họ và tên là tên hiển thị của người dùng tại Mini App. Khi người dùng thay đổi tên hiển thị tại mục cài đặt chỉnh sửa thông tin cá nhân của Mini App thì thành phần họ và tên này sẽ lấy tên mà người dùng vừa thay đổi.
Số điện thoại là số điện thoại người dùng xác thực ở Zalo, dùng chung cho tất cả các Zalo Mini App. Người dùng không thể sửa đổi số điện thoại ở phần cài đặt sau khi đã cho phép Mini App truy cập số điện thoại.
Bảng so sánh thông số của từng thành phần
Thông số có thể cài đặt
Nội dung
Cài đặt
Tiêu đề
Gợi ý
Bắt buộc
Họ và tên
Số điện thoại
Cài đặt thông số
Dữ liệu ghi vào: Là nơi lưu trữ dữ liệu thu thập được từ các trường thông tin này. Các dữ liệu từ một trường sẽ tạo thành một cột trong bảng của Data Hub. Do đó admin phải thiết lập Data Hub, bảng và cột để chứa các dữ liệu từ thành phần.
Nội dung
[1] Tiêu đề: Admin có thể điều chỉnh tiêu đề của văn bản theo chủ đề của mẫu thu thập thông tin, cho phép họ tạo ra các tiêu đề phù hợp và chính xác để làm nổi bật và mô tả đúng mục đích thu thập họ và tên, số điện thoại.
[2] Gợi ý: Câu trả lời mẫu mà admin nhập vào khung trả lời. Admin có thể dùng gợi ý để định hướng cách trả lời cho người dùng, giúp người dùng dễ dàng hiểu rõ yêu cầu và trả lời đúng trọng tâm. Dòng gợi ý không có ý nghĩa như một câu trả lời thật sự, và dòng chữ này sẽ có màu xám. Người dùng vẫn phải điền câu trả lời tại đây.
Cài đặt
[3] Bắt buộc: Nếu admin kích hoạt tính năng bắt buộc, người dùng sẽ phải nhập thông tin vào thành phần này trước khi được phép thực hiện các Action. Ngược lại, người dùng có thể bỏ qua việc điền thông tin vào trường này mà vẫn có thể gửi biểu mẫu bình thường. Quản trị viên sử dụng thành phần này tùy thuộc vào mức độ cần thiết của từng loại dữ liệu.
Block là khối để chứa các thành phần khác bên trong.
Mục đích sử dụng block (khối):
Có hai cách trình bày khối block
Cài đặt thông số
[1] Kích thước hiển thị:
100%: lề block sát với hai lề điện thoại
Trong lề: lề block thụt vào trong một khoảng nhất định so với hai lề điện thoại
Tùy chỉnh: admin có thể tùy chỉnh khoảng cách giữa lề block và hai lề điện thoại
Style:
[2] Màu chủ đạo: Màu nền của Block
[3] Text trên màu chủ đạo: Màu chữ của các thành phần trong Block
[4] Radius: tùy chỉnh độ bo góc của block
Tương tự như block, đường sẽ tạo ra một đường kẻ (dòng kẻ) ở giữa hai thành phần. Đường được dùng với mục đích phân chia các thành phần thành các nhóm riêng biệt tùy theo mục đích trình bày trang. Sự sắp xếp này giúp tạo ra một bố cục rõ ràng và có tổ chức, làm nổi bật các phần quan trọng. Qua đó, chúng ta có thể dẫn dắt mắt người đọc qua từng phần của trang DynamicAction một cách hợp lý.
Cài đặt thông số
Kích thước: độ dày của đường kẻ. Có 3 loại kích cỡ: nhỏ, vừa và lớn. Kích thước của đường ảnh hưởng sự phân tách giữa các nhóm thành phần. Kích thước của đường càng lớn thì sự phân biệt giữa các nhóm thành phần càng tăng.
Màu sắc: cài đặt màu sắc cho đường kẻ.
Cho phép người dùng thực hiện một hành động nào đó khi nhấn vào. Button có thể được sử dụng để điều hướng đến các trang khác (trang của DynamicAction hoặc trang tại Mini App) tuỳ thuộc vào cấu hình.
Ví dụ: Form đăng ký tham gia chuỗi học tiếng anh, ngay tại trang 1: Trang giới thiệu, tạo một nút button để dẫn đến trang đăng ký
Cài đặt thông số
[1] Width: Chiều rộng của nút Button. Đơn vị: % (phần trăm) so với bề rộng của điện thoại
[2] Height: Chiều cao của nút Button Đơn vị: pixel
[3] Padding: Khoảng cách của nội dung trong Button so với lề Button
[4] Radius: bo tròn góc Có hai cách điều chỉnh:
Liên kết: Tương tự như Action, Button cũng có liên kết đến để dẫn đến trang DynamicAction hoặc trang Mini App theo cấu hình.
Style: Chọn một trong hai dạng nền cho button: Màu nền (chọn màu từ thư viện) và nền hình ảnh (tải ảnh từ máy Các thông số tùy chỉnh nền ảnh cho button
[5] Background-positon: vị trí trên hình được chọn làm nền button
[6] Background-size: kích cỡ của hình + Contain: phóng to thu nhỏ hình theo tỉ lệ để lấp đầy chiều cao hoặc chiều dài của khung chứa (container). Không cắt và kéo giãn hình + Cover: phóng to thu nhỏ hình theo tỉ lệ để lấp đầy cả chiều cao và chiều dài của khung chứa (container), không để lại khoảng trống. Cắt phần hình dư thừa, không kéo giãn hình + Auto: Giữ nguyên kích thước gốc
[7] Background-repeat: Lặp lại hình (khi kích thước chiều ngang, hay chiều rộng không đủ để làm nền cho button) + Repeat: Tự động nhận biết chiều còn thiếu để lặp lại hình theo chiều đó + Repeat X: Lặp lại theo chiều ngang + Repeat Y: Lặp lại theo chiều dọc + No Repeat: Không lặp lại
Ví dụ: Với hình trên, Button có hình nền là logo CNV, được điều chỉnh: + Background-position => Left center: Logo đầu tiên bên trái được nằm trọn vẹn trong button + Background-size => Contain: Mình được phóng to/thu nhỏ để lấp đầy chiều cao của button + Background-repeat => Repeat X: Hình được lặp lại theo chiều dài (chiều ngang) để đủ làm nền cho button
Hiển thị: Mỗi Button sẽ có thể có tối đa 3 thành phần. Có 3 loại thành phần là: text, icon và hình ảnh
Các thành phần tiêu đề, đoạn văn bản và mô tả là những không gian mà quản trị viên có thể nhập thông tin và trình bày nó trên màn hình của khách hàng. Khách hàng không thể điền thông tin vào các phần này. Ba thành phần này khác nhau ở nhu cầu trình bày trang và cài đặt thông số. Admin có thể sử dụng linh hoạt 3 thành phần này để phân loại theo các mức độ quan trọng của nội dung.
Thành phần tiêu đề thường được sử dụng để phác thảo chủ đề chính, tóm tắt tiêu đề của một mẫu đánh giá hoặc làm điểm nổi bật cho một phần quan trọng của nội dung lớn, giúp người đọc dễ dàng hiểu và tập trung vào điểm cốt yếu của tài liệu.
Thành phần đoạn văn bản thường được sử dụng ở vị trí tiêu đề của các mục, nhằm tóm tắt nội dung của phần nội dung dài, giúp người đọc nắm bắt được ý chính và quan trọng của phần tiếp theo.
Thành phần mô tả thường được sử dụng để cung cấp một giới thiệu chi tiết về nội dung.
[1] Tiêu đề: "Danh sách các sản phẩm có tại cửa hàng"
[2] Đoạn văn bản để cụ thể tên sản phẩm: "Sữa rửa mặt "
[3] Mô tả để cung cấp thông tin cụ thể về sản phẩm như: thông số sản phẩm, thành phần, hướng dẫn sử dụng.
Bảng so sánh thông số của từng thành phần
Thông số có thể cài đặt
Nội dung
Căn lề
Kiểu chữ
Tiêu đề
Đoạn văn bản
Văn bản
Cài đặt thông số
[1] Nội dung: Nội dung thông tin admin muốn truyền đạt đến khách hàng. Nội dung ở tiêu đề và đoạn văn bản không thể xuống dòng, trong khi đó nội dung ở mô tả có thể xuống dòng.
[2] Căn lề: Cách thức sắp xếp văn bản theo những đường thẳng dọc tương ứng trên một trang. Việc căn lề này ảnh hưởng đến cách hiển thị và trình bày nội dung, tạo ra các hiệu ứng thẩm mỹ và dễ đọc khác nhau. Có ba kiểu căn lề: trái, giữa, phải
[3] Kiểu chữ: Kích thước của chữ được sử dụng ở nội dung. Kích thước của kiểu chữ ảnh hưởng đến độ dễ đọc và tính thẩm mỹ của tài liệu và đặc biệt là ẩn ý vai trò của văn bản. Có ba loại kích cỡ: lớn, bình thường, nhỏ
Kiểu chữ to: Thường được sử dụng cho các tiêu đề chính, tiêu đề phần, hoặc các đoạn văn bản cần nổi bật. Nhằm mục đích thu hút sự chú ý, giúp nhấn mạnh các phần quan trọng của tài liệu.
Kiểu chữ bình thường: Sử dụng cho phần lớn nội dung văn bản, đoạn văn, hoặc các phần mô tả chi tiết. Được thiết kế để dễ đọc và không gây mỏi mắt khi đọc trong thời gian dài.
Kiểu chữ nhỏ: Thường được sử dụng cho các chú thích, ghi chú, nguồn gốc tài liệu, hoặc các thông tin phụ. Kiểu chữ nhỏ giúp không chiếm nhiều không gian của trang nhưng vẫn đảm bảo cung cấp đủ thông tin và dễ đọc.
Không gian để admin thêm hình ảnh vào form DynamicAction để gửi đến màn hình của người dùng, người dùng sẽ không thể thêm hình ảnh ở đây. Hình được thêm vào giúp cải thiện trải nghiệm người dùng và làm cho mẫu DynamicAction
Giải thích hai khái niệm: hình và khung
Hình là hình ảnh mà admin thêm vào. Ví dụ: hình ảnh sữa rửa mặt
Khung là một phần giới hạn xung quanh, nó quy định phần nào của hình ảnh được hiển thị trên màn hình. Kích thước của khung phụ thuộc vào tỷ lệ ảnh mà admin đã thiết lập. Ví dụ: nếu admin đặt tỷ lệ ảnh là 4:3, thì sẽ tạo ra một khung có tỉ lệ chiều dài và chiều rộng là 4:3.
Hai khái niệm "ảnh" và "khung" là độc lập với nhau. Ảnh có thể trùng khớp với khung, hoặc nhỏ hơn hoặc lớn hơn khung.
+ Nếu ảnh nhỏ hơn khung, thì ảnh sẽ được hiển thị hết trên màn hình, và phần còn lại của khung sẽ được điền bằng khoảng không gian trống.
+ Nếu hình lớn hơn khung, chỉ một phần của hình sẽ được hiển thị trong khung, phần còn lại sẽ bị cắt bỏ và không được hiển thị trên màn hình.
+ Nếu hình bằng khung thì hình sẽ được hiển thị hết lên màn hình và không tạo ra không gian trống
Tỷ lệ ảnh: Co giãn chiều rộng của hình để phù hợp với khung được cấu hình
Tự động: hình được giữ nguyên kích thước gốc
1:1: Khung có tỉ lệ chiều dài:chiều rộng = 1:1, nghĩa là chiều dài bằng chiều rộng, lúc này hình sẽ ở dạng hình vuông.
4:3: Khung có tỉ lệ chiều dài:chiều rộng = 4:3
16:9: Khung có tỉ lệ chiều dài:chiều rộng = 16:9
3:1: Khung có tỉ lệ chiều dài:chiều rộng = 3:1
Kích cỡ: kích cỡ hình lớn hay nhỏ.
Lớn: phóng to hỉnh để sát đến hai lề điện thoại
Nhỏ: thu nhỏ ảnh để hình có kích cỡ vừa phải, phù hợp với văn bản
Object-fit: Cách điều chỉnh hình để phù hợp với khung đã chọn. Các phương pháp có thực hiện như phóng to, thu nhỏ hoặc co giãn chiều dài, chiều rộng
Contain: phóng to, thu nhỏ hình nhưng vẫn giữ nguyên tỉ lệ hình và vẫn đảm bảo hình được nằm hoàn toàn trong khung, đến lúc chiều dài hoặc chiều rộng của hình vừa với chiều dài hoặc chiều rộng của khung. Phần hình thiếu hụt so với khung sẽ được điền bằng khoảng không gian trống màu trắng.Cover: phóng to, thu nhỏ hình nhưng vẫn giữ nguyên tỉ lệ hình và hình phải lấp đầy khung. Phần hình dư ra ở chiều dài hoặc chiều rộng sẽ được cắt bỏ và không hiển thị lên màn hình.
Fill: co giãn chiều dài và chiều rộng của hình để vừa với khung. Phương pháp này có thể làm biến dạng hình.
None: giữ nguyên kích thước ban đầu của hình. Phần hình thiếu hụt so với khung sẽ được điền bằng khoảng không gian trống màu trắng.
Object position: vị trí của hình sẽ với khung
Top: Hình ảnh sẽ được căn chỉnh từ chính giữa của mép trên của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Bottom: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của mép dưới của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Left: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của mép trái của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Right: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của mép phải của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Center: Hình ảnh sẽ được ưu tiên căn chỉnh từ chính giữa của hình của hình cho đến khi vừa khít với khung. Phần còn thiếu so với khung sẽ được lấp đầy bằng khoảng trống màu trắng. Phần dư ra sẽ được cắt bỏ, không hiển thị lên màn hình.
Radius: Bo bốn góc theo tỉ lệ được cấu hình.
Đây là một không gian dành cho khách hàng nhập thông tin. Tùy thuộc vào yêu cầu cụ thể về loại thông tin cần thu thập, người quản trị có thể chọn các thành phần phù hợp để tối ưu hóa quá trình này.
Tùy theo nhu cầu thu thập thông tin mà admin lựa chọn thành phần nhập văn bản hay thông tin.Nhập văn bản thường được dùng khi muốn thu thập từ khách hàng một lượng thông tin vừa phải và khách hàng không được xuống dòng tại thành phần này.
Nhập nội dung sẽ được dùng khi muốn thu thập lượng lớn thông tin và cho phép khách hàng xuống dòng để tạo thành từng đoạn văn bản.
Khác với thành phần số điện thoại tại nhóm xác thực người dùng, thành phần số điện thoại tại nhóm Form sẽ cho phép khách hàng tự nhập số điện thoại.
Để đảm bảo dùng đúng mục đích thu thập số điện thoại (phạm vi Việt Nam), component số điện thoại yêu cầu một số điều kiện đầu vào, ví dụ: bắt đầu là 0 thì phải đủ 10 số, bắt đầu là 84 thì phải đủ 11 số, còn lại thì phải đủ 9 số.
Việc sử dụng số điện thoại ở nhóm Form này có thể nhằm hai mục đích:
Sử dụng với mục đích thu thập số điện thoại của khách hàng: Số điện thoại trong nhóm xác thực người dùng thường yêu cầu khách hàng cung cấp thông tin số điện thoại cho Mini App, điều này có thể hạn chế khả năng tiếp cận khách hàng. Ngược lại, với thành phần này trong nhóm Form, khách hàng có thể tùy ý điền số điện thoại của mình mà không bị ép buộc, giúp tăng tỷ lệ cung cấp thông tin.
Dùng cả 2 số điện thoại ở xác thực người dùng với số điện thoại ở form với mục đích khác nhau của admin.
[1] Số điện thoại ở nhóm xác thực người dùng để lấy thông tin của khách
[2] Số điện thoại ở nhóm Form để lấy sđt của người đi cùng (cho phép khách hàng tự nhập).
Điều này rất hữu ích khi không liên lạc được với khách hàng, cửa hàng có thể liên lạc thông qua người đi cùng để nhắc nhở lịch đã đặt.
Với hai thành phần số và số tiền, dữ liệu được nhập vào sẽ luôn ở dạng số. Việc phân biệt rõ ràng giữa định dạng số và chữ không chỉ làm cho quá trình thu thập thông tin trở nên dễ dàng và đáng tin cậy hơn mà còn giúp giảm thiểu sai sót trong quá trình nhập liệu do lẫn lộn giữa số và chữ. Đảm bảo dữ liệu được thu thập đúng định dạng mang lại nhiều lợi ích quan trọng, cho việc phân tích dữ liệu, từ đó hỗ trợ tốt hơn cho các quyết định và chiến lược kinh doanh.
Số được áp dụng khi admin mong muốn khách hàng cung cấp một giá trị số lượng cụ thể, chẳng hạn như số lượng sản phẩm cần đặt hàng, số lượng vé cần mua, hoặc bất kỳ thông tin số hóa nào khác.
Số tiền được sử dụng khi admin mong muốn khách hàng nhập vào một giá trị tiền tệ cụ thể, như giá của sản phẩm, phí dịch vụ, hoặc số tiền thanh toán. Việc tạo ra một thành phần số tiền riêng giúp tạo ra một giao diện hấp dẫn và dễ hiểu.
Thành phần hình ảnh được thêm vào Form nhằm cho phép khách hàng gửi ảnh, đáp ứng nhu cầu thu thập thông tin hình ảnh của quản trị viên với các mục đích khác nhau.
Bảng so sánh thông số của từng thành phần
Thông số có thể cài đặt
Nội dung
Cài đặt
Định dạng
Tiêu đề
Gợi ý
Câu trả lời mặc định
Giá trị
Bắt buộc
Giới hạn số lượng ảnh
Hiển thị dấu phân cách hàng nghìn
Hiển thị số chữ số thập phân
Nhập văn bản
Nhập nội dung
Số điện thoại
Số
Số tiền
Thêm ảnh
Cài đặt thông số
Nội dung
Tiêu đề: Admin có thể điều chỉnh tiêu đề của văn bản theo chủ đề của mẫu thu thập thông tin, cho phép họ tạo ra các tiêu đề phù hợp và chính xác để làm nổi bật và mô tả đúng mục đích của dữ liệu được thu thập.
Gợi ý: Câu trả lời mẫu mà admin nhập vào khung trả lời. Admin dùng gợi ý để định hướng cách trả lời cho khách hàng, giúp khách hàng dễ dàng hiểu rõ yêu cầu và trả lời đúng trọng tâm. Dòng gợi ý không có ý nghĩa như một câu trả lời thật sự, và dòng chữ này sẽ có màu xám. Khách hàng vẫn phải điền câu trả lời tại đây trước khi thực hiện action
[1] Tiêu đề: "Địa chỉ email (Nếu có)"
[2] Gợi ý: "Abc@gmail.com"
Cài đặt
Câu trả lời mặc định: Sử dụng với mục đích tương tự như gợi ý là định hướng cách trả lời đúng trọng tâm cho khách hàng; tuy nhiên khác với gợi ý thì câu trả lời mặc định là một câu trả lời thật sự. Khách hàng có thể chỉnh sửa hoặc dùng câu trả lời mặc định như câu trả lời của họ (Không cần nhập lại câu trả lời vẫn có thể bấm action)
[1] Tiêu đề: "Bạn có muốn mời bạn bè cùng sử dụng dịch vụ tại CNV Shop không?"
[2] Câu trả lời mặc địch: "Tất nhiên là có rồi"
Giá trị: Thiết lập các giới hạn trên và giới hạn dưới cho thành phần chứa số nhằm đảm bảo dữ liệu được nhập trong khoảng cho phép đã được quy định trước. Điều này giúp ngăn chặn việc nhập các giá trị không hợp lệ, đảm bảo tính chính xác và nhất quán của dữ liệu thu thập được.
Bắt buộc: Nếu admin kích hoạt tính năng bắt buộc, khách hàng sẽ phải nhập thông tin vào thành phần này trước khi được phép thực hiện các action
Giới hạn số lượng ảnh: quy định số lượng ảnh mà khách hàng có thể thêm vào thành phần.
Định dạng: Việc thêm định dạng cho dữ liệu số sẽ giúp dữ liệu được rõ ràng, dễ đọc, truyền tải thông tin chính xác, chuyên nghiệp và thẩm mỹ hơn.
Hiển thị dấu phân cách hàng nghìn: Khi tính năng này được kích hoạt, số tiền nhập vào sẽ được hiển thị với các dấu phẩy để phân tách từng nhóm hàng nghìn. Điều này giúp người dùng dễ dàng đọc và xử lý các con số lớn một cách chính xác hơn.
Hiển thị số chữ số thập phân: Khi tính năng này được bật, khách hàng có thể nhập số tiền dưới dạng số thập phân. Điều này cho phép biểu diễn chính xác cao hơn trong các trường hợp sử dụng tiền ở các đơn vị như Đô la Mỹ, Euro, ...
Hiển thi danh sách các lựa chọn được thiết lập sẵn nhằm cung cấp cho khách hàng các tùy chọn cụ thể và dễ dàng khi ra quyết định. Trong thành phần trắc nghiệm, người dùng chỉ được phép chọn một trong các phương án được đưa ra, giúp đảm bảo rằng mỗi câu trả lời là duy nhất.
Tương tự như thành phần trắc nghiệm, hộp chọn cũng đưa ra các phương án đã được thiết kế sẵn để khách hàng lựa chọn dễ dàng. Tuy nhiên, ở hộp chọn, khách hàng có thể chọn không giới hạn số lượng lựa chọn được đưa ra, tạo sự đa dạng cho việc thu thập thông tin.
Thành phần xổ danh sách có chức năng tương tự trắc nghiệm. Tuy nhiên, thay vì thể hiện toàn bộ các lựa chọn ra màn hình khách hàng, xổ danh sách chỉ hiển thị phương án đang được chọn và ẩn các phương án còn lại. Khách hàng có thể nhấn vào một nút để mở rộng danh sách và xem tất cả các lựa chọn có sẵn. Hành động này giúp tiết kiệm không gian trên trang và tạo ra một giao diện thẩm mỹ và gọn gàng, tạo điều kiện cho trải nghiệm người dùng tốt hơn.
Đánh giá sao thường được sử dụng để đo lường mức độ yêu thích hoặc hài lòng, mức độ thường xuyên của một sản phẩm hoặc hành động. Thành phần này bao gồm 5 mức độ, mỗi mức độ tương ứng với một số sao từ 1 đến 5, thể hiện mức độ hài lòng tăng dần từ thấp đến cao. Đánh giá sao là một cách lượng hóa các tiêu chí định tính, giúp doanh nghiệp dễ dàng xử lý thông tin thu được để đưa ra các quyết định kinh doanh
Bảng so sánh thông số của từng thành phần
Thông số có thể cài đặt
Nội dung
Tùy chọn
Style
Cài đặt
Tiêu đề
Gợi ý
Mô tả
Thêm tùy chọn
Chọn mặc định
Bắt buộc
Trắc nghiệm
Hộp chọn
Xổ danh sách
Đánh giá sao
Cài đặt thông số
Nội dung
Tiêu đề: Admin có thể điều chỉnh tiêu đề của văn bản theo chủ đề của mẫu thu thập thông tin, cho phép họ tạo ra các tiêu đề phù hợp và chính xác để làm nổi bật và mô tả đúng mục đích của dữ liệu được thu thập.
Gợi ý: Câu trả lời mẫu mà admin nhập vào khung trả lời. Admin có thể dùng gợi ý để định hướng cách trả lời cho khách hàng, giúp khách hàng dễ dàng hiểu rõ yêu cầu và trả lời đúng trọng tâm. Dòng gợi ý không có ý nghĩa như một câu trả lời thật sự, và dòng chữ này sẽ có màu xám. Khách hàng vẫn phải điền câu trả lời tại đây.
Mô tả: Thường được sử dụng để cung cấp một lời giải thích cụ thể hơn về nội dung, ý nghĩa của câu hỏi. Thông qua đó khách hàng có thể hiểu rõ để cung cấp câu trả lời đúng với mục đích thu thập thông tin của admin.
[1] Tiêu đề: "Chât lượng món ăn"
[2] Mô tả: "Tươi, chế biến ngon, trình bày đẹp"
Các tùy chọn: Nhóm thành phần lựa chọn sẽ bao gồm một loạt các tùy chọn được định sẵn, cho phép khách hàng dễ dàng chọn lựa những phương án phù hợp nhất với nhu cầu và sở thích cá nhân của họ. Việc này tạo sự thuận tiện và nhanh chóng trong quá trình ra quyết định của khách hàng. Có hai cách thêm tùy chọn:
+ Chọn mặc định: Nếu admin kích hoạt tính năng chọn mặc định thì một tùy chọn đã xác định trước sẽ được chọn sẵn. Khách hàng có thể thay đổi lựa chọn hoặc sử dụng lựa chọn mặc định làm câu trả lời của họ. Việc sử dụng lựa chọn mặc định nhằm mục đích định hướng suy nghĩ của khách hàng, hướng đến câu trả lời mà admin mong muốn được nhận.
Style: cách nút chọn được thể hiện trên giao diện màn hình khách hàng, có hai cách trình bày là tích chọn và chọn button.
Cài đặt
Bắt buộc: Nếu admin kích hoạt tính năng bắt buộc, khách hàng sẽ phải nhập thông tin vào thành phần này trước khi được phép thực hiện các hành động tiếp theo Action
Admin sử dụng thành phần này để thu thập thông tin về thời gian dưới dạng ngày hoặc ngày và giờ một cách chi tiết và chính xác. Ngày giờ thường xuất hiện dưới dạng một cửa sổ pop-up hiển thị một bảng lịch, cho phép người dùng bấm chọn. Việc này giúp hạn chế việc sai sót trong quá trình nhập dữ liệu của khách hàng.
Nội dung
+ Tiêu đề: Admin có thể điều chỉnh tiêu đề của văn bản theo chủ đề của mẫu thu thập thông tin, cho phép họ tạo ra các tiêu đề phù hợp và chính xác để làm nổi bật và mô tả đúng mục đích của dữ liệu được thu thập.
+ Gợi ý: Câu trả lời mẫu mà admin nhập vào khung trả lời. Admin có thể dùng gợi ý để định hướng cách trả lời cho khách hàng, giúp khách hàng dễ dàng hiểu rõ yêu cầu và trả lời đúng trọng tâm. Dòng gợi ý không có ý nghĩa như một câu trả lời thật sự, và dòng chữ này sẽ có màu xám. Khách hàng vẫn phải điền câu trả lời tại đây.
Dạng hiển thị: dữ liệu thời gian được thu thập vào hệ thống, tùy theo nhu cầu khai thác mức độ chi tiết thông tin của admin sử dụng dạng hiển thị tương ứng, có thể yêu cầu khách hàng cung cấp ngày hoặc cả ngày và giờ. Có 6 dạng hiển thị của ngày giờ là:
DD/MM/YYYY (Ngày/tháng/năm)
DD/MM/YYYY, HH:MM (Ngày/tháng/năm, giờ/phút)
DD/MM/YYYY, HH:MM:SS (Ngày/tháng/năm, giờ/phút/giây)
YYYY-MM-DD (Năm/tháng/ngày)
YYYY-MM-DD, HH:MM (Năm/tháng/ngày, giờ/phút)
YYYY-MM-DD HH:MM:SS (Năm/tháng/ngày, giờ/phút/giây)
Cài đặt bắt buộc: Nếu admin kích hoạt tính năng bắt buộc, khách hàng sẽ phải nhập thông tin vào thành phần này trước khi được phép thực hiện các Action
Thành phần Lịch cho phép người dùng chọn ngày
Thành phần Lịch được sử dụng với mục đích thu thập thông tin ngày tháng từ người dùng một cách dễ dàng, trực quan và chính xác.
Thành phần Lịch giúp đơn giản hóa việc nhập liệu liên quan đến ngày tháng, tránh các lỗi phổ biến khi người dùng phải nhập ngày tháng bằng tay.
Giới hạn chọn: Thành phần này sẽ hiển thị một khung lịch trực quan chi tiết đến ngày, tháng, năm để khách hàng lựa chọn ngày theo yêu cầu của mẫu. Tùy theo mục đích thu thập thông tin, admin có thể cấu hình để khách hàng chỉ chọn một ngày duy nhất hoặc chọn nhiều ngày khác nhau tùy theo từng chế độ.
Thời gian được chọn: Lịch hiển thị các ngày trong quá khứ và cả tương lai, cho phép khách hàng lựa chọn thời gian một cách linh hoạt. Tùy theo nhu cầu khai thác thông tin, admin có thể cấu hình chế độ để lịch phù hợp
Có hai chế độ:
Ví dụ: Khi khách hàng điền vào mẫu đăng ký thẻ thành viên, cửa hàng yêu cầu cung cấp thông tin về ngày tháng năm sinh. Thông tin này được sử dụng để triển khai các chương trình tri ân đặc biệt vào dịp sinh nhật của khách hàng, nhằm mang lại trải nghiệm cá nhân hóa và sự chăm sóc tận tình từ cửa hàng.
Ví dụ: Người dùng đặt chỗ khám bệnh hoặc đăng kí tham gia sự kiện, đây là các sự kiện chưa xảy ra nên yêu cầu người dùng chọn thời gian ở tương lai
Cài đặt bắt buộc: Nếu admin kích hoạt tính năng bắt buộc, khách hàng sẽ phải nhập thông tin vào thành phần này trước khi được phép thực hiện các Action
Gom nhóm các thành phần với nhau và phân tách giữa các nhóm thành phần: Admin tạo block; trong mỗi block, admin có thể thêm các thành phần từ 6 nhóm đã đề cập. Các block được ngăn cách bằng khoảng trống để tạo ra sự phân chia rõ ràng, giúp giao diện trở nên dễ nhìn, thẩm mỹ và dễ quản lý hơn.
Điều chỉnh khoảng cách của block so với lề: Khi thêm block, admin có thể điều chỉnh khoảng cách của các block so với hai lề bằng cách cài đặt kích thước hiển thị.
Đồng cấp: Các khối cùng cấp bậc với nhau. Giữa các block đồng cấp sẽ có không gian phân cách. Muốn tạo đồng cấp thì chuột máy tính phải đang chọn mục header hoặc cài đặt
Mẹ con: Block được phân cấp mẹ con khi đang trong 1 block, admin tiến hành thêm 1 block khác. Block con sẽ thụt trong một khoảng cách nhất định so với block mẹ. Muốn tạo block con trong block mẹ thì chuột máy tính phải đang chọn block mẹ.
Cách 1 : Điều chỉnh cùng lúc 4 phía của Button
Cách 2 : Điều chỉnh lần lượt từng phía của Button: Trên (Top); dưới (Bottom); trái (Left); phải (Right). Đơn vị: pixel
Ví dụ, một trang web bán hàng có thể sử dụng các thành phần tiêu đề, đoạn văn bản, mô tả để trình bày theo các mức độ nhấn mạnh các mức độ quan trọng khác nhau
Ví dụ: Quán ăn tạo phiếu đặt chỗ.
Ví dụ, trong trường hợp một cửa hàng sử dụng mẫu đặt lịch bảo hành, cửa hàng sửa chữa ô tô muốn khách hàng gửi hình ảnh về tình trạng xe cần sửa chữa, thành phần hình ảnh này sẽ rất hữu ích. Nó giúp cửa hàng nhận được thông tin chi tiết hơn về vấn đề của xe trước khi khách hàng mang xe đến, từ đó chuẩn bị tốt hơn cho quá trình sửa chữa.
Ví dụ:
Ví dụ:
Ví dụ: Trong khảo sát về nguồn thu hút khách hàng, admin muốn hỏi khách hàng biết đến cửa hàng lần đầu tiên qua kênh nào, lúc này khách hàng chỉ được chọn một trong các lựa chọn: Facebook, Tiktok, Instagram, bạn bè.
Ví dụ: Trong khảo sát về nguồn thu hút khách hàng, admin muốn hỏi khách hàng biết đến cửa hàng qua những kênh nào, lúc này khách hàng được phép chọn nhiều phương án được đề cập: Facebook, Tiktok, Instagram, bạn bè.
Ví dụ: Trong phiếu đặt chỗ ở quán ăn, khách hàng có thể chọn chi nhánh mà họ muốn đặt thông qua một danh sách chi nhánh được xổ ra.
Ví dụ: Để đánh giá chất lượng sản phẩm, dịch vụ tại cửa hàng, người dùng thể hiện mức độ yêu thích bằng cách chọn số sao từ 1 đến 5 tương ứng từ rất không thích đến rất thích.
Ví dụ:
[1] Thêm từng tùy chọn: admin tạo và điền lần lượt từng tùy chọn. Khi tạo thành phần, có một tùy chọn đã được thêm sẵn, admin điền nội dung của phương án đầu tiên vào tùy chọn này, sau đó bấm "Thêm tùy chọn" để tạo ra một tùy chọn tiếp theo. Lặp lại quá trình này đến khi điền hết các phương án mà admin muốn cung cấp cho khách hàng.
[2] Thêm hoàng loạt tùy chọn: admin có thể tạo và điền hàng loạt tùy chọn để tiết kiệm thời gian. Adminn bấm "Thêm hàng loạt" để mở ra khung nhập hàng loạt tùy chọn, tiến hành điền mỗi phương án lựa chọn ở mỗi dòng. Sau khi hoàn tất, bấm "Thêm" thì một loạt tùy chọn được tạo ra cùng lúc.
Ví dụ: Nhà hàng cung cấp phiếu đặt chỗ cho khách. Lúc này, nhà hàng yêu cầu khách phải chọn chính xác thời gian họ mong muốn đặt để nhà hàng có kế hoạch chuẩn bị chu đáo đón tiếp khách.
Ví dụ: Trong phiếu bảo hành, cửa hàng yêu cầu khách lựa chọn thời gian mà khách dự kiến mang xe đến trung tâm bảo hành.
Chọn một ngày duy nhất: Khi đăng ký tham gia hội thảo diễn ra vào một ngày cụ thể, khách hàng sẽ chỉ có thể chọn ngày của sự kiện đó để đảm bảo thông tin được thống nhất và chính xác.
Chọn nhiều ngày: Khi đặt phòng khách sạn cho kỳ nghỉ, khách hàng có thể chọn nhiều ngày liên tiếp, ví dụ từ ngày 1 tháng 7 đến ngày 7 tháng 7, hoặc nhiều ngày không liên tiếp như các ngày cuối tuần trong tháng.
Tất cả thời gian: thường được sử dụng khi admin muốn hỏi về việc gì đó đã xảy ra ở thời gian trong quá khứ.
Kể từ ngày hiện tại: chế độ này nên được sử dụng khi admin có nhu cầu biết về việc xảy ra trong tương lai. Chế độ này khi được kích hoạt sẽ làm vô hiệu hóa các ngày trong quá khứ (từ hôm nay trở về trước), điều này giúp giảm tình trạng khách chọn nhầm ngày trong quá khứ dẫn đến thông tin không thực tế.
