MARKETING × TECHNOLOGY
Nhận tư vấn →
ONMATE / TÍCH HỢP HỆ THỐNG

Tích hợp hệ thống

Kết nối website với dữ liệu và công cụ doanh nghiệp đang dùng.

ONMATE tích hợp biểu mẫu, CRM, thanh toán hoặc phần mềm vận hành theo nhu cầu. Luồng dữ liệu được kiểm thử về phân quyền, bản ghi trùng và xử lý lỗi để đội ngũ giảm nhập liệu thủ công và dễ theo dõi.

HÀNH TRÌNH TRÊN TÍCH HỢP HỆ THỐNG

Tích hợp tốt là dữ liệu đi đúng nơi một lần, và có người biết lỗi trước khách.

Một đợt tích hợp đi qua nhiều chặng, từ biểu mẫu đến giám sát. Chọn một chặng để xem việc ở đó.

CHẶNG 01

Biểu mẫu

Form chỉ hỏi điều cần để gọi lại, báo lỗi ngay tại ô sai, và chỉ nhận một lần dù khách bấm hai lần.

Sáu chặng quay quanh một điểm. Chọn một chặng để đọc chi tiết.

TÍCH HỢP HỆ THỐNG
SÁU PHẦN VIỆC

Chọn một phần việc để xem
toàn bộ cách làm.

Mỗi phần việc có màn hình làm việc, đầu vào và cách đo riêng.

Chạm vào một thẻ để đổi nội dung bên dưới.

Đang xemForm ngắn, báo lỗi rõ
Nội dung của thẻ Form ngắn, báo lỗi rõChọn thẻ khác
BIỂU MẪU

Form ngắn, báo lỗi rõ — Hỏi ít, kiểm tra ngay, kiểm tra lại ở máy chủ, chặn gửi trùng.

Hợp khi form chỉ gửi email chung, hay nhận số sai hoặc trùng, chưa rõ khách đến từ đâu.

Tài liệu tham khảo:web.dev: kiểm tra dữ liệu biểu mẫu ↗W3C WCAG 2.2: nhận biết lỗi nhập liệu ↗MDN: mã trạng thái HTTP ↗

01
TRÔNG NHƯ THẾ NÀO

Biểu mẫu trông như thế nào.

Ba màn hình: cấu hình trong WordPress, form lúc nhập và gửi xong, yêu cầu trong DevTools.

Trường và quy tắc trong WordPress

Bảy trường: họ tên, số điện thoại, email, nhu cầu, ghi chú, đồng ý liên hệ, nguồn khách. Mỗi trường có loại ô và quy tắc riêng.

Đọc tiếp

Số điện thoại đủ 10 chữ số, bắt đầu bằng 0; ô đồng ý phải chọn mới gửi được; nguồn khách là ô ẩn tự điền.

MÔ PHỎNG · SỐ MẪU
nhathom.example/wp-admin/admin.php?page=bieu-mau&id=2
  1. Số điện thoại: bắt buộc, 10 chữ số, bắt đầu bằng 0. Chặn số gõ thiếu hoặc nhầm ngay lúc nhập.
  2. Đồng ý liên hệ: khách phải chọn mới gửi được. Là bằng chứng khách cho phép gọi lại.
  3. Nguồn khách là ô ẩn, tự điền từ địa chỉ trang (utm). Mỗi khách vào CRM đều biết đến từ đâu.

Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.

Tài liệu tham khảo:web.dev: kiểm tra dữ liệu biểu mẫu ↗W3C WCAG 2.2: nhận biết lỗi nhập liệu ↗MDN: mã trạng thái HTTP ↗

02
LÀM NHƯ THẾ NÀO

Năm bước làm biểu mẫu.

Hỏi ít, kiểm tra kỹ, báo lỗi rõ; thử làm sai trước khi bật.

  1. 01Chốt trường tối thiểu: tên, số điện thoại, nhu cầu. Mỗi ô thêm làm khách dễ bỏ dở.
  2. 02Viết quy tắc, câu báo lỗi rõ cho từng trường; số điện thoại dùng ô loại tel.
  3. 03Thêm ô đồng ý ghi rõ mục đích, ô ẩn lấy utm, và mã submission_id riêng mỗi lần.
  4. 04Kiểm tra lại ở máy chủ, chặn thư rác bằng ô bẫy, chỉ báo xong khi nhận 201.
  5. 05Thử 8 tình huống, từ gửi đúng đến tắt mạng; ghi bảng thử rồi mới bật cho khách.
