Chuyển tới nội dung chính

Thiết lập tính năng White Label

Yêu cầu gói thanh toán năm

Tính năng White Label chỉ mở cho người dùng gói thanh toán năm. Sau khi mua gói năm, vui lòng liên hệ hỗ trợ qua Telegram để nhận mã mở khóa.

White Label cho phép bạn tùy biến nhận diện thương hiệu của TikMatrix theo hình ảnh doanh nghiệp: đổi tên ứng dụng, logo, thông tin thương hiệu để tạo phiên bản TikMatrix mang dấu ấn riêng.

Tính năng chính​

Cài đặt cơ bản​

  • Tên ứng dụng: Tùy chỉnh tên hiển thị
  • Tải logo: Tải logo chính của bạn (khuyến nghị 128x128px)
  • Biểu tượng website: Tùy chỉnh favicon

Cài đặt thương hiệu​

  • Email hỗ trợ: Địa chỉ email chăm sóc khách hàng
  • Liên kết hướng dẫn: Link tài liệu/hướng dẫn tùy chỉnh
  • Liên kết Telegram: Link nhóm/kênh Telegram của bạn

Công tắc tính năng​

  • Hiển thị liên kết hướng dẫn
  • Hiển thị thông tin thương hiệu

Cách cấu hình​

Cách 1: Cấu hình bằng giao diện​

  1. Mở ứng dụng TikMatrix
  2. Nhấn biểu tượng bảng màu 🎨 trên thanh tiêu đề
  3. Trong hộp thoại White Label, cấu hình:
    • Tên ứng dụng
    • Logo chính (PNG/JPG, khuyến nghị 128x128px)
    • Email hỗ trợ
    • Liên kết hướng dẫn
    • Liên kết Telegram
    • Công tắc tính năng (bật/tắt hiển thị link hướng dẫn và thông tin thương hiệu)
  4. Nhấn Lưu

Cách 2: Cấu hình bằng file​

  1. Sao chép file mẫu:
cp examples/whitelabel-config.json src/config/whitelabel-custom.json
  1. Chỉnh sửa file cấu hình:
{
  "appName": "Tên ứng dụng của bạn",
  "logo": {
    "main": "/path/to/your/logo.webp",
    "favicon": "/path/to/your/favicon.ico"
  },
  "brand": {
    "supportEmail": "support@yourcompany.com",
    "tutorialUrl": "https://yourcompany.com/docs",
    "telegramUrl": "https://t.me/yourgroup"
  },
  "features": {
    "showTutorialLink": true,
    "showBrandInfo": true
  }
}
  1. Lưu file và khởi động lại ứng dụng

Cách 3: Cấu hình bằng dòng lệnh​

  1. Vào thư mục dự án:
cd tikmatrix-desktop
  1. Chạy công cụ cấu hình:
node scripts/whitelabel-config.js
  1. Làm theo hướng dẫn từng bước trên màn hình

Build phiên bản tùy chỉnh​

1) Chuẩn bị tài nguyên​

# Đặt logo vào đúng vị trí
src/assets/your-logo.webp       # Logo chính
public/your-favicon.ico         # Favicon
src-tauri/icons/                # Icon ứng dụng nhiều kích thước

2) Cấu hình tham số build​

# Dùng công cụ dòng lệnh
node scripts/whitelabel-config.js

# Hoặc chỉnh thủ công
src/config/whitelabel-build.json

3) Build ứng dụng​

# Chế độ phát triển
npm run dev

# Build production
npm run build

# Build ứng dụng Tauri
npm run tauri build

Độ ưu tiên cấu hình​

Hệ thống đọc cấu hình theo thứ tự:

  1. Runtime config: whitelabel_config trong LocalStorage
  2. Build config: src/config/whitelabel-build.json
  3. Example config: examples/whitelabel-config.json
  4. Default config: Giá trị mặc định tích hợp sẵn

Logo chính​

  • Định dạng: PNG, JPG hoặc SVG
  • Kích thước: khuyến nghị 128x128px
  • Nền: khuyến nghị nền trong suốt (PNG)
  • Vị trí dùng: thanh tiêu đề, màn hình khởi động, hộp thoại About

