Cài đặt

Có hai loại cài đặt:

• Cài đặt thiết kế trang

• Cài đặt cầu hình

1. Cài đặt thiết kế trang

1.1. Màu sắc chủ đạo

Màu sắc chủ đạo là định dạng màu sắc của nền và chữ của khung Action

• Lấy theo màu chủ đạo từ Mini App: Lấy màu sắc mặc định của Mini App, nghĩa là nền của khung Action tự động sử dụng màu sắc chủ đạo của Mini App, màu chữ của khung Action là màu đen, điều này đảm bảo sự rõ ràng và dễ đọc, tạo ra một giao diện nhất quán và hài hòa với toàn bộ ứng dụng.

• Tùy chỉnh màu sắc: Người dùng có thể tự do chọn bất kỳ màu sắc nào để áp dụng cho màu nền và màu chữ của khung Action. Tùy chọn này mang lại sự linh hoạt, phù hợp với sở thích cá nhân hoặc yêu cầu cụ thể của từng chiến dịch, sự kiện.

+ [1] Màu chủ đạo: Màu nền của khung Action

+ [2] Text trên màu chủ đạo: Màu của chữ tại khung Action và tiêu đề của trang

+ [3] Icon trên màu chủ đạo: Màu của Icon điều hướng được cài đặt tại mục Header

1.2. Màu nền

Màu nền là định dạng màu sắc của nền và chữ tại phần body của mẫu DynamicAction

• Lấy theo màu chủ đạo từ Mini App: Lấy màu sắc mặc định của Mini App, màu sắc này được cài đặt tại Mini App.

• Tùy chỉnh màu sắc

+ Màu nền: Màu nền của DynamicAction

+ Text trên màu nền: Màu text của các thành phần được tạo ngay trên nền DynamicAction (không nằm trong block)

1.3. Vị trí body

Vị trí của body so với trang.

+ Trên cùng

+ Giữa trên

+ Giữa dưới

+ Dưới cùng

1.4. Action

Action là một hành động cụ thể mà người dùng có thể thực hiện sau khi đọc hoặc điền thông tin trên mỗi trang của biểu mẫu. Mỗi trang sẽ có một action, các action này đều độc lập và khác nhau.

Admin có thể linh hoạt trong việc quyết định có thêm các action này hay không, tùy thuộc vào mục tiêu và thiết kế của biểu mẫu. Việc bổ sung các action một cách hợp lý không chỉ nâng cao trải nghiệm người dùng, tạo ra một luồng trải nghiệm xuyên suốt từ trang đầu tiên đến trang cuối cùng của mẫu DynamicAction, mà còn thực hiện các thao tác Marketing bằng cách tạo liên kết đến các trang Mini App để thu hút sự chú ý của người dùng

• Không thêm Action

Admin có thể quyết định không thêm action khi mục tiêu chính là cung cấp thông tin mà không cần nhận phản hồi từ người dùng hay khuyến khích họ thực hiện bất kỳ hành động nào sau đó.

Chẳng hạn, admin có thể sử dụng DynamicAction để tạo hướng dẫn sử dụng sản phẩm và in mã QR của hướng dẫn này lên bao bì sản phẩm. Người dùng chỉ cần dùng điện thoại quét mã để xem thông tin về cách sử dụng sản phẩm, và admin không cần thu thập thông tin người dùng trong trường hợp này. Nếu DynamicAction hướng dẫn sử dụng chỉ gồm một trang, admin cũng không cần tạo Action Liên kết để dẫn đến trang tiếp theo hoặc trang Miniapp khi không có hoạt động marketing đi kèm. Điều này giúp thông tin được truyền đạt một cách đơn giản và hiệu quả, tập trung vào việc cung cấp giá trị thiết thực cho người dùng.

• Thêm Action

Tùy theo kịch bản DynamicAction và nhu cầu Marketing mà admin thêm Action. Admin có thể cấu hình tối đa 3 Action, 3 Action này độc lập và khác nhau. Tại màn hình điện thoại, người dùng có thể lựa chọn bấm vào 1 trong số các Action được thiết lập và được dẫn đến trang liên kết được cấu hình.

Có 5 loại action: Submit form, liên kết, thoát Miniapp, Hủy, Thu nhỏ

a, Submit form

Action Submit form cho phép doanh nghiệp lấy thông tin người dùng đã điền vào thành phần (Component) lên hệ thống. Khi người dùng bấm vào Action này, dữ liệu này được gửi sẽ được lưu trữ tại Data Hub. b, Liên kết

Action Liên kết để điều hướng người dùng khi người dùng bấm vào. Tùy theo liên kết đến được cấu hình mà người dùng sẽ được dẫn tới trang DynamicAction hoặc trang Mini App tương ứng.

+ Trang DynamicAction: Dẫn tới các trang khác của cùng DynamicAction.

+ Trang Mini App: Dẫn tới các trang trong Mini App. Hiện tại, các trang Mini App có thể liên kết đến: Trang chủ, Tin tức, Sản phẩm, Ưu đãi, Ưu đãi của tôi, Đặt lịch, Hạng thành viên, Gamification.