Bạn đưa vào
  • Các trường cần hỏi và thứ tự
  • Người nhận yêu cầu và giờ làm việc
  • Nội dung đồng ý liên hệ
  • Trang đặt form
Kiểm tra hai lớp, đồng ý rõ ràng, mã lần gửiONMATE cùng doanh nghiệp
Bạn nhận lại
  • Form chạy trên website, bảng thiết kế trường, bảng thử 8 tình huống, địa chỉ nhận dữ liệu.

Tài liệu tham khảo:web.dev: kiểm tra dữ liệu biểu mẫu ↗MDN: ô nhập số điện thoại (type=tel) ↗MDN: thuộc tính inputmode ↗MDN: thuộc tính autocomplete ↗

03
CẦN CHUẨN BỊ GÌ

Cần chuẩn bị gì để làm biểu mẫu.

Cần câu khách hay hỏi, người nhận yêu cầu, câu đồng ý đang dùng.

NGUYÊN TẮC

Bảng thiết kế trường: mỗi trường một dòng, ghi loại ô, bắt buộc hay không, quy tắc kiểm tra và trường CRM tương ứng.

BẢNG THIẾT KẾ FORM · SỐ MẪU
docs.google.com/spreadsheets
nhathom-thiet-ke-bieu-mauTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
ABCDE
1TrườngLoạiBắt buộcQuy tắc kiểm traTrường trong CRM
2nameVăn bảnCóTừ 2 ký tựHọ và tên
3phoneSố điện thoạiCó10 chữ số, bắt đầu bằng 0Điện thoại (khóa chống trùng)
4emailEmailKhôngĐúng dạng tên@miềnEmail
5needDanh sách chọnCó4 lựa chọn có sẵnNhu cầu
6noteĐoạn vănKhôngTối đa 500 ký tựGhi chú
7consentHộp chọnCóPhải chọn mới gửi đượcĐồng ý liên hệ
8utm_source, utm_mediumÔ ẩnTự điềnLấy từ địa chỉ trangNguồn khách
Biểu mẫu tư vấnBiểu mẫu liên hệ
  1. Số điện thoại: 10 chữ số, bắt đầu bằng 0. Cũng là khóa chống trùng trong CRM, quan trọng nhất bảng.
  2. Đồng ý liên hệ bắt buộc, không đặt sẵn là đã chọn. Khách tự chọn thì đồng ý mới có giá trị.
  3. Mỗi trường trên form có một trường tương ứng trong CRM. Ghi đủ cột này để ghép không sót.

Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.

Số điện thoại kiểm tra chặt

10 chữ số, đầu 0

Đồng ý liên hệ do khách chọn

Không đặt sẵn là đã chọn

Lấy nguồn từ địa chỉ trang

Ô ẩn, khách khỏi nhập

Máy chủ kiểm tra lại

Không tin riêng trình duyệt
Bộ tài nguyên4 mục
  • KháchNhững câu khách hay hỏi3 đến 5 yêu cầu thật gần đây.
  • TệpCâu đồng ý đang dùngĐể viết lại cho đúng, dễ đọc.
  • ẢnhẢnh chụp form hiện tạiKèm lỗi khách từng gặp (nếu có).
  • BảngNgười nhận và giờ làm việcAi nhận yêu cầu, gọi lại khi nào.
Xem đủ thông số và ghi chú
Nguồn
Kiểm tra dữ liệu biểu mẫu web.dev hướng dẫn kiểm tra ngay trên trình duyệt bằng thuộc tính của HTML (required, pattern, type) và cho người dùng thấy lỗi ở đâu, sửa thế nào.
Nguồn
Báo lỗi phải chỉ ra ô sai bằng chữ WCAG 2.2 yêu cầu khi hệ thống phát hiện lỗi nhập liệu thì ô sai được xác định và lỗi được mô tả bằng chữ cho người dùng, không chỉ bằng màu.
Lưu ý
Kiểm tra ở trình duyệt chưa đủ Dữ liệu có thể đến máy chủ mà không qua trình duyệt, nên máy chủ phải kiểm tra lại mọi trường (OWASP). Kiểm tra ở trình duyệt chỉ để khách sửa nhanh hơn.

Tài liệu tham khảo:web.dev: kiểm tra dữ liệu biểu mẫu ↗W3C WAI: kiểm tra dữ liệu biểu mẫu ↗W3C WCAG 2.2: nhận biết lỗi nhập liệu ↗OWASP: kiểm tra dữ liệu đầu vào ↗

