Text, Title, Separator, Image, Link, ZMA Link, Space, Line

Hướng dẫn sử dụng các để tạo các nội dung hiển thị cơ bản

Các Elements dành cho hiển thị thông tin dạng văn bản như tiêu đề, mô tả, hình ảnh, đường dẫn web/mini app, khoảng cách giữa các element, đường kẻ, …

Nhóm các Elements hiển thị cơ bản

Text

Nhập thông tin hiển thị trên giao diện Form dạng text tại Text Display. Có tuỳ chọn CSS class name để thêm một vài format hiển thị như: căn lề, in đậm, nghiêng, tô màu,...

Title

Nhập thông tin hiển thị dạng tiêu đề tại Text Display, dùng cấu hình Font Size để tuỳ chỉnh kích thước hiển thị theo dạng Small/Medium/Large. Hỗ trợ thêm CSS class name để thêm format.

Separator

Đường kẻ ngang trên giao diện Form, cho phép hiển thị thêm text ở giữa khi nhập Text Display. Hỗ trợ CSS class name và cấu hình giao diện:

  • Ấn/hiện dòng kẻ ngang giao diện

  • Line Type: Solid (nét liền), Dashed (nét đứt), Dotted (nét chấm)

  • Line Weight: Light - độ dày

Image

Hiển thị hình ảnh trên giao diện Form, thiết lập theo:

  • Text Display: để hiển thị Caption của hình ảnh

  • Display Mode: cấu hình hiển thị của hình ảnh

    • Normal: nằm gọn trong giao diện

    • Cover: hiển thị hết khung hình ngang của giao diện

  • CSS class name: thêm định dạng

  • Images: + Add để thêm ảnh hiển thị, cho phép nhiều hình ảnh

    • Text: nhập tên hình ảnh

    • URL: nhập liên kết của hình ảnh

Kích thước hình ảnh không được vượt quá 350Kb sẽ ảnh hưởng đến tốc độ xử lý của ZMA trong quá trình tải, lưu trữ và xử lý dữ liệu trên hệ thống.

Thêm liên kết mở các địa chỉ khác, bao gồm:

  • Label: giải thích ý nghĩa của liên kết, hướng dẫn bấm liên kết

  • CSS class name: để thêm định dạng

  • Web Link : thêm liên kết dẫn đến các địa chỉ người Mini App, cho phép thêm nhiều liên kết trong tuỳ chọn thêm Links

    • Text: điền từ khoá hiển thị cho liên kết

    • URL: địa chỉ liên kết

Open ZMA

Cho phép mở liên kết đến các Zalo Mini App khác, bao gồm:

  • Label: để chọn nội dung hướng dẫn người dùng ấn vào CTA mở ZMA

  • Open Type để thực hiện mở ZMA theo 02 cách:

    • Open new app: chỉ thực hiện mở ZMA mới theo cấu trúc

      • Nếu App Id khác nhau: thực hiện mở app mới trên app hiện tại

      • Nếu trùng App Id: mở app bằng cách thay thế CDP App Id của app hiện tại. Đồng nghĩa tắt app mới mở sẽ không thấy app cũ nữa

    • Open new app and close current app: tắt app hiện tại và mở app mới

  • App Id: thông tin của ZMA muốn mở

  • CDP App Id: thông tin của ZMA muốn mở

  • Org Id: mặc định theo Form Builder đang được tạo trên Organization nào

  • Brand: nhập đúng Brand Code

  • ACT Campaign Code: nhập Campaign Id của các Mini App (Wheels, 1Touch, Sell, Reward)

  • Extend Param: hỗ trợ đọc param

  • CSS class name để thêm format

  • Toggle "Use the pango_UTM values on the form to open the ZMA": để tự động thêm UTM của app hiện tại cho link hoặc mini app được mở ra.

Ví dụ mở ZMA Pango Form: https://zalo.me/app/link/zapps/4446199182319379222/?cdpaid=d4898fff30fb9b0eaa7b055688b207c5-1712196367032&orgId=bdf66a48c3ebfaec10d2feb3492099ea&brandCode=PangoCDP sẽ có

  • App Id: 4446199182319379222 (Mini App Pango Form)

  • CDP App Id: d4898fff30fb9b0eaa7b055688b207c5-1712196367032

  • Org Id: bdf66a48c3ebfaec10d2feb3492099ea

  • Brand: PangoCDP

  • ACT Campaign Code: bỏ trống

Riêng đối với Version 2, người vận hành có thể cấu hình thêm:

  • App Image: Hình đại diện của app

  • Button Text: Nội dung của button CTA

Space

Thêm khoảng cách vào giao diện Form Builder bằng cách nhập số Height (được tính bằng Pixel)

Line

Thêm dòng kẻ ngăn cách nội dung trên Form Builder, bao gồm:

  • Size (pixel): nhập số tuỳ chỉnh độ dày của dòng kẻ

  • Style: định dạng giao diện đường kẻ, bao gồm: Solid (nét liền), Dashed (nét đứt), Dotted (nét chấm)

  • Color: định dạng màu cho đường kẻ

Last updated

Was this helpful?