c, Thoát Mini App

Action Thoát Mini App cho phép khách hàng thoát ra khỏi màn hình của Mini App khi bấm vào.

d, Hủy

DynamicAction sẽ đóng và tự động trở về trang chủ của Mini App.

e, Thu nhỏ

DynamicAction sẽ được thu nhỏ, hành động thu nhỏ này được thực hiện tương tự như bong bóng chat của Zalo hay Messenger. Người dùng có thể bấm vào Action để thu nhỏ DynamicAction, khi muốn trở lại, người dùng bấm bấm vào bong bóng chat để mở lại DynamicAction.

Bảng so sánh thông số của từng thành phần

Cài đặt thông số

• Style

Phần Style cho phép lựa chọn hình thức hiển thị của nút hành động. Có bốn tùy chọn chính:

+ Màu: Nút sẽ có màu nền và màu chữ theo thiết kế tùy chọn

+ Viền: Nút sẽ có viền xung quanh, nền màu trắng. Màu sắc của chữ và viền lúc này sẽ cùng màu và được lấy theo màu chủ đạo của nút Submit đã được thiết đặt từ trước

+ Văn bản: Nút sẽ chỉ hiển thị văn bản mà không có nền hoặc viền. Màu sắc của văn bản sẽ được lấy theo màu chủ đạo của nút Submit đã được thiết đặt từ trước

+ Icon: Nút sẽ hiển thị dưới dạng biểu tượng. Admin có thể chọn biểu tượng từ thư viện Icon.

• Nội dung

Phần nội dung cho phép admin nhập nội dung văn bản hiển thị trên nút hành động.

• Thông báo khi thực hiện hành động

Dòng thông báo này sẽ được hiện lên khi người dùng bấm vào Action

• Thêm liên kết

Thêm liên kết cho phép admin cấu hình liên kết mà người dùng sẽ được chuyển đến sau khi họ submit form. Liên kết đến này tương tự như Action Liên kết. Admin có thể cho phép người dùng liên kết đến trang của DynamicAction hoặc trang của Mini App.

• Thêm 2, 3 Action

Admin có thể cấu hình kết hợp 2, 3 Action trong mỗi trang của DynamicAction. Các hành động này sẽ hoạt động một cách độc lập, đảm bảo rằng mỗi thao tác không bị ảnh hưởng bởi các hành động khác. Mỗi lần thao tác, người dùng được phép bấm chọn một Action.

• Submit: Người dùng có thể chọn "Submit" để gửi thông tin họ đã nhập, đảm bảo rằng dữ liệu được gửi đến doanh nghiệp.

• Hủy: Nếu người dùng quyết định không muốn điền form hoặc không muốn gửi thông tin, họ có thể chọn "Hủy" để dừng lại và thoát khỏi quá trình mà không có bất kỳ dữ liệu nào được gửi đi.

Sự kết hợp này mang lại tính linh hoạt và dễ dàng cho người dùng trong việc quản lý thông tin của họ.

• Ví dụ về việc nhập mật khẩu wifi Khi khách hàng đang trong quá trình điền form và cần nhập mật khẩu wifi, họ có thể sử dụng hành động "Thu nhỏ" để tạm thời thu gọn DynamicAction lại, cho phép họ dễ dàng nhập mật khẩu wifi vào điện thoại mà không bị gián đoạn.

• Tiếp tục hoàn thành và gửi form Sau khi đã nhập mật khẩu wifi, khách hàng có thể trở lại DynamicAction, tiếp tục hoàn thiện các thông tin còn lại trên form. Cuối cùng, họ chỉ cần chọn hành động "Submit" để gửi thông tin đã điền, đảm bảo quá trình hoàn tất một cách suôn sẻ và hiệu quả.

1.5. Vị trí hiển thị

Vị trí hiển thị xác định vị trí cụ thể của Action trên trang,

+ Cố định ở dưới: Khi người dùng cuộn body, thanh Action luôn được cố định ở góc cuối màn hình

+Trong body: Thanh Action nằm trong body. Khi người dùng cuộn body, thanh Action sẽ cuộn theo. Đến khi cuộn đến cuối body thì thanh Action mới được hiển thị.

2. Cài đặt cấu hình

2.1. Trạng thái trang

Có ba loại trạng thái: Nháp, hoạt động và ngừng hoạt động

• [1] Nháp

  Trạng thái nháp biểu thị DynamicAction đang trong quá trình chuẩn bị, chưa hoàn thiện. Ddmin có thể được chỉnh sửa, bổ sung và hoàn thiện việc thiết lập thành phần và cài đặt trước khi chuyển sang trạng thái hoạt động

• [2] Hoạt động

Trạng thái hoạt động biểu thị DynamicAction đã hoàn thành bước thiết kế và đang được triển khai. Lúc này người dùng có thể tương tác với DynamicAction.

• [3] Ngừng hoạt động

Khách hàng không thể quét QR để tương tác với DynamicAction khi đang ở trạng thái ngừng hoạt động. Để DynamicActionn có hiệu lực trở lại, admin chuyển trạng thái từ "ngừng hoạt động" sang "hoạt động"

