Tài liệu hướng dẫn sử dụng

Cấu hình giao diện website và mobile app bảo hành

Một màn hình cấu hình, hai kênh hiển thị: trang bảo hành điện tử và app cho khách hàng, NPP/ĐL

Đối tượng

Nhân viên marketing

Phiên bản

1.0

Cập nhật

08/2026

Mục lục

Nội dung tài liệu

0Tổng quan

0.1Một bản ghi cấu hình, hai kênh hiển thị

0.2Sáu khối cấu hình trong màn hình

0.3Chuẩn bị vật liệu trước khi vào cấu hình

1Cấu hình nền tảng

1.1Mở màn hình cài đặt trang bảo hành điện tử

1.2Domain và QR code

1.3Thông tin thương hiệu

1.4Thông tin liên hệ và kênh chăm sóc

2Giao diện website bảo hành

2.1Mã màu chính và bộ nhận diện

2.2Banner và danh sách ảnh chạy

2.3Video giới thiệu, favicon và menu hiển thị

2.4Kiểm tra kết quả trên website

3Giao diện mobile app bảo hành

3.1Thông tin mobile app và link tải

3.2Ảnh chạy riêng cho mobile

3.3Kiểm tra kết quả trên app

PPhụ lục

ABảng tra cứu toàn bộ trường cấu hình

BChecklist trước khi công bố thay đổi

CSáu lỗi thao tác thường gặp

Phần 0 — Tổng quan

0.1 Một bản ghi cấu hình, hai kênh hiển thị

Mỗi domain bảo hành là một bản ghi cấu hình. Nội dung khai trong bản ghi đó chạy đồng thời ra trang bảo hành điện tử trên web và ra mobile app. Không có hai chỗ khai riêng.

Nguồn

Bản ghi cấu hình

Cài đặt trang bảo hành điện tử — một dòng cho mỗi domain, ví dụ baohanh.faster.vn.

Kênh 1

Website bảo hành

Khách hàng cuối vào để kích hoạt, tra cứu, báo bảo hành, tìm trạm và điểm bán.

Kênh 2

Mobile app bảo hành

Hai lớp người dùng: khách hàng, và NPP/ĐL/Thợ kích hoạt bảo hành, xem KPI và hoa hồng.

0.2 Sáu khối cấu hình trong màn hình

Form cấu hình dài, cuộn dọc. Làm theo đúng thứ tự các khối dưới đây, lưu một lần ở cuối.

Cấu hình

Domain, domain QR code, SSL — nền tảng kỹ thuật, khai một lần

Thông tin thương hiệu

Tên, logo, tiêu đề, giới thiệu, số liệu uy tín

Thông tin liên hệ

Hotline, email, địa chỉ, Zalo, Facebook, menu sản phẩm

Thông tin mobile app

Tên app, link Play Store và Apple Store

Thông tin thiết kế trên website

Mã màu chính, banner, danh sách ảnh chạy cho web và cho mobile

Video, favicon và menu hiển thị

Video giới thiệu app, ảnh đại diện, favicon, các ô bật/tắt menu

0.3 Chuẩn bị vật liệu trước khi vào cấu hình

Gom đủ tài nguyên trước, tránh phải lưu nửa vời rồi quay lại nhiều lần.

Bộ nhận diện

