Thiết kế web customer portal: account dashboard, ticket và hoá đơn trên một phiên đăng nhập
· Tác giả: Trường — Founder Webchốt
Liên quan: Webchốt chuyên dịch vụ làm web bán hàng chốt đơn.
Sau mười bốn dự án B2B manufacturing và logistics đã giao tại Webchốt, mình thấy khách ít khi phàn nàn “giao diện chưa đẹp” — họ gọi đúng ba giờ sáng vì không tải được chứng từ xuất kho khi hải quan hỏi tại cửa khẩu. Thiết kế web customer portal vì vậy ưu tiên đường dẫn ngắn: đăng nhập một lần, thấy trạng thái đơn hàng, hoá đơn VAT đã phát hành và ticket hỗ trợ có SLA — thay vì bảy tab Excel và chuỗi email “Fwd: Fwd:”. Bài viết này mô tả stack Next.js, customer self-service cho SME Việt Nam, và cách account dashboard phản ánh đúng vai trò người mua và kế toán phụ trách.
Tổng quan đơn hàng và công nợ trên một màn hình — giảm email hỏi trạng thái | Nguồn: webchot.com
Customer self-service và account dashboard: đừng nhét mọi ERP field vào một trang
Customer self-service thành công khi người dùng tìm được việc họ cần trong ba click từ login: xem lịch giao, tải chứng từ, mở ticket. Account dashboard không phải bản sao ERP — hãy aggregate API và chỉ hiển thị trường có ý nghĩa với khách; mã nội bộ SKU dài có thể gấp vào tooltip. Với nhiều đơn vị con, switcher chi nhánh phải giữ ngữ cảnh filter — tránh cảnh kế toán xem nhầm công nợ chi nhánh khác. Thiết kế web customer portal trên Next.js nên dùng server components cho bảng nặng và streaming skeleton để FCP không đứng hình khi join nhiều API legacy.
Thông báo email digest có thể tắt theo channel — nhưng alert hoá đơn sai MST nên là push bắt buộc cho người có role kế toán.
Biểu đồ công nợ nên mặc định theo kỳ kế toán VN, có nút chuyển nhanh sang tháng trước thay vì bắt người dùng mở date picker bốn lần. Nếu portal phục vụ cả khách nước ngoài, hiển thị song song VND và đơn vị tham chiếu với tỷ giá khoá theo hợp đồng — tránh hiểu nhầm khi tỷ giá trung tâm nhảy giữa hai email cách nhau một ngày. Một số tập đoàn yêu cầu watermark PDF khi tải hợp đồng: in user id và timestamp light trên từng trang, đủ đọc khi in nhưng khó l làm tài liệu giả ngoài hệ thống.
Ticket, chat và ranh giới với CSKH qua Zalo
Zalo tiện nhưng không thay lịch sử ticket có SLA công khai. Portal nên embed widget hoặc deep link sang module ticket với id đơn hàng đính kèm — tránh agent hỏi lại mã PO lần thứ năm. Phân loại mức độ P1–P3 hiển thị màu nhẹ, không gây hoảng khi P2 chỉ là “đổi địa chỉ nhận”.
- Điểm 1: Upload đính kèm giới hạn dung lượng và quét MIME — tránh macro độc trong file “đơn đặt hàng.xlsm”.
- Điểm 2: Trích dẫn bình luận cũ khi reopen ticket để agent có ngữ cảnh.
- Điểm 3: Cho phép khách CC đồng nghiệp bằng invite email domain công ty.
- Điểm 4: Export transcript PDF khi tranh chấp pháp lý.
Bảng chọn mô hình portal
Tùy độ phức tạp tích hợp và bảo mật, đội sản phẩm chọn lớp phù hợp.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| Auth | Email magic link | SAML SSO | SSO khi IT khách yêu cầu |
| Dữ liệu đơn | Polling 15 phút | Webhook near real-time | Webhook + retry idempotent |
| Hoá đơn | PDF tĩnh | API nhà cung cấp HĐĐT | API + cache signed URL |
| Mobile | Responsive | PWA push | PWA nếu tài xế cần xác nhận giao |
Sau bảng, hãy diễn tập mất session giữa chừng khi kế toán vừa sắp tải ZIP chứng từ — refresh token dài và nút “tiếp tục tải” giảm cuộc gọi support.
Quy trình triển khai portal với Webchốt
- Bước 1: Workshop mapping persona — purchaser, kế toán, nhận hàng — và quyền xem từng trường.
- Bước 2: Thiết kế API contract mock trước khi nối ERP thật.
- Bước 3: Prototype Figma clickable kèm empty state và lỗi mạng.
- Bước 4: UAT với ba khách pilot và log crash boundary.
- Bước 5: Go-live theo chi nhánh dần — feature flag tắt module rủi ro.
Sau go-live, đừng ngừng đo thời gian hoàn thành ticket — đó là KPI trung thành thực tế hơn NPS khảo sát dài. Nếu portal có module đối soát công nợ, hãy bật nhắc email ba ngày trước hạn để khách chủ động thanh toán thay vì CSKH gọi đuổi.
Phương án giá và gói dịch vụ
Gói thiết kế web customer portal thường nằm trong timeline dự án lớn — chi tiết phân tầng tại bảng giá và tư vấn mở rộng ở dịch vụ. Nếu bạn cần demo nhanh cho hội đồng mua hàng, đặt lịch liên hệ kèm use case; hub công cụ có thể giúp ước lượng ROI giảm email hỏng hàng ngày.
Khách FDI thường hỏi audit log — hãy dự trù story point cho export CSV admin ngay sprint đầu.
Khi tích hợp thanh toán, redirect về portal phải idempotent: F5 trang không được tạo thêm giao dịch treo. Với chính sách tạm ứng, hiển thị rõ số dư khả dụng và mốc sắp tới sẽ trừ — tránh cảnh kế toán đối chiếu sổ mỗi tuần vì số lệch vài trăm nghìn do làm tròn. Nếu khách cần phê duyệt nội bộ nhiều cấp, cung cấp trạng thái “đang chờ phòng pháp chế” thay vì một cụm trạng thái mơ hồ “đang xử lý” kéo dài hàng tuần.
Sai lầm phổ biến
Bốn lỗi sau khiến portal “có như không”.
- Sai lầm 1: Đăng nhập khác email domain — khách dùng Gmail cá nhân và mất quyền khi nghỉ việc.
- Sai lầm 2: Không có vai trò read-only cho kiểm toán bên ngoài.
- Sai lầm 3: Hiển thị giá net/gross không nhất quán với ERP.
- Sai lầm 4: Không giới hạn tần suất API — ERP partner chặn IP giờ cao điểm.
FAQ — thiết kế web customer portal
Customer portal khác gì trang tài khoản e-commerce?
Portal B2B thường có hợp đồng, milestone thanh toán, user phụ theo chi nhánh và tài liệu pháp lý — không chỉ địa chỉ giao hàng và voucher. Thiết kế web customer portal vì vậy cần quyền chi tiết và audit trail mạnh hơn shop B2C.
Có cần app native không?
PWA đủ cho nhiều SME nếu push không phải tính năng sống còn; native khi cần SDK ký số USB hoặc Bluetooth máy in nhiệt chuyên biệt mà trình duyệt không truy cập.
SSO cho khách doanh nghiệp?
SAML hoặc OIDC phổ biến khi IT khách bắt đăng nhập qua Microsoft Entra hoặc Google Workspace — phải map group vào role portal để tránh mặc định admin nguy hiểm.
Lưu hoá đơn điện tử thế nào?
Link XML/PDF từ nhà cung cấp hoặc proxy API — kiểm tra TTL signed URL để khách không gặp 403 sau một ngày; có thể cache metadata Mã số thuế và ký hiệu để hiển thị ngay cả khi link tạm hết hạn.
Webchốt triển khai bao lâu?
MVP sáu đến mười tuần tùy ERP; gọi 0905 151 701 hoặc hi@webchot.com kèm sơ đồ hệ thống hiện tại để nhận timeline cụ thể.
Liên Hệ Webchốt
Đầu tư thiết kế web customer portal đúng giờ giảm phí support và tăng độ tin cạnh tranh khi RFP yêu cầu “vendor portal minh bạch”. Gửi hi@webchot.com hoặc gọi 0905 151 701 nếu bạn cần checklist UAT; anh Trường phản hồi wireframe ưu tiên trong 48 giờ làm việc cho khách đã có domain SSO. Chúng tôi có thể gửi file PDF ví dụ permission matrix để bạn ký nội bộ trước khi dev bắt đầu.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals.
