Giao diện chính của Flow & Paywall Builder bao gồm tất cả các công cụ cần thiết để thêm các thành phần hiển thị, chỉnh sửa thuộc tính của chúng và thay đổi logic của flow người dùng. Bài viết này giới thiệu từng khu vực trên giao diện: chức năng và vị trí của từng khu vực.

Các điều khiển dự án và phím tắt hữu ích (thanh công cụ trên cùng)

• Close : Thoát khỏi builder và quay lại trang flows.
• App name : Xác định app mà flow thuộc về.
• All flows : Mở danh sách tất cả các flow của app này.
• Flow status: Biểu tượng bên trái tên flow cho biết trạng thái flow hiện tại:
  • Draft
  • Publishing (vòng xoay tải)
  • Failed
  • hoặc Live .
• Rename the flow: Nhấp vào tên flow để đổi tên. Nhiều flow có thể trùng tên — hãy đặt tên riêng biệt cho mỗi flow mới.
• View mode toggle: Chuyển đổi giữa chế độ xem thiết kế và chế độ xem remote config.
• Undo/Redo: Nhấp vào biểu tượng mũi tên để hoàn tác hoặc làm lại các thay đổi trong flow. Bạn cũng có thể dùng ⌘Z / Ctrl+Z để hoàn tác.
• Save draft / Publish: Nhấp Save draft để lưu tiến trình mà không xuất bản (⌘ / Ctrl+S). Mở dropdown để truy cập nút Publish. Bạn chỉ có thể thêm flow vào một placement sau khi đã xuất bản.

Khu vực xem trước (trung tâm)

Khu vực trung tâm của không gian làm việc mô phỏng giao diện flow của bạn trên thiết bị di động.

• Để chọn một phần tử và chỉnh sửa thuộc tính của nó, hãy nhấp vào phần tử đó. Để chọn phần tử con bên trong một container, hãy nhấp vào container trước, rồi nhấp vào phần tử con.
• Để chỉnh sửa thuộc tính của chính màn hình, hãy nhấp ra ngoài bất kỳ phần tử nào, hoặc chọn màn hình trong bảng Screens and Layers.
• Để thay đổi thứ tự của một phần tử, kéo mục đó lên hoặc xuống trong bảng Screens and Layers.

Thanh màn hình đang hoạt động (phía trên khung xem trước thiết bị)

• Screen name — viên nhãn hiển thị tên màn hình hiện tại.
• Toggle animations — bật hoặc tắt xem trước animation của các phần tử; animation chạy liên tục cho đến khi được tắt. Chỉ hiển thị khi màn hình đang active có ít nhất một animation. Không ảnh hưởng đến việc animation có hiển thị trên thiết bị thực hay không.
• Add element — mở thư viện phần tử tại màn hình hiện tại. Tương đương với nút + ở đầu bảng Screens and Layers — hữu ích khi bảng đó đang bị thu gọn.

Điều khiển hiển thị (thanh công cụ dưới)

Các công cụ trong thanh công cụ dưới giúp bạn điều chỉnh bản xem trước.

• Device: Chọn một trong các mẫu iPhone hoặc Android có sẵn để thay đổi kích thước viewport và viền thiết bị.
• Screen orientation: Chuyển đổi giữa chế độ dọc và ngang để xem trước flow của bạn ở các hướng khác nhau.
• Color scheme: Chuyển đổi giữa chế độ sáng và tối để xem thiết kế của bạn thích nghi với các theme khác nhau như thế nào.
• Locale: Chọn một locale để xem trước flow của bạn với nội dung đã được bản địa hóa.
• View options: Bật hoặc tắt viền thiết bị và hướng dẫn vùng an toàn.

Thuộc tính màn hình và thành phần (bảng bên phải)

Cài đặt và bố cục màn hình

Khi không có phần tử nào được chọn, bảng bên phải cho phép bạn điều chỉnh các thuộc tính của màn hình flow đang hoạt động, bao gồm:

• Tương tác với giao diện hệ thống (ví dụ: thanh trạng thái có hiển thị hay không)
• Quy tắc bố cục tự động
• Nền (màu sắc, hình ảnh hoặc video)
• Kích thước padding
• Hành vi cuộn dọc

Nếu màn hình chứa một số thành phần nhất định, chẳng hạn như câu hỏi tương tác, danh sách này sẽ được mở rộng với các thuộc tính liên quan.

Thuộc tính phần tử

Khi bạn chọn một phần tử, bảng bên phải cho phép bạn thay đổi kiểu dáng và các thuộc tính tương tác của nó.

Thuộc tính thiết kế

Tab Design cho phép bạn cấu hình giao diện trực quan và bố cục của phần tử được chọn:

• Visibility: Hiển thị hoặc ẩn phần tử. Bật Conditional visibility để đặt các quy tắc xác định thời điểm phần tử sẽ hiển thị.
• Position: Chọn kiểu định vị Relative, Absolute, hoặc Fixed.
• Content (chỉ dành cho phần tử văn bản): Chỉnh sửa nội dung văn bản của phần tử, chèn biến, và quản lý bản dịch.
• Typography (chỉ dành cho phần tử văn bản): Cấu hình phông chữ, độ đậm, kích thước, màu sắc, căn chỉnh, trang trí và cắt bớt văn bản.
• Spacing: Đặt margin và padding cho phần tử.
• Effects: Thêm drop shadow, inner shadow hoặc layer blur.
• Animation: Thêm hiệu ứng động (ví dụ: Pulse) và cấu hình thời gian cùng cường độ của chúng.
• Appearance: Điều chỉnh độ mờ và góc xoay.
• Layout: Chọn hướng bố cục (dọc hoặc ngang) và xác định cách phân bổ các phần tử con.

