zadn.vn, as data

# Onboarding* **Tăng sự hiểu biết**: Onboarding cung cấp cho người dùng thông tin chi tiết về tính năng, chức năng và lợi ích của ứng dụng. Nó giúp người dùng có trải nghiệm tốt hơn và nhanh chóng đạt được mục tiêu của mình.* **Tạo trải nghiệm tích cực**: Nó giúp người dùng cảm thấy hài lòng và tự tin khi sử dụng ứng dụng, tạo ra một ấn tượng tốt về sản phẩm và tăng khả năng tiếp tục sử dụng ứng dụng trong tương lai.## 3. Phân loại và cách dùngHiện tại Zalo Mini App đang cung cấp 2 template như sau:Template multi-step thường dùng để giới thiệu tính năng, dịch vụ nổi bậtcủa Mini App với user bằng nhiều bước khác nhau* Ưu điểm: Mini App có nhiều không gian để hiển thị thông tinthể bỏ qua những tính năng, dịch vụ tại các bước phía sau**3.2 Single screen onboarding**Template single screen thường dùng để giới thiệu về các tính năng, dịch vụ nổi bật của Mini App với user bằng screen duy nhất* Ưu điểm: Mini App có thể hiển thị đồng thời được nhiều tính năng, dịch vụ nổi bật* Nhược điểm: Mini App ít không gian để hiện thị chi tiết cho từng tính năng, dịch vụ## 4. Cấu tạo componentTemplate được xây dựng từ component bottom-sheet của Mini App Platform. Xem thêm tại đây**4.2 Single screen onboarding**## 5. Design và content### 5.1 Design​Nhằm giúp người dùng có một trải nghiệm tốt nhất, thiết kế của onboarding flow nên:* Sử dụng hình ảnh có nền trắng & trong suốt.* Hình vẽ phải được hiển thị trọn vẹn và không để viền cắt ảnh* Style vẽ đơn giản không có quá nhiều chi tiết và hạn chế nội dung trong ảnh.* Màu sắc chính của hình ảnh, button nên sử dụng màu primary của Mini App### 5.2 Content​Để tối ưu hoá nội dung, phù hợp với hành vi Scan and Skim của đa số người dùng, nội dung Onboarding có thể chọn 1 trong 2 dạng chính sau:* Nội dung tiêu đề, mô tả ngắn gọn súc tích, trọng tâm## 6. Cấu trúc & thông số## 7. Code demo### Multi-Step Onboarding​import React, { useState, useRef } from "react";