Hướng dẫn chi tiết:
Salepage → Tracking → Thanh toán → Chatbot
Dành cho người không biết Tech — từ WHY → HOW → WHAT
Giới thiệu
Đây là bản cập nhật mới nhất, đã được đồng bộ theo nội dung video. Và mình có TẶNG BẠN 10% cho Hostinger Business/VPS với mã PENNYDEAL.
Ngoài ra, bạn cũng có thể nhận $0.5 credit KYMA API để bắt đầu test workflow ngay.
Dùng mã PENNYDEAL để giảm thêm 10% nhé
Mình muốn giải một bài toán cụ thể và thực tế, đi từ WHY → HOW → WHAT.
Nên nếu mindset của mình không khớp với bạn thì cảm ơn bạn đã quan tâm — mình sợ nội dung sẽ không phù hợp với bạn trong trường hợp đó.
Salepage
Lưu ý: Mình hướng dẫn bạn thiết kế giao diện, cho nó chạy trên máy tính và đẩy nó lên website và test sự hoạt động của nó. Nội dung hay sản phẩm dịch vụ bạn phải tự chuẩn bị — nó phụ thuộc vào lĩnh vực của từng người.
Bước 1 — Chuẩn bị nội dung
Mình đã chuẩn bị sẵn file content trên website. Bạn cũng nên làm vậy trước khi bắt đầu thiết kế.
Đây là file notion trước đó và nó sẽ làm nội dung để mình đẩy lên website
Bước 2 — Tìm giao diện
- Tìm giao diện bạn ưng ý
- Khuyến khích: Capture screenshot và gửi cho AI để AI hiểu style bạn muốn
Mình demo với Claude Design và Antigravity luôn để bạn so sánh, nhưng thực tế bạn dùng Claude Chat, Claude Cowork, ChatGPT, Gemini đều được — vì hiện tại mình đang làm thiết kế giao diện thôi, quy trình sẽ đều như nhau
Đây là câu lệnh mình làm với Claude Design
Cùng câu lệnh đó cho Antigravity
Kết quả bên Claude Design
Giờ bạn hãy tải xuống file ZIP - lưu ý mình tải vì mình mang sang những AI khác để làm việc - bạn có thể “handoff to Claude Code” sẽ triển khai thẳng luôn nhé
Đây là file mình đã tải về - nhớ giải nén nhé
Bước 3 — Vibe code lên localhost
Khi đã có xong giao diện, tiến hành đưa nó lên môi trường thực tế (có thể gắn tên miền của bạn). Có các lựa chọn:
| Phương án | Ghi chú |
|---|---|
| Claude Design → Claude Code | Đẩy thẳng sang Claude Code để triển khai |
| Antigravity / Codex | Hỗ trợ code và deploy, phù hợp cho cả luồng phía sau |
| Lovable | Thiết kế giao diện, đẩy domain — nhưng không khác nhiều Claude Design |
Khuyến khích dùng Claude Code, Codex, hoặc Antigravity vì còn làm cả luồng người dùng phía sau (thanh toán, chatbot...). Lovable thiên về thiết kế giao diện hơn.
Add thêm folder test của mình vào - nó là cái nút trên đoạn chat
Đây là cách mình prompt, đừng đặt nặng nó PHẢI THEO KHUÔN, chỉ đơn giản là bạn muốn làm gì, đưa rõ mục đích
AI sẽ hỏi lại bạn, và hãy trả lời nó - phần lấy API này mình sẽ chỉ dưới luồng thanh toán tự động nên yên tâm nhé
Bạn check plan của AI trả lời rồi cho phép triển khai nhé
Thường là xong nó sẽ đẩy cho bạn ở localhost (có nghĩa là trên máy bạn thôi, bạn share nhau chưa được đâu)
Còn đây là khi mình làm với Antigravity ngay từ đầu - nó sẽ tạo thẳng website mở trên máy tính luôn
Nó sẽ tự tạo đường link là user và đuôi html hoặc bạn bảo đẩy localhost (đẩy trên máy là được)
Sửa thêm và chốt lại giao diện là xong
Test trước ở localhost xem giao diện đã đúng ý bạn chưa nhé, các luồng đi phù hợp chưa
LƯU Ý: Phần thanh toán mình sẽ chia sẻ phía dưới nhé, ở đây mình xem ĐÚNG chưa đã, còn lát sẽ kiểm tra nó CÓ HOẠT ĐỘNG ĐÚNG không phía sau nhé!
Bước 4 — Chuẩn bị Domain
Bạn mua tại đâu cũng được nhé, mình mua thử ở cả Việt Nam là Mắt Bão và Hostinger rồi, khuyến khích cùng một nền tảng cho nhanh, không thì setup hơi lâu và phức tạp hơn
Trong video mình có demo cả với tên miền bên ngoài, nhưng nó bị lâu, giờ mình add xong rồi nhé, là cả 2 tên miền: guide.socialboxy.com và guide.pennydinh.click đều đẩy cùng website nhé!
Đây là phương án AI trả về cho mình - 2 đường link đều đẩy vào 1 web
Đây là phần file tài liệu trong hostinger - hiểu đơn giản thì nó là nơi lưu phần code của AI, bạn chốt xong, hãy bảo AI tạo thành file để đẩy lên hostinger
Đường link đã được cập nhật - NHƯNG đang lỗi login vì chưa khai báo và cho phép bên google cloud console
Add thêm đường link để khai báo cho google
vậy là tạm thời hoàn thiện đẩy lên website, cần chỉnh lại nội dung cho đúng nữa
✅ Vậy là xong về Salepage!
Admin và Tracking
LƯU Ý: ở đây là phần quản trị admin và bao gồm cả tracking, mình sẽ cần:
- CMS - sửa lại nội dung và ảnh ở giao diện
- Tracking Data lưu trữ của khách hàng, thông tin khách hàng
- Tracking các kênh - độ hiệu quả từ các kênh
- Tracking doanh thu
Phần quản trị nội dung CMS
Mình cần sửa lại nội dung, ảnh, phần giao diện hiển thị
Phần Admin Dashboard
Bên cạnh salepage, bạn cần có phần admin — dashboard quản trị: nơi giao diện quản lý thông tin khách hàng đăng ký.
Thông tin mình cần thu:
- ✉️ Email
- 👤 Tên
- 📱 Số điện thoại
- 🕐 Thời gian đăng ký
Bạn cần thêm trường nào, hãy bổ sung khi làm việc với AI.
Tracking Nguồn Traffic
Mình yêu cầu AI (dùng Antigravity) thêm luồng tracking theo các kênh:
- Zalo
- YouTube
→ Đo lượt click đến từ nền tảng nào và khách hàng phát sinh từ nền tảng nào.
💡 Nếu bạn cần đấu data về qua CRM của doanh nghiệp — hoàn toàn làm được, hãy nói với AI những gì bạn muốn.
Quy trình làm việc với AI
Phần quản trị nội dung CMS
Đưa đề bài cho AI - hãy để ý phần PLAN - đọc PLAN và phản hồi để AI triển khai cho bạn
Khi nó đã triển khai xong, việc của chúng ta là test thử, có những lỗi nào, thấy dùng không phù hợp hãy feedback lại AI
Sau khi sửa xong thì admin của mình như này
Phần Admin Dashboard
Trong phần này mình cũng đưa cho AI câu lệnh: bao gồm cả Data và tracking (phần doanh thu bị thiếu, gần cuối video mình có bổ sung, cách làm tương tự)
Có một vài LƯU Ý ở đây:
- Đây là việc bạn biết rõ mình muốn gì, bạn đưa ra yêu cầu với AI làm theo điều bạn mô tả, nên càng chi tiết càng tốt, càng rõ ràng càng tốt
- AI sẽ triển khai, nhưng bạn phải thử lại, dùng thử để xem có lỗi nào, có phần gì không phù hợp, sẽ báo lại cho AI, nó là một vòng lặp cho đến khi bản FINAL bạn gật đầu ưng ý
Đây là giao diện cuối của data
Tracking Nguồn Traffic
Cùng với câu lệnh trên và liên tục phản hồi sửa lại với AI - bạn có thể xem lại video để rõ hơn, vì nó lặp lại và dài, nên mình xin phép không screenshot lại ảnh
Đây là giao diện cuối của tracking kênh
Khi tracking từng nền tảng - sẽ đo click từng nền tảng (thay vì utm hoặc ?ref hay source thì sẽ để là /zalo, /youtube) Dùng cho tự mình chạy hoặc affiliate - đo link của mọi người làm tiếp thị.
Quy trình mình demo là trên localhost (trên máy) trước khi cho lên website, vậy nên có một vài điểm nhắc nhở lại cả nhà:
- Test ở localhost xong phải check lại ở website xem có hoạt động được không
- Ở đây có login tài khoản google phải mở quyền bên Google Cloud Console và webhook để lưu data thanh toán bên PayOS, khi đẩy lên website muốn test lại phải sửa
Thanh Toán Tự Động
💳 Bạn có thể dùng bất kỳ bên thứ 3 nào hỗ trợ thanh toán.
Luồng thanh toán của mình
↓
Tự động tạo mã QR theo gói giá cố định
↓
Khách hàng thanh toán
↓
Hệ thống tự động cập nhật
↓
Nhảy vào data quản trị phía trên
↓
Khách được cấp quyền truy cập tự động
Demo: Chính web tài liệu hướng dẫn
Sau khi bấm vào link - user cần login và thanh toán để ở khoá
- Bấm vào link website
- Popup login
- Thanh toán mã QR
- Tự động tracking thanh toán thành công
Cách làm
Tạo tài khoản - ở đây mình dùng payos - tạo kênh thanh toán
Nếu bạn chưa add ngân hàng, hãy thêm tài khoản hoặc vào Ngân hàng (cột bên trái)
Bấm tạo kênh thanh toán và tích hợp
copy 3 cái API này, gửi lên AI (mình làm phía trên là Antigravity, còn lại để AI lo
Ảnh trên là ảnh dự án cũ nhưng từng bước - còn ảnh này là dự án này, và cần thêm webhook để tracking được thông tin khách hàng chuyển khoản
Có một vài LƯU Ý:
- Bạn sử dụng bên nào cũng được chỉ cần nó cho thanh toán tự động và có webhook báo về
- Webhook để báo cập nhật, nên buộc phải thêm nhé, để user thanh toán xong, user được mở khoá
- Webhook khi đã thay link website phải update lại nhé
Chatbot Tự Động
Chatbot hoạt động như một người chăm sóc khách hàng — trả lời tự động 24/7 theo đúng ngôn ngữ và thông tin của bạn.
Chatbot là gì?
Chatbot về bản chất là một mô hình ngôn ngữ lớn (LLM) — như ChatGPT, Claude, Gemini — được gọi ra để nói chuyện với khách hàng.
Bạn sẽ:
- Training nó bằng ngôn ngữ và thông tin của bạn
- Giới hạn nội dung nó được chia sẻ theo file docs đã chuẩn bị
Chuẩn bị
Mình nạp cho nó transcript của video chia sẻ
Chuẩn bị cả bộ câu hỏi để nạp kiến thức cho AI
RẤT QUAN TRỌNG:
- Cần model (một AI) xử lý những nội dung trên và nó cũng phải có kiến thức ngoài để user hỏi đáp
⇒ Cần gọi model AI ra làm việc khi đó bạn cần có API, ở đây mình dùng với KYMA và có ưu đãi 0.5 đô để bạn test thử trước với KYMA. Vì 1 API mà sẽ gọi được cả: chatGPT, gemini, deepseek…
- Ở đây mình sùng Deepseek để rẻ nhé, còn bạn muốn thông minh và nhanh hơn nữa cứ sử dụng các model đắt tiền nhé
Vào Kyma API và đăng ký (bấm tại ảnh luôn) bạn sẽ được nhận 0.5 đô để test
Vào API key
Đăng ký mới và copy APi là được (dán vào phần comment trên antigravity nhé
API Key
API là thứ để gọi các mô hình ngôn ngữ lớn từ website của bạn.
Khuyến khích: Dùng bên thứ 3 tích hợp sẵn nhiều API (1 API duy nhất, bạn chọn dùng Gemini / GPT / DeepSeek đều được vì họ đã kết nối sẵn).
→ Mình đang kết nối với DeepSeek để làm chatbot.
Cách triển khai
Đây là cách mình đưa ra câu lệnh: mô tả chi tiết, cung cấp các thông tin cho AI để nó xử lý
Thực tế nếu bạn xem video nó là một vòng lặp AI triển khai - mình feedback - AI sửa - mình feedback
Đây là bản cuối khi mình test
Lời cuối cùng của mình
Mình có TẶNG BẠN 10% cho Hostinger Business/VPS với mã PENNYDEAL.
Ngoài ra, bạn cũng có thể nhận $0.5 credit KYMA API để bắt đầu test workflow ngay.
Bạn có thể dùng để tiết kiệm thêm chi phí một chút nhé
📚 Muốn hiểu sâu hơn?
Đọc đến đây — bạn đã thấy được *một phần* những gì mình đang làm.
Nhưng mình nói thật: xem một video, đọc một tài liệu… bạn biết *cái gì*, nhưng chưa chắc làm được *vì sao* và *khi nào* nên dùng nó.
Đó là khoảng cách giữa BIẾT và TỰ BUILD ĐƯỢC
Nếu bạn muốn rút ngắn khoảng cách đó — mình có bộ video đi từ đầu đến cuối, từ đơn giản đến phức tạp, từ tư duy đến thực hành.
Mình có TỔNG HỢP TRỌN BỘ CHIA SẺ chi tiết tại đây!
Bạn có hai lựa chọn lúc này.
Một — tự thử, tự mày mò. Hoàn toàn được.
Hai — nếu bạn muốn hiểu *tại sao* đằng sau mỗi setup, ghép nó vào luồng thực tế của doanh nghiệp như thế nào, tiết kiệm vài tháng thử sai — thì Phương đã đóng gói lại hết rồi.
→ Xem chi tiết tại: pennydinh.click