04
ĐO ĐIỀU GÌ

Đo bằng bảng thử 8 tình huống.

Trước khi bật, thử 8 tình huống bằng tay, ghi vào bảng. Sửa form thì thử lại.

CẦN ĐO

Ca “Không chọn đồng ý” lần đầu vẫn gửi đi; điền đúng thì không lộ.

BẢNG THỬ FORM · SỐ MẪU
docs.google.com/spreadsheets
nhathom-thu-bieu-mauTệp Chỉnh sửa Xem Chèn Định dạng Dữ liệu
ABCDE
1#Cách thửMong đợiKết quả thậtTình trạng
21Gửi đủ thông tin đúngBáo đã nhận; khách vào CRM trong 1 phútĐúng như mong đợiĐạt
32Bỏ trống số điện thoạiBáo lỗi tại ô, không gửiĐúng như mong đợiĐạt
43Nhập số điện thoại 9 chữ sốBáo lỗi tại ô, không gửiĐúng như mong đợiĐạt
54Không chọn đồng ý liên hệKhông gửi đượcForm vẫn gửi điĐã sửa 06/10
65Bấm Gửi hai lần liên tiếpChỉ có 1 khách trong CRMĐúng như mong đợiĐạt
76Gửi lại cùng số điện thoạiGộp vào khách cũĐúng như mong đợiĐạt
87Tắt mạng rồi bấm GửiBáo chưa gửi được, giữ chữ đã nhậpĐúng như mong đợiĐạt
98Mở bằng điện thoại AndroidHiện bàn phím số ở ô số điện thoạiĐúng như mong đợiĐạt
Lần thử 06/10Lần thử 21/09
  1. Ca 4 phát hiện lỗi thật: form vẫn gửi khi khách không chọn đồng ý liên hệ.
  2. Ghi “Đã sửa 06/10” rồi thử lại, giữ nguyên dòng để lần sửa form sau biết ca cần thử lại.
  3. Ca 5: bấm Gửi hai lần liên tiếp vẫn chỉ ra một khách, nhờ mã submission_id của lần gửi.

Giao diện và số liệu minh họa cho thương hiệu giả định Nhà Thơm; không phải kết quả của khách hàng.

Cách đọc số · số mẫu
Chỉ sốCho biếtCần xem lại khi
Ca gửi đúngBáo đã nhận, khách vào CRM trong 1 phútChỉ thấy thông báo mà không mở CRM
Ca làm sai (bỏ trống, thiếu số)Báo lỗi tại ô và không gửiGửi đi rồi mới báo lỗi
Ca bấm Gửi hai lầnChỉ một khách trong CRMHai khách trùng nhau
Ca tắt mạngGiữ chữ đã nhập, báo chưa gửi đượcMất hết chữ đã nhập
CÁCH ĐỌC

Đọc ba cột: cách thử, mong đợi, kết quả thật.

Đọc tiếp

Dòng nào lệch thì sửa, ghi “Đã sửa” kèm ngày. Cả 8 ca đạt mới bật.

LƯU Ý

Thử cả điện thoại và máy tính: bàn phím và cách báo lỗi khác nhau.

Đọc tiếp

Số trong hình là số mẫu.

Tài liệu tham khảo:web.dev: kiểm tra dữ liệu biểu mẫu ↗W3C WAI: kiểm tra dữ liệu biểu mẫu ↗OWASP: kiểm tra dữ liệu đầu vào ↗

05
CÁCH TRIỂN KHAI

Cách xử lý các tình huống thường gặp.

Số trong bảng là số mẫu để minh họa cách đọc, không phải kết quả dự kiến.

01

Form chỉ gửi email vào hộp thư chung

Giữ email làm bản sao, nhưng gửi thẳng dữ liệu vào CRM để không ai phải chép tay.

  1. Lập bảng thiết kế trường từ email đang nhận
  2. Thêm quy tắc kiểm tra và ô đồng ý liên hệ
  3. Gửi thẳng vào CRM, giữ email làm bản sao
  4. Tắt email sau một tuần số khách khớp nhau
02

Hay nhận số điện thoại sai hoặc thiếu

Chặt quy tắc ở ô số điện thoại và báo lỗi ngay tại ô.

  1. Đặt quy tắc 10 chữ số, bắt đầu bằng 0
  2. Dùng ô type tel với inputmode phù hợp
  3. Viết câu báo lỗi có ví dụ
  4. Thử bằng số thiếu, thừa, có khoảng trắng
