Custom UI

Tài liệu hướng dẫn bạn thao tác thiết lập CustomUI trên Zalo Mini App của PangoCDP.

Bước 1: Truy cập thiết lập Zalo Mini App

• Truy cập vào Module Console.

• Chọn Connection.

• Chọn Mini Apps.

• Chọn App và Setting.

Bước 2: Thiết lập các thông tin trong CustomUI

2.1 General Config

Thiết lập giao diện khi open-app, có thể chọn Enable các mục và pre-view màn hình bên phải.

No.	Trường dữ liệu	Mô tả
1	Show pop-up to ask user follow OA when user open app	Hiển thị pop-up quan tâm Zalo OA khi mở app.
2	Show trade mark "Powered by PangoCDP	Hiển thị bản quyền dưới cùng ở app.
3	Enable Redirect	Sau khi submit App sẽ được dẫn về 1 link được điền vào trong khung trống ở mục này trên App
4	Fixed Action Button	Nút button “Next Step” (Tiếp Tục) sẽ luôn hiển thị trên màn hình Form dù nội dung có ngắn hay dài trên cùng 1 trang.
5	Hide Share App	Tắt chức năng chia sẻ link App.
6	Enable Deep Link	Thay đổi nội dung thông tin khi người dùng có hành động chia sẻ link App.

2.2 Main Thiết lập giao diện thông tin trên Form

No.	Trường dữ liệu	Mô tả
1	Theme Color	Thay đổi màu sắc của Form.
2	User Profile Info	Hiển thị thông tin User trên Form.
3	Action Button	Thay đổi nội dung, màu sắc nút “Next Step” (Tiếp tục).

2.3. Steps: Thiết lập giao diện thông tin trên Form thứ N (Form nhiều trang).

No.	Trường dữ liệu	Mô tả
1	Action Button	Thay đổi nội dung, màu sắc nút “Join Now” (Submit - Xác nhận).
2	Back Button	Thay đổi nội dung, màu sắc nút “Go Back1” (Quay lại).

2.4 Thanks: Thiết lập giao diện thông tin trên Form_ThankYou (Trang cảm ơn).

No.	Trường dữ liệu	Mô tả
1	Chat with OA Button	Thay đổi nội dung, màu sắc nút “Chat with OA” (Đóng lại).
2	Auto close Mini App	Thiết lập thời gian tự động đóng app.
3	Redirect Url	Sau khi đóng App sẽ được dẫn về 1 link được điền vào trong khung trống ở mục này trên App.
4	Auto close Text	Nội dung đoạn Text trước khi đóng app.

Như vậy mình đã hoàn thành việc thiết lập thông tin tại CustomUI trên Zalo Mini App rồi.