2.2. Dữ liệu

Là nơi chứa dữ liệu được thu thập từ DynamicAction, trang và thành phần

+ Dữ liệu từ một DynamicAction sẽ được lưu trữ trong một Data Hub. Admin cấu hình liên kết Data Hub tại trang cài đặt của DynamicAction

+ Dữ liệu từ một trang sẽ được lưu trữ trong một bảng (Một Data Hub gồm nhiều bảng). Admin cấu hình liên kết bảng tại tab Cài đặt của từng trang

+ Dữ liệu từ một thành phần (component) sẽ được lưu trữ trong một cột (Một bảng gồm nhiêu cột). Admin cấu hình liên kết bảng tại mục cài đặt thông số của mỗi thành phần

2.3. Trang cài đặt

• Thông tin

+ Tên: Tên của DynamicAction. Tên này đã được thiết đặt khi tạo mới DynamicAction, admin có thể thay đổi tên đã đặt tại đây

+ Mô tả: Nhập mô tả chi tiết về DynamicAction này để người dùng hiểu rõ hơn về mục đích và chức năng.

+ Thời gian bắt đầu: Thời gian bắt đầu có hiệu lực của DynamicAction. Admin có thể thiết đặt lại thời gian này hoặc để mặc định

+ Thời gian kết thúc: Thời gian kết thúc DynamicAction. Nếu không muốn DynamicAction kết thúc, admin có thể chọn "Không bao giờ kết thúc".

• Yêu cầu quyền

Admin có thể lựa chọn thiết lập yêu cầu quyền hoặc không tùy vào kịch bản DynamicAction. Khi bật tính năng yêu cầu quyền, người dùng bắt buộc phải cho phép Mini App lấy thông tin phù hợp vối quyền để truy cập vào DynamicAction.

+ Xác thực số điện thoại: Yêu cầu người dùng cung cấp số điện thoại

+ Quan tâm OA: Yêu cầu người dùng quan tâm OA trước khi truy cập DynamicAction

+ Bật thông báo: Yêu cầu người dùng bật thông báo trước khi truy cập DynamicAction

Khi admin thiết lập các thành phần xác thực người dùng (Họ và tên, Số điện thoại), nên kết hợp với việc thiết đặt yêu cầu quyền để đảm bảo thành phần xác thực người dùng được phát huy đúng chức năng ràng buộc người dùng cung cấp thông tin thực

• Data Hub

Nơi chứa dữ liệu mà người dùng cung cấp cho DynamicAction

Khi dữ liệu được thu thập từ DynamicAction, sẽ đổ về Data Hub, vì vậy một Data Hub phải được tạo để chứa dữ liệu. Có thể tạo mới Data Hub để chứa dữ liệu từ DynamicAction hoặc liên kết DynamicAction với Data Hub sẵn có.

+ [1] Tạo mới Data Hub: Bấm vào "Tạo mới dữ liệu", một Data Hub sẽ tự động tạo và lấy tên cùng tên của DynamicAction

+ [2] Liên kết: Bấm vào "Liên kết" và lựa chọn Data Hub muốn thêm dữ liệu từ DynamicAction.

Khi dữ liệu được thu thập từ mỗi trang của DynamicAction, sẽ đổ về mỗi bảng tương ứng, vì vậy mỗi trang phải được liên kết bảng để chứa dữ liệu. Tùy theo lựa chọn tạo mới hay liên kết Data Hub ở bước 1 mà lựa chọn cách tạo Bảng tương ứng

+ Nếu ở bước 1, admin tạo mới Data Hub thì ở bước 2, admin phải lựa chọn tạo mới bảng tại nút "Tạo bảng dữ liệu"

+ Nếu ở bước 1, admin liên kết với Data Hub có sẵn thì ở bước 2, admin có thể lựa chọn tạo mới bảng hoặc liên kết với bảng có sẵn của Data Hub.

Khi dữ liệu được thu thập từ mỗi thành phần (Component) của DynamicAction, sẽ đổ về mỗi cột tương ứng của từng bảng, vì vậy mỗi thành phần phải được liên kết cột để chứa dữ liệu. Có hai trường hợp thiết đặt cột để chứa thông tin từ thành phần

+ Hệ thống tự động liên kết cột

Khi admin hoàn thành việc tạo mới Data Hub để chứa dữ liệu từ DynamicAction và tạo mới Bảng để chứa dữ liệu từ từng trang của DynamicAction, thì mỗi thành phần sẽ được tạo cột và tự động liên kết với cột tương ứng.

Admin có thể sử dụng mặc định cột mà hệ thống tự động tạo ra hoặc lựa chọn liên kết với cột khác

+ Admin tùy chỉnh liên kết cột

Trong trường hợp quản trị viên quyết định tự cấu hình các cột cho thành phần, họ có thể chọn liên kết với các cột đã tồn tại sẵn trong Bảng của Data Hub hoặc tạo mới các cột dành riêng cho thành phần đó. Điều này cho phép quản trị viên linh hoạt tùy chỉnh cấu trúc dữ liệu, đảm bảo sự phù hợp và hiệu quả trong việc quản lý và phân tích thông tin.