Thuộc tính Interactions

Tab Interactions cho phép bạn xác định điều gì xảy ra khi người dùng tương tác với phần tử đã chọn. Mỗi interaction bao gồm một trigger và một hoặc nhiều actions:

• Triggers (Kích hoạt) định nghĩa khi nào điều gì đó xảy ra — ví dụ: On Tap (người dùng nhấn vào phần tử).
• Actions (Hành động) định nghĩa điều gì xảy ra — ví dụ: điều hướng đến màn hình khác hoặc thay đổi giá trị của một biến. Thêm nhiều hành động vào một trigger để thực hiện chúng theo thứ tự.

Bạn có thể thêm nhiều trigger vào cùng một phần tử để thực thi nhiều hành động liên tiếp nhau.

Bảng bên trái

Bảng bên trái thay đổi chức năng tùy theo nút nào đang được chọn. Bạn có thể chọn giữa:

• Màn hình và các lớp
• Thêm phần tử
• Sản phẩm
• Kiểu dáng
• Biến
• Bản địa hóa
• AI Editor

Màn hình và Lớp

Nút lớp mở Màn hình và Lớp (được hiển thị mặc định khi bạn mở Flow & Paywall Builder).

Phần này hiển thị từng màn hình dưới dạng cây lớp. Mỗi phần tử trên màn hình là một lớp, và các container có các phần tử con lồng bên trong. Bạn có thể kéo và thả các lớp để sắp xếp lại thứ tự.

Lựa chọn phần tử

Khi bạn nhấn vào nút plus , bảng bên trái sẽ hiển thị danh sách các phần tử UI có sẵn cùng các biến thể của chúng. Nhấn vào một mục để thêm nó vào màn hình hiện tại dưới dạng một layer mới.

Sản phẩm

Nút sản phẩm mở danh sách sản phẩm. Danh sách này hiển thị các sản phẩm được gán cho từng màn hình trong flow của bạn.

Danh sách này chỉ để xem. Để gán sản phẩm cho một màn hình, hãy thêm phần tử Product và cấu hình nó trong bảng bên phải. Để tạo hoặc chỉnh sửa sản phẩm, hãy sử dụng trang Products trong Adapty Dashboard.

Kiểu đã lưu

Nút kiểu mở Kiểu đã lưu.

Tại đây, bạn có thể chỉnh sửa và quản lý các kiểu toàn cục. Nếu nhiều phần tử trong flow của bạn dùng chung typography hoặc màu sắc, hãy lưu dữ liệu đó thành kiểu toàn cục. Sau đó bạn có thể tái sử dụng chỉ với một cú nhấp chuột.

Hiện tại, Flow & Paywall Builder hỗ trợ hai loại style toàn cục — Font styles và Color styles. Mỗi Color style có thể tùy chọn đặt giá trị riêng cho chế độ Dark mode.

Biến số

Nút dấu ngoặc mở phần Biến số.

Tại đây, bạn có thể tạo và quản lý các biến số cho flow của mình. Trong quá trình chạy, SDK sẽ thay thế các placeholder biến số bằng giá trị thực — thuộc tính người dùng, giá sản phẩm, chuỗi đã được bản địa hóa và nhiều thứ khác.

Các biến số được nhóm thành hai tab:

• Custom: Biến do bạn tạo và kiểm soát thông qua các action.
• Elements: Giá trị được xác định bởi tương tác của người dùng — chẳng hạn như câu trả lời quiz, trạng thái toggle, hay lựa chọn tab.

Các biến sản phẩm — giá, tên và các dữ liệu sản phẩm khác — không được liệt kê trong panel này. Hãy tham chiếu trực tiếp đến chúng khi chỉnh sửa một phần tử văn bản.

Dùng biến để:

• Liên kết văn bản: Hiển thị nội dung động thay vì chuỗi tĩnh.
• Kiểm soát hiển thị: Hiển thị hoặc ẩn các phần tử dựa trên điều kiện (ví dụ: ẩn nút nâng cấp đối với người dùng premium).
• Tương tác với người dùng: Truy cập dữ liệu từ các trường nhập liệu, chẳng hạn như biểu mẫu hoặc bài kiểm tra.

Bản địa hóa

Chế độ xem Localization cho phép bạn quản lý nội dung có thể dịch trong flow của mình. Nó hiển thị một bảng gồm tất cả các chuỗi văn bản và thành phần media, được tổ chức theo màn hình, với các cột cho từng ngôn ngữ. Từ chế độ xem này, bạn có thể:

• Thêm ngôn ngữ mới và chỉnh sửa chuỗi đã dịch ngay trên giao diện.
• Chọn ngôn ngữ mặc định cho flow của bạn.
• Theo dõi trạng thái dịch — mỗi hàng được đánh dấu là Done hoặc Missing.
• Lọc theo màn hình hoặc chỉ hiển thị các bản dịch còn thiếu.
• Import hoặc Export nội dung để dịch hàng loạt bên ngoài Adapty.

Trình chỉnh sửa AI

Nút mở giao diện chat AI Editor.

Mô tả thay đổi bạn muốn bằng ngôn ngữ tự nhiên, Adapty sẽ viết lại, thay đổi phong cách, hoặc sắp xếp lại màn hình bạn đang xem. Adapty sẽ cho bạn biết những gì đã thay đổi, và một cú click là có thể hoàn tác ngay.