Favicon​

  • Định dạng: ICO hoặc PNG
  • Kích thước: 32x32px hoặc 16x16px
  • Vị trí dùng: tab trình duyệt, icon cửa sổ

Icon ứng dụng (khi build)​

  • Định dạng: PNG, ICO, ICNS
  • Kích thước: 32x32, 128x128, 256x256, 512x512
  • Vị trí: thư mục src-tauri/icons/

Tích hợp API​

JavaScript API​

import {
  getWhiteLabelConfig,
  saveWhiteLabelConfig,
  resetWhiteLabelConfig,
  validateWhiteLabelConfig
} from './config/whitelabel.js';

// Lấy cấu hình hiện tại
const config = getWhiteLabelConfig();

// Lưu cấu hình mới
saveWhiteLabelConfig(newConfig);

// Đặt lại mặc định
resetWhiteLabelConfig();

// Kiểm tra tính hợp lệ của cấu hình
validateWhiteLabelConfig(config);

Utility functions​

import {
  initWhiteLabel,
  updateDocumentTitle,
  updateFavicon
} from './utils/whitelabel.js';

// Khởi tạo white label khi app start
initWhiteLabel();

// Cập nhật tiêu đề tài liệu
updateDocumentTitle('Tên ứng dụng của bạn');

// Cập nhật favicon
updateFavicon('/path/to/favicon.ico');

Best practices​

  • Dùng ảnh độ phân giải cao để hiển thị sắc nét
  • Giữ nhận diện thương hiệu nhất quán ở mọi kích thước
  • Kiểm tra logo trên cả nền sáng và nền tối
  • Đảm bảo logo vẫn dễ đọc ở kích thước nhỏ

Tính nhất quán thương hiệu​

  • Dùng màu sắc và font đồng nhất trên toàn giao diện
  • Bám sát brand guideline hiện có của bạn
  • Kiểm tra giao diện trên nhiều kích thước màn hình
  • Giữ giao diện chuyên nghiệp

Cấu hình liên kết​

  • Dùng HTTPS cho tất cả liên kết ngoài
  • Kiểm tra toàn bộ link trước khi triển khai
  • Đảm bảo kênh hỗ trợ luôn được theo dõi
  • Cập nhật link tài liệu thường xuyên

Khắc phục sự cố​

Vấn đề thường gặp​

Logo không hiển thị

  • Kiểm tra đường dẫn file và quyền truy cập
  • Kiểm tra định dạng ảnh có được hỗ trợ
  • Đảm bảo kích thước ảnh phù hợp
  • Xóa cache rồi khởi động lại app

Cấu hình không được lưu

  • Kiểm tra quyền hệ thống file
  • Kiểm tra cú pháp JSON
  • Đảm bảo thư mục cấu hình tồn tại
  • Thử chạy quyền admin (nếu cần)

Build thất bại

  • Kiểm tra tài nguyên đã đầy đủ
  • Kiểm tra cú pháp file cấu hình
  • Kiểm tra định dạng file icon
  • Xem build log để xác định lỗi cụ thể

Cần hỗ trợ thêm?​

Nếu gặp lỗi khi thiết lập White Label:

  1. Xem lại phần khắc phục sự cố ở trên
  2. Kiểm tra cú pháp file cấu hình
  3. Liên hệ hỗ trợ qua Telegram
  4. Khi báo lỗi, đính kèm file cấu hình và thông tin lỗi

Bản quyền và sử dụng​

  • White Label chỉ mở cho gói thanh toán năm
  • Quyền tùy biến thương hiệu đã bao gồm trong gói
  • Phân phối bản tùy chỉnh có thể cần giấy phép bổ sung
  • Với nhu cầu doanh nghiệp, vui lòng liên hệ hỗ trợ

Cần mã mở khóa? Hãy liên hệ đội ngũ hỗ trợ qua Telegram kèm thông tin gói thanh toán năm của bạn.