03

Khách bấm Gửi nhiều lần nên bị trùng

Thêm mã lần gửi và vô hiệu nút Gửi trong lúc chờ.

  1. Tạo submission_id cho mỗi lần mở form
  2. Vô hiệu nút Gửi sau khi bấm
  3. CRM bỏ qua mã đã nhận
  4. Thử bấm Gửi hai lần liên tiếp
DẤU HIỆU
Form báo thành công nhưng CRM không có khách
Chỉ sốGiá trị
Thông báo trên trangĐã nhận yêu cầu
Mã trả về trong tab Mạng500, máy chủ lỗi
Việc cần làmSửa lỗi máy chủ và chỉ báo thành công khi nhận 201
KIỂM TRA

Thông báo trên trang chưa có nghĩa máy chủ đã nhận.

Đọc tiếp

Mở tab Mạng và xem yêu cầu gửi đi có trả 201 không.

DẤU HIỆU
Khách nhập số đúng nhưng form báo sai
Chỉ sốGiá trị
Khách nhập0900 000 000 (số mẫu)
Quy tắc hiện tạiChỉ nhận 10 chữ số liền
Việc cần làmBỏ khoảng trắng và dấu chấm trước khi kiểm tra
KIỂM TRA

Quy tắc kiểm tra quá chặt, ví dụ không nhận số có khoảng trắng hoặc dấu chấm.

DẤU HIỆU
Số lượt gửi ít hơn hẳn số khách nhắn tin hỏi
Chỉ sốGiá trị
Lượt gửi form trong tuần12
Khách nhắn tin hỏi trong tuần40
Việc cần làmThử form trên điện thoại Android và iPhone
KIỂM TRA

Form có thể lỗi ở một loại điện thoại hoặc trình duyệt mà người làm không dùng.

Tài liệu tham khảo:MDN: ô nhập số điện thoại (type=tel) ↗MDN: thuộc tính inputmode ↗OWASP: kiểm tra dữ liệu đầu vào ↗

06
TRƯỚC KHI BẮT ĐẦU

Danh sách kiểm tra.

Đánh dấu từng mục để xem mức sẵn sàng. Trạng thái chỉ lưu trên trình duyệt của bạn.

0%SẴN SÀNG

Tài liệu tham khảo:W3C WCAG 2.2: nhận biết lỗi nhập liệu ↗OWASP: kiểm tra dữ liệu đầu vào ↗OWASP: quản lý khóa và bí mật ↗

NHỚ NHANH

Sáu phần việc, từ biểu mẫu đến giám sát.

Chọn một ô để quay lại đúng phần nội dung ở trên.

01
NĂM BƯỚC TRIỂN KHAI

ONMATE làm gì, và doanh nghiệp nhận lại được gì.

Mỗi bước kết thúc bằng một thứ xem được. Bấm một bước để xem việc làm và thứ được bàn giao.

BƯỚC 01

Khảo sát

Nguồn, hệ thống nhận, API, quy tắc tiếp nhận.

Bàn giaoSơ đồ luồng

Tài liệu tham khảo:OWASP: API Security Top 10 ↗MDN: mã trạng thái HTTP ↗

02
CÂU HỎI THƯỜNG GẶP

Những câu hay được hỏi trước khi bắt đầu.

Chọn một chủ đề. Câu trả lời nói rõ cả điều làm được lẫn điều không ai bảo đảm được.

Kết nối được với CRM nào?

Hệ thống có API hoặc cách nhập tự động. ONMATE đọc tài liệu API trước khi báo phạm vi.

Có dùng công cụ tự động hóa có sẵn không?

Được, nếu đáp ứng yêu cầu lỗi, trùng và bảo mật; có trường hợp cần viết kết nối riêng.

Có đồng bộ hai chiều không?

Có thể, nhưng phức tạp hơn nhiều; thường bắt đầu một chiều và mở rộng sau.

Tài liệu tham khảo:OWASP: API Security Top 10 ↗

03
BẮT ĐẦU

Kể điều bạn cần, bắt đầu từ đây.

Chỉ cần họ tên và số điện thoại. Các mục còn lại bỏ trống cũng được.

Dịch vụ quan tâm
Ngân sách tùy chọn

Bắt buộc: họ tên và số điện thoại. Các mục còn lại bỏ trống cũng được.

Hoặc nhắn trực tiếpFanpageMessengerZalo