> ## Documentation Index > Fetch the complete documentation index at: https://chatbotx.io/docs/llms.txt > Use this file to discover all available pages before exploring further. # Mini Apps và Biểu mẫu WhatsApp Flows > Hướng dẫn tạo biểu mẫu đa màn hình với Mini Apps trong ChatbotX, xuất bản lên WhatsApp Flows và chia sẻ liên kết liên kênh. Mini Apps là công cụ dựng biểu mẫu tương tác đa màn hình không cần lập trình trực thuộc nhóm công cụ của ChatbotX. Tính năng này cho phép doanh nghiệp thiết kế các biểu mẫu thu thập dữ liệu khách hàng theo chuẩn WhatsApp Flows của Meta, đồng thời tự động tạo liên kết công khai để chia sẻ trên mọi kênh nhắn tin khác nhau. ![Vị trí Mini Apps trong danh mục Tools](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_card_overview.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=848ac1c8199d79c28c6f223fd0646f72) Nhờ cơ chế này, khách hàng có thể điền biểu mẫu ngay trong khung chat WhatsApp mà không cần mở trình duyệt web bên ngoài. Đối với các kênh khác như Messenger, Instagram hay Webchat, biểu mẫu hoạt động mượt mà qua liên kết web độc lập và tự động đồng bộ câu trả lời vào hồ sơ liên hệ trên ChatbotX. ## Quản lý danh sách Mini Apps Để truy cập danh sách các biểu mẫu đã tạo, bạn vào mục **Tools** trên thanh menu chính và chọn **Mini Apps**. ![Trang danh sách quản lý Mini Apps](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_list_dashboard.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=c4c2c9083a25f96721e2e7cecd58271d) Giao diện quản lý bao gồm: * **Ô tìm kiếm:** Hỗ trợ tìm nhanh biểu mẫu theo tên. * **Nút tạo mới:** Nhấn **+ Create** để bắt đầu dựng một Mini App mới. * **Bảng thống kê:** * **Name:** Tên gọi của biểu mẫu. * **WhatsApp:** Tên tài khoản WhatsApp Business liên kết, số điện thoại và trạng thái xuất bản trên Meta. * **Submissions:** Tổng số lượt khách hàng đã gửi dữ liệu thành công. Tại mỗi dòng biểu mẫu, bạn có thể bấm vào biểu tượng dấu ba chấm để mở menu thao tác nhanh: ![Menu thao tác nhanh trên Mini App](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_row_action_menu.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=da24a25f55ea530617c068ad4ca47b5c) * **Edit:** Mở trình thiết kế để chỉnh sửa cấu trúc biểu mẫu. * **Copy JSON:** Sao chép mã cấu hình JSON chuẩn WhatsApp Flows để lưu trữ hoặc tái sử dụng. * **Copy URL:** Sao chép liên kết công khai để gửi cho khách hàng. * **Duplicate:** Nhân bản nhanh một biểu mẫu tương tự. * **Submissions:** Xem danh sách dữ liệu phản hồi đã thu thập được từ người dùng. * **Delete:** Xóa biểu mẫu khỏi hệ thống. ## Thiết kế biểu mẫu với Mini App Builder Trình dựng biểu mẫu trực quan của Mini Apps cung cấp giao diện kéo thả hai tab: **Edit** (thiết kế) và **Submissions** (dữ liệu phản hồi). ![Giao diện trình dựng Mini App Builder](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_builder_interface.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=b5f656cbce88553cfc73463e6ba2bdf1) ### Cấu trúc làm việc Trình thiết kế được chia thành 4 khu vực chính: * **Thanh điều hướng màn hình:** Đặt ở trên cùng, hỗ trợ xây dựng biểu mẫu nhiều bước. Bạn có thể thêm màn hình mới bằng nút **+ Add screen**, chuyển đổi giữa các bước hoặc sắp xếp lại thứ tự. * **Thư viện thành phần:** Nằm ở cột bên trái, phân chia thành các nhóm thành phần chuyên biệt. * **Khung xem trước di động:** Hiển thị trực quan giao diện thực tế mà khách hàng sẽ nhìn thấy trên điện thoại. * **Bảng thuộc tính:** Nằm ở cột bên phải, cho phép chỉnh sửa tiêu đề màn hình, mã định danh và các thuộc tính chi tiết của thành phần đang chọn. ### Thư viện thành phần biểu mẫu Mini Apps tích hợp sẵn 24 thành phần thuộc 6 nhóm chức năng: | Nhóm | Thành phần | Mô tả và mục đích sử dụng | | - | - | - | | **Text** | **Heading** | Tiêu đề chính của màn hình hoặc phần nội dung quan trọng | | | **Subheading** | Tiêu đề phụ phân đoạn các nhóm câu hỏi | | | **Body text** | Đoạn văn bản mô tả hoặc hướng dẫn khách hàng | | | **Caption** | Chú thích nhỏ, lưu ý hoặc ghi chú điều khoản | | | **Rich text** | Văn bản định dạng cao cấp hỗ trợ in đậm, in nghiêng và danh sách | | **Input** | **Text input** | Ô nhập văn bản ngắn một dòng như họ tên, số điện thoại hoặc mã đơn hàng | | | **Text area** | Ô nhập văn bản nhiều dòng dành cho ghi chú hoặc mô tả chi tiết | | | **Date picker** | Hộp chọn ngày tháng tiện lợi | | | **Calendar** | Lịch trực quan toàn màn hình để khách hàng chọn ngày đặt hẹn | | | **Photo upload** | Tải lên hình ảnh từ thiết bị hoặc chụp ảnh trực tiếp | | | **Document upload** | Tải lên tài liệu dạng tệp tin như PDF hoặc hợp đồng | | **Selection** | **Dropdown** | Danh sách thả xuống gọn gàng cho câu hỏi nhiều phương án | | | **Single choice** | Nút chọn một phương án duy nhất trong danh sách | | | **Multiple choice** | Hộp kiểm cho phép chọn đồng thời nhiều phương án | | | **Chips** | Thẻ gắn nhãn chọn nhanh dịch vụ hoặc danh mục quan tâm | | | **Opt-in** | Ô đánh dấu đồng ý điều khoản dịch vụ hoặc chính sách bảo mật | | **Media** | **Image** | Hiển thị hình ảnh minh họa hoặc biểu ngữ tĩnh | | | **Image carousel** | Trình chiếu danh sách nhiều hình ảnh cuộn ngang | | **Navigation** | **Link** | Chèn liên kết dẫn đến trang web bên ngoài | | | **Navigation list** | Danh sách các mục điều hướng chuyển màn hình | | | **Footer button** | Nút hành động cố định ở chân trang để chuyển bước hoặc gửi biểu mẫu | | **Containers** | **Form** | Khối gom nhóm dữ liệu và kiểm tra tính hợp lệ của các trường | | | **If / Else** | Khối điều kiện rẽ hai nhánh hiển thị dựa trên biểu thức logic | | | **Switch** | Khối điều phối đa nhánh hiển thị linh hoạt theo giá trị người dùng chọn | ### Thiết lập thuộc tính màn hình Khi chọn một màn hình trên thanh điều hướng, bảng thuộc tính bên phải cho phép bạn cấu hình: * **Title:** Tiêu đề hiển thị ở đầu màn hình của khách hàng. * **Screen ID:** Mã định danh viết hoa không dấu của màn hình, dùng trong cấu trúc JSON và mã tham chiếu dữ liệu. * **Last screen:** Bật nút này nếu đây là màn hình cuối cùng của biểu mẫu. Khi bật, biểu mẫu sẽ hoàn tất và gửi toàn bộ dữ liệu phản hồi về hệ thống. ## Tạo biểu mẫu động với Containers Nhóm thành phần **Containers** cung cấp các khối cấu trúc logic giúp biểu mẫu thích ứng linh hoạt theo từng câu trả lời của khách hàng ngay trên giao diện mà không cần tải lại trang. ### Khối Form Khối **Form** đóng vai trò là một khung chứa bắt buộc để gom nhóm các trường nhập liệu lại với nhau. Mỗi khối Form sở hữu một **Field key** định danh duy nhất (ví dụ: `form_1`, `customer_info`). Khi khách hàng gửi biểu mẫu, toàn bộ câu trả lời bên trong khối Form sẽ được đóng gói gọn gàng thành một đối tượng dữ liệu. Ngoài ra, khối Form còn là ranh giới kiểm tra dữ liệu. Khi khách hàng bấm nút tiếp tục hoặc gửi ở chân trang, hệ thống sẽ tự động đối soát tất cả các trường có yêu cầu bắt buộc điền trong Form trước khi chuyển bước. ### Khối điều kiện If / Else Khối **If / Else** dùng để hiển thị giao diện động rẽ 2 nhánh theo kết quả đúng hoặc sai của một biểu thức logic. ![Cấu hình khối If Else trong Mini App Builder](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_if_else_condition_settings.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=91dd4c524e40ec475c7b670c08a2ebda) #### Cơ chế Answer Reference Để khối điều kiện nhận diện được câu trả lời của khách hàng, mỗi trường nhập liệu trên biểu mẫu đều cung cấp một mã tham chiếu gọi là **Answer reference**. ![Sao chép Answer reference từ trường dữ liệu](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_answer_reference_opt_in.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=b10f7180c61c09a28d7f90959d693059) Bạn chỉ cần chọn trường câu hỏi, nhìn vào bảng thuộc tính bên phải và bấm nút sao chép cạnh mã `${screen.[TÊN_MÀN_HÌNH].form.[TÊN_TRƯỜNG]}`. #### Cú pháp viết điều kiện Tại ô **Condition** của khối If / Else, bạn nhập biểu thức kiểm tra theo các quy tắc sau: * **So sánh đúng sai:** `${screen.REGISTER.form.opt_in_2} == true` * **So sánh giá trị số:** `${form.age} >= 18` * **Kết hợp điều kiện:** Dùng toán tử `&&` cho điều kiện VÀ, hoặc `||` cho điều kiện HOẶC. Ví dụ: `${form.age} >= 18 && ${form.agree} == true` Khối If / Else sẽ tự động hiển thị các thành phần nằm trong nhánh **THEN** khi điều kiện thỏa mãn, hoặc hiển thị các thành phần trong nhánh **ELSE** khi điều kiện sai. ### Khối đa nhánh Switch Trong khi khối If / Else chỉ xử lý 2 nhánh đúng sai, khối **Switch** là giải pháp tối ưu khi bạn cần rẽ từ 3 nhánh trở lên dựa trên câu trả lời của khách hàng. #### Nguyên lý hoạt động của Switch Khối Switch đóng vai trò như một bộ định tuyến giao diện nội bộ. Hệ thống sẽ kiểm tra giá trị của trường được chọn và kích hoạt nhánh nội dung tương ứng: ![Sơ đồ luồng logic hoạt động của khối Switch](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_switch_logic_diagram.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=6ed8b356721454eb95987dab20d67b6a) Như sơ đồ trên minh họa: * Khách hàng chọn nhu cầu trên biểu mẫu đăng ký. * Khối Switch tiếp nhận và đối soát giá trị. * Màn hình tự động hiển thị đúng thông tin: nếu chọn Mua hàng thì hiện bảng sản phẩm, chọn Kỹ thuật thì hiện tài liệu hướng dẫn, chọn Hợp tác thì hiện form liên hệ riêng. #### Hướng dẫn thiết lập khối Switch ![Cấu hình khối Switch chuyển đổi giao diện theo gói dịch vụ](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_switch_container_settings.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=01265cb98e66f6436343b6fe663a905d) **1. Tạo trường lựa chọn nguồn** Kéo thành phần `Single choice` hoặc `Dropdown` vào màn hình. Ví dụ tạo câu hỏi `Select your plan` với các lựa chọn: `basic`, `pro`, `vip`. **2. Thêm khối Switch vào vị trí mong muốn** Kéo thành phần `Switch` từ nhóm CONTAINERS và thả vào bên dưới câu hỏi lựa chọn. **3. Gán biến vào ô Value** Tại bảng thuộc tính bên phải của Switch, dán mã tham chiếu của câu hỏi nguồn vào ô **Value** (ví dụ: `${screen.WELCOME.form.plan}` hoặc click chọn gợi ý `${form.plan}`). **4. Khai báo các nhánh trường hợp** Tại mục **Cases**, bấm **+ Add case** và nhập lần lượt các giá trị tương ứng với phương án lựa chọn: `pro`, `vip`, `basic`. **5. Kéo thành phần con vào từng nhánh** Kéo thả các khối nội dung mong muốn (văn bản mô tả quyền lợi, danh sách tính năng, các ô nhập liệu bổ sung) vào từng khung Case tương ứng trên màn hình điện thoại. ## Phân phối Mini Apps Sau khi hoàn tất thiết kế biểu mẫu, bạn có 3 phương thức linh hoạt để gửi Mini App đến liên hệ: mở trực tiếp bằng nút bấm trong kịch bản tự động, xuất bản trực tiếp lên WhatsApp hoặc phân phối qua liên kết công khai. ### Mở trực tiếp qua nút bấm trong Kịch bản tự động Bạn có thể tích hợp Mini App vào bất kỳ nút bấm tin nhắn nào bên trong Kịch bản tự động. Khi liên hệ nhấn nút trong cuộc trò chuyện, biểu mẫu Mini App sẽ được kích hoạt ngay lập tức mà không cần chuyển hướng phức tạp. **1. Mở cửa sổ cấu hình nút bấm** Trong khối tin nhắn của Kịch bản tự động, nhấn **+ Add** (hoặc chọn một nút bấm hiện có) để mở cửa sổ thiết lập **Edit Button**. Tại ô **Name**, nhập tên hiển thị cho nút bấm. **2. Chọn hành động Open Mini App** Tại danh mục các hành động bên dưới mục **When this button is pressed**, nhấn chọn tùy chọn **Open Mini App** để thiết lập tính năng mở biểu mẫu. ![Tools Mini Apps Button Action Open Mini App](https://mintcdn.com/chatbotx/j6fRNNuHiYaaqWhM/images/tools_mini_apps_button_action_open_mini_app.png?fit=max\&auto=format\&n=j6fRNNuHiYaaqWhM\&q=85\&s=c5b0b74d251857fcc56fb97d50cf891e) **3. Chọn biểu mẫu Mini App và hoàn tất** Trong khung cấu hình xuất hiện, chọn Mini App bạn muốn mở từ menu thả xuống **Mini App**. Nếu muốn thực thi thêm các tác vụ tự động khác (như gắn thẻ tag hoặc cập nhật dữ liệu) khi liên hệ nhấn nút, bạn có thể nhấn **+ Actions** tại mục **Additional steps**. Cuối cùng, nhấn **Confirm** để lưu nút bấm. ![Tools Mini Apps Button Select Mini App Modal](https://mintcdn.com/chatbotx/j6fRNNuHiYaaqWhM/images/tools_mini_apps_button_select_mini_app_modal.png?fit=max\&auto=format\&n=j6fRNNuHiYaaqWhM\&q=85\&s=70aec6da0c93706234b12b6589b8925e) ### Xuất bản trực tiếp lên WhatsApp Phương thức này cho phép biểu mẫu hiển thị dưới dạng WhatsApp Flow chuẩn ngay trong ứng dụng WhatsApp của khách hàng. ![Vị trí nút Publish to WhatsApp](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_publish_button_location.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=411dcb7360b718402c77fd1c45fca452) **1. Khởi động xuất bản** Nhấn vào nút **Publish to WhatsApp** ở góc dưới cùng bên phải của trình dựng. **2. Chọn số WhatsApp Business** Trong hộp thoại xuất hiện, chọn tài khoản WhatsApp Business đích tại ô **WhatsApp number**, sau đó nhấn **Publish**. ![Hộp thoại chọn số WhatsApp Business để xuất bản](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_publish_modal_select_number.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=ae483d2d88371c16e8cd503b10d68486) **3. Kiểm tra trạng thái trên Meta** ChatbotX sẽ tự động biên dịch biểu mẫu sang cấu trúc JSON và đồng bộ trực tiếp với Meta Cloud API. Bạn có thể kiểm tra trạng thái **Published** của Flow trong Trình quản lý WhatsApp của Meta với một mã Flow ID duy nhất. ![Trạng thái Flow đã xuất bản trên Meta WhatsApp Manager](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_meta_whatsapp_manager_flows.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=dcafe1f117a2957ca84b0bb77011fab7) Sau khi xuất bản thành công, bạn có thể gửi Mini App này vào các cuộc hội thoại tự động thông qua bước hành động **Send WhatsApp Flow** trong kịch bản. Chi tiết cách tích hợp bước gửi tin nhắn vào kịch bản, vui lòng xem hướng dẫn tại bài viết [Tạo và triển khai WhatsApp Flows](https://chatbotx.io/docs/vi/channels/whatsapp/whatsapp-flows.md). ### Phân phối liên kênh bằng Public URL Mỗi Mini App tự động sở hữu một đường dẫn công khai độc lập hiển thị ở thanh công cụ dưới cùng: ``` https://app.chatconnectx.com/mini-apps?id=... ``` Bạn có thể sao chép liên kết này và sử dụng linh hoạt: * Gắn vào nút bấm hoặc tin nhắn trong kịch bản tự động trên Messenger, Instagram, Webchat hoặc Zalo. * Chèn vào các chiến dịch gửi tin hàng loạt (Broadcasts) hoặc chuỗi tin chăm sóc tự động (Sequences). * Chia sẻ trực tiếp qua email hoặc mạng xã hội. Nhờ cơ chế định danh tự động, khi khách hàng mở liên kết từ kịch bản chat, mọi câu trả lời sẽ được tự động gắn và cập nhật trực tiếp vào hồ sơ liên hệ tương ứng trong danh bạ ChatbotX. ## Quản lý dữ liệu phản hồi Để kiểm tra danh sách kết quả khách hàng đã điền, bạn mở Mini App và chuyển sang tab **Submissions** trên thanh tiêu đề: ![Bảng theo dõi dữ liệu phản hồi Submissions](https://mintcdn.com/chatbotx/sgWKePzfrBicoK0c/images/tools_mini_apps_submissions_table.png?fit=max\&auto=format\&n=sgWKePzfrBicoK0c\&q=85\&s=a88970663acfae0dff924d6b6d108dad) Bảng báo cáo cung cấp các thông tin chi tiết: * **Submitted at:** Thời gian chính xác khách hàng gửi biểu mẫu. * **Contact:** Tên và thông tin liên hệ của khách hàng, cho phép click để mở trực tiếp hồ sơ liên hệ chi tiết. * **Các cột dữ liệu động:** Tự động hiển thị câu trả lời tương ứng với từng câu hỏi trong biểu mẫu (Họ tên, Email, Trạng thái đồng ý điều khoản, Ngày hẹn, Ghi chú yêu cầu...). ## Câu hỏi thường gặp > [accordion] Mini Apps khác gì so với tính năng WhatsApp Flows thông thường? > > WhatsApp Flows thông thường yêu cầu doanh nghiệp phải viết mã JSON hoặc tạo mẫu thủ công trên Trình quản lý Meta. Mini Apps cung cấp giao diện kéo thả trực quan không cần viết mã, đồng thời tự động tạo Public URL để sử dụng được trên mọi kênh tin nhắn khác ngoài WhatsApp. > [accordion] Dữ liệu điền trong Mini App có tự động lưu vào Custom Fields không? > > Có. Trong bảng thuộc tính của từng trường nhập liệu, bạn có thể bật tùy chọn Save to custom field và chọn trường dữ liệu tương ứng trên ChatbotX để tự động cập nhật vào hồ sơ khách hàng. > [accordion] Khách hàng sử dụng máy tính có mở được Mini Apps không? > > Có. Khi gửi qua Public URL, giao diện Mini Apps được tối ưu hóa hiển thị responsive tương thích hoàn hảo trên cả trình duyệt máy tính và điện thoại. > [accordion] Làm sao để biết một màn hình đã là màn hình kết thúc biểu mẫu? > > Trong bảng thuộc tính của màn hình đó, bạn chỉ cần gạt bật tùy chọn Last screen. Màn hình này cần có một nút hành động ở chân trang để khách hàng nhấn hoàn tất và gửi dữ liệu. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.