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.

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

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

3. 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.

   

4. Nhấn Create.

Thêm văn bản

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

1. 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.

2. 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.
3. 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.
4. 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.

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

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

1. Chọn một phần của phần tử văn bản trong mục Content.
2. 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ũ:

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

2. 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.

3. 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.

   

4. 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.

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.

• 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:

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

Hành động mở URL

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

1. 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.

   

2. Chọn nút đó trong panel Layers và mở tab Interactions ở panel bên phải.

3. Đặ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:

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

3. 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.
4. 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.
5. 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.
6. (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.

Thêm danh sách

1. 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.

2. 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.