Logo nền trong suốt, favicon vuông, mã màu chính dạng hex (ví dụ #7ACC00).

Ảnh banner

Banner ngang cho web và ảnh dọc riêng cho mobile. Cùng một ảnh dùng cho cả hai sẽ bị cắt mất nội dung.

Nội dung chữ

Tiêu đề thương hiệu một dòng, đoạn giới thiệu ngắn, số sản phẩm đã bán và số trạm bảo hành đã chốt với các bộ phận liên quan.

Đường dẫn

Website thương hiệu, Facebook page, Zalo chat, link Play Store, Apple Store, link video YouTube dạng embed.

Phần 1 — Cấu hình nền tảng

Marketing

1.1 Mở màn hình cài đặt trang bảo hành điện tử

Danh sách liệt kê các domain đã cấu hình. Thường chỉ có một dòng cho một thương hiệu.

Nghiệp vụ › Bảo hành điện tử › Cài đặt trang bảo hành điện tử

Danh sách cài đặt trang bảo hành điện tử — Hình 1 — Danh sách cấu hình theo domain và tên thương hiệu.

Bấm vào domain hoặc biểu tượng bút chì để mở cấu hình đang chạy. Đây là cách làm thường ngày.

Thêm mới chỉ dùng khi mở một domain bảo hành mới, ví dụ cho thương hiệu con hoặc thị trường khác.

Trong form, nút Lưu có ở cả trên và dưới. Nút Xóa ngay bên cạnh — cẩn thận khi bấm nhanh.

Marketing

1.2 Domain và QR code

Khối Cấu hình ở đầu form. Ba ô, khai một lần rồi gần như không đổi.

Khối Cấu hình và Thông tin thương hiệu — Hình 2 — Khối **Cấu hình** và đầu khối **Thông tin thương hiệu**.

TRƯỜNG

BẮT BUỘC

MÔ TẢ

Domain

Có

Địa chỉ trang bảo hành, ví dụ baohanh.faster.vn. Nhập không kèm https://.

Domain QR code

Có

Domain nhúng vào mã QR trên tem bảo hành. Thường trùng domain chính.

Sử dụng SSL

Nên bật

Tích để trang chạy https. Bật khi chứng thư SSL đã được cài trên domain.

Lưu ý

Không đổi Domain QR code sau khi tem đã in và phát ra thị trường. Mã QR trên các tem cũ vẫn trỏ về domain trước đó, khách quét sẽ vào trang lỗi.

Marketing

1.3 Thông tin thương hiệu

Phần chữ và logo xuất hiện ở đầu trang web, ở màn hình đăng nhập app và trong kết quả tra cứu. Xem Hình 2.

TRƯỜNG

BẮT BUỘC

MÔ TẢ

Tên thương hiệu

Có

Tên hiển thị trên toàn hệ thống bảo hành điện tử.

Ảnh logo

Nên có

Bấm Đổi ảnh để tải lên. Dùng PNG nền trong suốt để logo đặt được trên mọi nền màu.

Tiêu đề thương hiệu

Nên có

Một dòng định vị ngắn. Viết dưới 60 ký tự để không bị xuống dòng xấu trên mobile.

Giới thiệu thương hiệu

Nên có

Đoạn văn ngắn về hệ sinh thái sản phẩm và cam kết bảo hành. Ba đến bốn câu là đủ.

Số sản phẩm đã bán

Nên có

Con số uy tín hiển thị trên trang. Cập nhật định kỳ, lấy số đã được xác nhận nội bộ.

Số trạm bảo hành

Nên có

Số trạm ủy quyền đang hoạt động. Phải khớp với danh sách trạm thực tế.

Hai con số uy tín là nội dung khách hàng đọc để tin trang này là kênh chính hãng. Đặt lịch soát lại mỗi quý; số cũ lệch xa thực tế gây tác dụng ngược.

Marketing

1.4 Thông tin liên hệ và kênh chăm sóc

Các kênh khách bấm vào khi cần hỗ trợ. Hotline và Zalo là hai kênh dùng nhiều nhất, kiểm tra kỹ trước khi lưu.

Khối thông tin liên hệ — Hình 3 — Khối **Thông tin liên hệ** và đầu khối **Thông tin mobile app**.

TRƯỜNG

MÔ TẢ

Link website thương hiệu

Trang chủ công ty, gắn vào logo và footer.

Nội dung link menu sản phẩm

Mỗi dòng một mục theo cú pháp Tên hiển thị;URL, ví dụ Thiết bị bếp;https://faster-bep.vn/. Các dòng này thành menu Sản phẩm trên web.

Thông tin liên hệ

Câu mô tả ngắn hiển thị ở khu vực liên hệ.

Link Facebook page · Link zalo chat

Dán URL đầy đủ. Zalo dùng dạng https://zalo.me/<id>.

Số hotline

Số tổng đài. Hiện ở nút gọi nổi góc phải trang web và trong app.

Email liên hệ · Địa chỉ liên hệ

Email tiếp nhận bảo hành và địa chỉ trụ sở hiển thị ở footer.

Kiểm tra sau khi lưu

Bấm thử từng link ngay trên trang thật: Facebook, Zalo, mỗi mục trong menu sản phẩm. Một dấu chấm phẩy sai cú pháp làm cả dòng menu đó biến mất khỏi web mà không báo lỗi.

Phần 2 — Giao diện website bảo hành

Website

2.1 Mã màu chính và bộ nhận diện

Khối Thông tin thiết kế trên website. Mã màu chính lan ra toàn bộ nút, tab, badge và nền hero của cả web và app.

Nhập mã hex đúng theo brand guideline, ví dụ #7ACC00. Ô vuông bên trái là bản xem trước màu.

Chọn màu đủ đậm để chữ trắng đặt lên vẫn đọc được. Màu quá nhạt làm nút chính bị mờ trên nắng ngoài trời, nơi sale và thợ dùng app.

Đổi mã màu là thay đổi có tác động rộng nhất trong màn hình này. Chỉ đổi khi thương hiệu thực sự thay đổi nhận diện.

Website

2.2 Banner và danh sách ảnh chạy

Bốn vùng ảnh khác nhau, đừng dùng lẫn. Ảnh banner là ảnh tĩnh ở một vị trí; danh sách ảnh chạy là slide tự động.

VÙNG ẢNH

DÙNG CHO

Ảnh banner 1

Ảnh lớn cạnh khối kích hoạt ở đầu trang web. Chọn ảnh không gian sản phẩm thật, tránh ảnh nhiều chữ.

Ảnh banner 2

Ảnh phụ ở khu vực bên dưới trang.

Danh sách ảnh chạy

Slide khuyến mãi trên web. Ảnh ngang. Bấm Thêm ảnh để thêm, dấu × góc ảnh để bỏ.

Danh sách ảnh chạy (mobile)

Slide riêng cho app. Ảnh dọc hoặc gần vuông, nội dung dồn vào giữa vì phần dưới bị thẻ đăng nhập che.

Ảnh đại diện cho sản phẩm

Ảnh mặc định cho sản phẩm chưa có hình riêng.

Ảnh Favicon

Biểu tượng trên tab trình duyệt. Ảnh vuông, nền trong suốt, chi tiết đơn giản để nhìn rõ ở kích thước nhỏ.

Luôn chuẩn bị hai bộ ảnh chạy riêng cho web và mobile. Dùng ảnh ngang cho app sẽ bị cắt hai đầu và mất phần chữ quan trọng — lỗi hay gặp nhất khi chạy campaign.

Website

2.3 Video giới thiệu, favicon và menu hiển thị

Phần cuối form: video quảng bá app, favicon và các ô bật/tắt khu vực trên web.

Banner 2, video giới thiệu, favicon và ô hiển thị menu — Hình 5 — Ảnh banner 2, ảnh đại diện video, link video, favicon và các ô tích hiển thị menu.

TRƯỜNG

MÔ TẢ

Link video giới thiệu mobile app

Dùng dạng embed, ví dụ https://www.youtube-nocookie.com/embed/<id>. Link xem thường (watch?v=) sẽ không nhúng được.

Ảnh đại diện video giới thiệu mobile app

Ảnh hiện trước khi khách bấm play. Đặt tiêu đề ngắn trên ảnh để tăng lượt bấm.

Hiển thị menu Trang chủ

Bỏ tích nếu không muốn có mục Trang chủ trên thanh menu.

Hiển thị menu sản phẩm

Bật thì menu Sản phẩm hiện, lấy nội dung từ ô Nội dung link menu sản phẩm ở mục 1.4. Bật mà chưa khai nội dung thì menu rỗng.

Lưu ý

Form dài và cuộn nhiều. Bấm Lưu một lần sau khi đã khai xong toàn bộ các khối; đóng tab giữa đường là mất mọi thay đổi chưa lưu.

Website

2.4 Kiểm tra kết quả trên website

Sau khi lưu, mở domain bảo hành và đối chiếu từng vùng với những gì vừa khai.

Website bảo hành sau khi cấu hình — Hình 6 — Trang bảo hành thực tế: logo, menu, mã màu chính, tiêu đề thương hiệu, banner 1 và nút gọi hotline.

VÙNG TRÊN TRANG

LẤY TỪ TRƯỜNG

Logo góc trên trái

Ảnh logo — mục 1.3

Menu Sản phẩm

Nội dung link menu sản phẩm + ô Hiển thị menu sản phẩm

Nền hero, nút và tab

Mã màu chính — mục 2.1

Nhãn phía trên tiêu đề

Thông tin liên hệ, tên thương hiệu

Ảnh lớn bên phải khối kích hoạt

Ảnh banner 1

Slide khuyến mãi bên dưới

Danh sách ảnh chạy

Nút gọi nổi góc dưới phải

Số hotline — mục 1.4

Phần 3 — Giao diện mobile app bảo hành

Mobile app

3.1 Thông tin mobile app và link tải

Ba ô, quyết định tên app hiển thị và hai nút tải trên web. Xem Hình 3 và Hình 4.

TRƯỜNG

MÔ TẢ

Mobile app name

Tên app hiển thị trên web và trong nội dung hướng dẫn, ví dụ FASTER CARE. Ghi đúng tên đã đăng ký trên store.

Link Play Store

URL bản Android. Dán nguyên link từ Google Play.

Link Apple Store

URL bản iOS. Sai một trong hai link là mất một nửa lượt tải app của NPP/ĐL.

Kiểm tra hai link bằng chính điện thoại, không chỉ trên máy tính. Link sai vùng quốc gia vẫn mở được trên desktop nhưng báo không tìm thấy app trên máy thật.

Mobile app

3.2 Ảnh chạy riêng cho mobile

Ô Danh sách ảnh chạy (mobile) ở Hình 4. Ảnh này là nền phía sau thẻ đăng nhập và thẻ thông tin trên app.

Bấm Thêm ảnh trong ô mobile, chọn ảnh dọc.

Đặt nội dung chính ở nửa trên ảnh. Nửa dưới bị thẻ đăng nhập và thanh điều hướng che.

Giữ số ảnh ít, hai đến ba ảnh. Nhiều ảnh làm app tải chậm khi mạng yếu ngoài thị trường.

Bấm dấu × góc ảnh để bỏ ảnh campaign đã hết hạn. Ảnh cũ để lại làm mất uy tín thông tin.

Lưu ý về chữ trên ảnh

Tránh đặt chữ nhỏ hoặc số điện thoại vào ảnh chạy mobile — bị cắt mép hoặc bị thẻ che là rất thường gặp. Thông tin quan trọng nên nằm ở trường cấu hình, không nằm trong ảnh.

Mobile app