Thêm và định dạng văn bản, danh sách trong Flow Builder

Thêm tiêu đề, đoạn văn hoặc danh sách chỉ với một cú nhấp, định dạng theo phong cách thương hiệu của bạn, và dùng biến động để cá nhân hóa nội dung cho từng người dùng.

Thiết lập kiểu chữ

Bảng Styles bao gồm các kiểu chữ được cấu hình sẵn: H1, H2, H3, Button Label, Body, Caption và Small Label. Nhấp vào bất kỳ kiểu nào để chỉnh sửa bộ phông chữ, độ đậm, kích thước, căn chỉnh, trang trí và các thuộc tính khác.

Khi bạn thêm một phần tử văn bản, bạn có thể chọn một trong các kiểu đã thiết lập ở đây.

Các thay đổi đối với một kiểu sẽ áp dụng cho tất cả các phần tử văn bản đang sử dụng kiểu đó, trên tất cả các màn hình.

Để tạo kiểu mới:

Nhấp vào để mở bảng Styles.
Trên tab Text, nhấp vào Create style.

Nhập tên và cấu hình typography — font family, weight, alignment, và các thuộc tính khác.

Custom fonts hoạt động khác với font tích hợp sẵn. Đọc hướng dẫn — một số điều khiển không áp dụng được, và mỗi biến thể font cần có file riêng.
Nhấn Create.

Thêm văn bản

Để thêm một phần tử văn bản:

Nhấn + ở góc trên bên trái. Chọn Text. Chọn một trong các kiểu văn bản đã được cấu hình sẵn hoặc do bạn thiết lập.

Nhấn vào phần tử mới và chỉnh sửa nội dung trong mục Content ở panel Design bên phải.
Nếu cần, điều chỉnh các thuộc tính typography trong panel Design. Hoặc, chọn văn bản trong phần xem trước để mở tooltip chỉnh sửa style nhanh.
Tùy chọn, trong panel Design và Interaction, bạn cũng có thể áp dụng các cấu hình khác có sẵn cho các component trong flow. Xem thêm tại Styles and appearance.

Nếu bạn cần dùng cùng một phần tử văn bản trên nhiều màn hình, hãy sao chép và dán: chọn phần tử, nhấn Ctrl+C (hoặc ⌘+C trên Mac), chuyển sang màn hình khác, rồi nhấn Ctrl+V (hoặc ⌘+V trên Mac) để dán.

Thay đổi kiểu dáng cho một phần văn bản

Định dạng Bold và Italic không có tác dụng đối với văn bản sử dụng phông chữ tùy chỉnh. Để áp dụng các biến thể của phông chữ tùy chỉnh, hãy tải lên từng biến thể dưới dạng file phông chữ riêng và chọn nó từ danh sách Font family.

Để chỉ thay đổi kiểu dáng cho một số phần của phần tử văn bản:

Chọn một phần của phần tử văn bản trong mục Content.
Trong tooltip xuất hiện, thay đổi màu văn bản, áp dụng định dạng in đậm, gạch chân, in nghiêng, gạch ngang, hoặc thêm URL.

Bản xem trước sẽ cập nhật ngay lập tức.

Thêm giá cũ

Phần tử Old Price hiển thị mức giá “trước đây” cao hơn bên cạnh giá thực của sản phẩm, giúp người dùng thấy ngay mức giảm giá. Nó hiển thị giá sản phẩm nhân với một hệ số bạn chọn và tự động gạch ngang qua.

Bạn không cần chỉnh sửa nội dung của phần tử này. Giá trị được tính từ giá cửa hàng của sản phẩm tại thời điểm chạy, nên đơn vị tiền tệ luôn khớp với giá thực.

Để thêm giá cũ:

Nhấn + ở góc trên bên trái. Chọn Text, rồi chọn Old Price.

Element menu with the Text category expanded, showing the Old Price item

Trong bảng Layers, kéo phần tử vào bên trong một thẻ sản phẩm. Phần tử này cũng hoạt động bên trong các thẻ sản phẩm đã được lưu dưới dạng component tái sử dụng.

Phần tử Old Price phải nằm bên trong một thẻ sản phẩm — giá sẽ được lấy từ sản phẩm của thẻ đó. Nếu đặt bên ngoài thẻ sản phẩm, builder sẽ hiển thị placeholder “Old price” thay vì giá thực.
Trong bảng Design, ở mục Price, hãy đặt Multiplier. Adapty sẽ nhân giá sản phẩm với giá trị này. Ví dụ: với hệ số nhân mặc định là 2, sản phẩm có giá $12.99 sẽ hiển thị mức giá gạch ngang là $25.98.
Nếu cần, hãy điều chỉnh thuộc tính kiểu chữ. Phần tử này hỗ trợ các tùy chọn định dạng giống như văn bản thông thường.

Thẻ sản phẩm trên canvas hiển thị giá cũ bị gạch ngang bên cạnh giá thực

Để gạch ngang giá thực của một sản phẩm khác — ví dụ: giá gói tháng hiển thị trên thẻ gói năm — hãy xây dựng hàng giá từ các thành phần văn bản và biến thay thế. Xem Hiển thị giá gạch ngang kèm huy hiệu giảm giá.

Thuộc tính typography

Mọi phần tử văn bản và kiểu chữ đều dùng chung một bộ điều chỉnh typography:

