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 và Android có sẵn để thay đổi kích thước viewport và đường 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.
• Light theme và Dark theme: Xem trước flow ở từng giao diện. Các nút này chỉ xuất hiện nếu flow đã được thêm giao diện tối.
• Locale: Chọn ngôn ngữ để xem trước flow 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 điều khiển bên trái

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

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

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. Nút 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. Bạn có thể dùng giao diện này để quản lý sản phẩm và ưu đãi của flow.

Styles

Nút Styles mở bảng Styles.

Tạo một style để lưu các cài đặt văn bản hoặc màu nền (như màu sắc, gradient, hoặc hình ảnh nền), và sử dụng lại nó trên các thành phần ở nhiều màn hình. Bảng này có tab Text cho style văn bản và tab Colors cho style màu sắc.

Biến

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

Tại đây, bạn có thể tạo và quản lý các biến cho flow của mình. Khi chạy, SDK sẽ thay thế các placeholder biến bằng dữ liệu thực tế: giá trị mà ứng dụng của bạn truyền vào cho các thẻ tùy chỉnh, giá sản phẩm, chuỗi đã bản địa hóa, và nhiều hơn nữa.

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

• Custom: Biến do bạn tạo, gồm hai loại:
  • Regular variables: Giá trị thay đổi thông qua các action Set variable trong flow.
  • Custom tags: Giá trị đến từ ứng dụng của bạn, thông qua Adapty SDK.
• 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, hoặc lựa chọn tab.

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 bảng này. Hãy tham chiếu trực tiếp khi chỉnh sửa một phần tử văn bản.

Sử 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.
• Hiển thị dữ liệu từ ứng dụng của bạn: Hiển thị một giá trị từ ứng dụng, chẳng hạn như số dư xu của người chơi, bằng custom tag.
• Kiểm soát khả năng hiển thị: Ẩn hoặc hiện các phần tử dựa trên điều kiện (ví dụ: chỉ hiển thị timeline dùng thử miễn phí cho những người dùng đủ điều kiện nhận dùng thử miễn phí).
• 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 của người dùng, chẳng hạn như biểu mẫu hoặc câu đố.

Bản địa hóa

Bảng Localizations liệt kê toàn bộ nội dung có thể bản địa hóa của flow trong một bảng duy nhất, được sắp xếp theo màn hình, với một cột cho mỗi ngôn ngữ:

• Văn bản, bao gồm từng nhánh của văn bản có điều kiện và placeholder của các trường nhập liệu.
• Tiêu đề và nội dung của mỗi hành động Show alert.
• Đích đến của mỗi hành động Open URL.
• Hình ảnh và video, với một file cho mỗi ngôn ngữ.

Từ bảng này, bạn có thể:

• Thêm ngôn ngữ mới và chỉnh sửa chuỗi đã dịch trực tiếp.
• Dịch bằng AI.
• 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, Missing, hoặc Default (đối với action URL).
• Lọc theo màn hình hoặc trạng thái, hoặc tìm kiếm theo từ khóa.
• Import hoặc Export nội dung, cho toàn bộ flow hoặc một ngôn ngữ, để dịch hàng loạt bên ngoài Adapty.

AI Editor

Nút sparkle mở cửa sổ chat AI Editor.

Mô tả thay đổi bằng ngôn ngữ thông thường, và Adapty sẽ viết lại, thay đổi kiểu dáng, 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ú nhấp là có thể hoàn tác.

Để khớp với một thiết kế có sẵn, hãy đính kèm ảnh chụp màn hình thay vì mô tả bằng lời.