Driver.js: tạo hướng dẫn tương tác cho web app

Khi nào cần một tour hướng dẫn?

Dùng tour cho thao tác mới hoặc màn hình phức tạp, chẳng hạn tìm bộ lọc hay tạo dự án. Giữ từng bước ngắn, có nút bỏ qua và cho phép mở lại. Đừng dùng tour để che việc giao diện khó hiểu.

Bắt đầu với Driver.js

Cài thư viện, import CSS và chỉ khởi chạy khi phần tử mục tiêu đã xuất hiện trong DOM. Ví dụ tối giản:

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const tour = driver();
tour.highlight({
  element: "#create-project",
  popover: { title: "Tạo dự án", description: "Bắt đầu bằng cách đặt tên dự án." },
});

Xem hướng dẫn cài đặt chính thức và cố định phiên bản phù hợp với dự án.

Kiểm tra trước khi phát hành

Thử trên màn hình nhỏ, bàn phím và trang tải dữ liệu bất đồng bộ. Xác nhận người dùng đóng được tour, phần tử mục tiêu tồn tại và giao diện không bị che mất nút quan trọng. Đo tỷ lệ hoàn thành tác vụ thay vì mặc định thêm tour sẽ tăng chuyển đổi.

Đưa web app lên máy chủ

Sau thay đổi giao diện, kiểm tra build và đường dẫn tài nguyên. Tham khảo kế hoạch triển khai ứng dụng lên VPS.