Font family: Chọn kiểu chữ — font tích hợp sẵn hoặc font tùy chỉnh.

Các thiết bị khác nhau có thể có font khác nhau, hoặc hiển thị cùng một font theo cách khác nhau. Nếu font không có trên thiết bị, hệ thống sẽ dùng font mặc định (SF Pro / Roboto). Để hiển thị nhất quán cùng một font trên tất cả thiết bị, hãy tải lên font tùy chỉnh.
Weight: Đặt độ đậm của font.

Các điều khiển Weight, Bold, và Italic không áp dụng cho phông chữ tùy chỉnh, dù được đặt trong bảng Styles, phần typography của bảng Design, thanh công cụ inline, hay tooltip định dạng text-part. Để áp dụng các biến thể của phông chữ tùy chỉnh, hãy tải lên từng biến thể dưới dạng file phông chữ riêng và chọn biến thể phù hợp từ danh sách Font.

Size: Đặt cỡ chữ theo pixel.
Color: Đặt màu chữ.
Line height: Đặt khoảng cách giữa các dòng, hoặc để Auto.
Alignment: Đặt căn chỉnh theo chiều ngang (trái, giữa, phải) và chiều dọc (trên, giữa, dưới).
Decoration: Áp dụng gạch chân hoặc gạch ngang.
Truncate: Giới hạn số dòng hiển thị. Nội dung vượt quá giới hạn sẽ bị cắt bớt. Hữu ích khi độ dài nội dung thay đổi do biến động hoặc bản địa hóa.

Thêm liên kết

Flow hỗ trợ hai cách biến văn bản thành liên kết có thể nhấn. Hãy chọn dựa trên vai trò của văn bản:

Liên kết inline — dành cho URL nằm trong đoạn văn bản, chẳng hạn như tham chiếu “Tìm hiểu thêm” được nhúng trong một đoạn. Luôn mở trong trình duyệt trong ứng dụng.
Hành động Open URL — dành cho các mục nhấn đ��c lập, chẳng hạn như nút Điều khoản dịch vụ. Có thể mở trong trình duyệt trong ứng dụng hoặc trình duyệt bên ngoài.

Liên kết nội tuyến

Để biến một phần văn bản thành liên kết:

Chọn văn bản trong phần Content.
Trong thanh công cụ định dạng, nhấp vào biểu tượng liên kết.
Dán URL đích vào cửa sổ bật lên.

Thanh công cụ định dạng với nút liên kết được tô sáng

Hành động mở URL

Bài viết chính: Hành động

Để biến toàn bộ một nút thành một liên kết:

Thêm một Button — hoặc dùng preset Links, một hàng có sẵn với các nút Restore / Terms of Service / Privacy Policy.
Chọn nút đó trong panel Layers và mở tab Interactions ở panel bên phải.

Đặt đích đến cho hành động Open URL.

Một hành động Open URL trống sẽ chặn việc xem trước và xuất bản.

Thêm văn bản có điều kiện

Văn bản có điều kiện thay đổi nội dung hiển thị của một phần tử văn bản dựa trên một điều kiện. Ví dụ: một tiêu đề có thể hiển thị một thông điệp khi người dùng chọn gói hàng năm và một thông điệp khác cho gói hàng tháng. Văn bản có điều kiện hoạt động giống như độ hiển thị có điều kiện, nhưng thay vì ẩn/hiện phần tử, nó thay thế nội dung bên trong.

Để thiết lập văn bản có điều kiện:

Chọn một phần tử văn bản trên canvas.
Trong bảng Design, ở mục Content, chọn Conditional.

Nội dung được đặt thành Conditional trong bảng Design

Xây dựng điều kiện if. Chọn một thuộc tính từ tab Custom, Products, hoặc Elements, đặt toán tử và nhập giá trị cần khớp. Để biết chi tiết về các loại thuộc tính, xem Hiển thị có điều kiện.
Trong phần then, nhập văn bản hiển thị khi điều kiện đúng. Định dạng văn bản phong phú hoạt động tương tự như văn bản thông thường. Để chèn biến, nhấp vào { } Add variable.
Trong phần else, nhập văn bản dự phòng hiển thị khi không có điều kiện nào khớp.
(Tùy chọn) Nhấp vào + Add else/if để thêm điều kiện mới, mỗi điều kiện có văn bản riêng.

Để chỉnh sửa văn bản có điều kiện cho ngôn ngữ khác, hãy chuyển ngôn ngữ đang hoạt động ở cuối trình soạn thảo. Thêm ngôn ngữ trong bảng Localizations trước — xem Thêm ngôn ngữ trong Flow Builder.

Thiết lập văn bản có điều kiện với các nhánh if, then và else

Thêm danh sách

Các phần tử danh sách là vùng chứa được tạo thành từ các thành phần mục riêng lẻ. Đối với danh sách dấu chấm đầu dòng hoặc danh sách đánh số đơn giản trong văn bản thông thường, hãy sử dụng phần tử văn bản và áp dụng định dạng mong muốn qua bảng Design.

Nhấn + ở góc trên bên trái. Chọn List và chọn một trong các mẫu danh sách.
Vào bảng Design ở bên phải để chỉnh sửa các mục trong danh sách hoặc tải lên hình ảnh để làm biểu tượng đánh dấu mục.