Tạo chatbot AI trên WordPress với n8n là cách mình dùng để biến website thành một điểm nhận câu hỏi, chuyển dữ liệu về workflow rồi trả câu trả lời ra ngay cửa sổ chat. Trong video hướng dẫn mình đã để link tải popup chat. Còn trong bài này, mình đi chi tiết từ tải source, sửa file, build, upload cho đến chuyển webhook n8n sang chế độ chạy thật.

Bài không hứa rằng cứ gắn chatbot là có thu nhập. Phần “kiếm tiền” nằm ở cách bạn đóng gói dịch vụ: cài đặt, tùy biến giao diện, thiết kế workflow, tích hợp dữ liệu và bảo trì cho khách hàng.

Video hướng dẫn tạo chatbot AI WordPress với n8n

Mình đã quay toàn bộ quá trình tạo chatbot trong video dưới đây. Bạn có thể xem trước để hiểu cách các phần kết nối với nhau, sau đó quay lại từng bước trong bài để lấy đường dẫn và đoạn code cần dùng.

Bạn có thể xem thêm video dưới đây để tham khảo cách tạo workflow AI trong n8n:

Nếu bạn muốn trải nghiệm workflow mẫu trước khi tự làm, có thể vào: https://nguyenthaimmo.com/Workflow.

Mô hình hoạt động của chatbot WordPress và n8n

1. Widget just-chat hiển thị nút và cửa sổ chat trên website.
2. Khi người dùng gửi tin nhắn, widget POST dữ liệu đến webhook n8n.
3. Workflow n8n xử lý câu hỏi, có thể gọi mô hình AI, tra dữ liệu hoặc chạy các bước tự động hóa.
4. n8n trả JSON có trường response; widget hiển thị nội dung đó cho người dùng.

Theo README của dự án, payload còn có thời gian, session ID, URL trang hiện tại và có thể kèm lịch sử chat. Vì dữ liệu được gửi sang webhook, bạn cần xác định rõ nội dung nào được phép thu thập, thời gian lưu và cách thông báo cho người dùng.

Cần chuẩn bị gì?

• Một website WordPress và quyền truy cập hosting hoặc SFTP.
• Một n8n instance có HTTPS và workflow nhận webhook.
• Máy tính có Node.js 18 trở lên; npm hoặc pnpm.
• Trình soạn thảo mã như VS Code.
• Bản sao lưu website hoặc môi trường staging để thử trước.

Góc nhìn NguyenThaiMMO: mình chọn tự host file widget vì dễ kiểm soát phiên bản và tùy biến cho từng dự án. Nhưng tự host cũng đồng nghĩa bạn phải tự cập nhật, kiểm tra cache, bảo mật webhook và theo dõi lỗi. Đây là phần giá trị thật khi làm dịch vụ cho khách, không chỉ là dán một đoạn script.

Bước 1: Tải source popup chat từ GitHub

Mở repository gốc: draphonix/just-chat trên GitHub. Nhấn Code → Download ZIP, lưu file về máy rồi giải nén. Tùy cách tải, thư mục có thể là just-chat-main hoặc just-chat.

Source này là Web Component viết bằng TypeScript, dùng Shadow DOM để cô lập giao diện và gửi dữ liệu tới webhook. README cũng mô tả cách dùng CDN; trong bài mình vẫn giữ phương án tự build và tự host vì phù hợp với mục tiêu tùy chỉnh.

Bước 2: Sửa nội dung và giao diện trong chat-window.ts

Mở thư mục vừa giải nén bằng VS Code rồi tìm file:

just-chat-main/src/components/chat-window.ts

Đây là file TypeScript trong dự án Node.js, không phải file JavaScript đã build để tải thẳng lên WordPress. Bạn có thể sửa nhãn, bố cục hoặc logic giao diện theo nhu cầu. Mỗi lần sửa source, bạn phải build lại để tạo bundle mới trong thư mục dist.

Trước khi sửa nhiều, mình thường tạo một bản sao Git hoặc nén cả thư mục. Nếu build lỗi, bạn có thể so sánh phần vừa đổi thay vì tải lại từ đầu.

Bước 3: Cài dependency và build file production

Mở Terminal tại thư mục dự án. Với npm, chạy:

cd just-chat-main
npm install
npm run build

Nếu dùng pnpm theo hướng dẫn của repository:

cd just-chat-main
pnpm install
pnpm build

Khi build thành công, mở thư mục:

just-chat-main/dist

File cần dùng cho WordPress là just-chat.umd.js. Nếu Terminal báo không tìm thấy lệnh, hãy kiểm tra Node.js, npm hoặc pnpm đã được cài và khởi động lại Terminal.

Bước 4: Upload just-chat.umd.js lên hosting

Trong cPanel File Manager, mở:

public_html/wp-content/uploads/

Tạo thư mục just-chat, upload just-chat.umd.js vào đó rồi lưu. Đường dẫn công khai thường là:

https://tenmiencuaban.com/wp-content/uploads/just-chat/just-chat.umd.js

Sao chép URL file và mở bằng tab ẩn danh. Nếu trình duyệt trả lỗi 404 hoặc 403, hãy kiểm tra tên file, quyền đọc thư mục, firewall và quy tắc chặn file JavaScript. Sau mỗi lần thay bundle, bạn cũng cần xóa cache WordPress, LiteSpeed hoặc CDN nếu đang sử dụng.

Bước 5: Chuẩn bị webhook n8n

Trong workflow n8n, Webhook node có hai URL khác nhau:

• /webhook-test/... dùng khi bạn đang nghe sự kiện thử trong editor.
• /webhook/... dùng cho website chạy thật sau khi workflow đã được activate.

Đây là lỗi mình thấy khá nhiều: test trong n8n thì chạy, nhưng đóng editor hoặc hết phiên test là chatbot trên website không phản hồi. Khi đưa lên production, hãy bật workflow và thay URL test bằng Production URL.

Webhook cần chấp nhận POST và trả JSON theo dạng widget mong đợi:

{
  "response": "Nội dung chatbot trả về"
}

Bước 6: Chèn script chatbot vào WordPress

Dưới đây là đoạn script mình sử dụng trong video:

<script src="https://tên miền lưu trữ/wp-content/uploads/just-chat/just-chat.umd.js"
        data-webhook-url="https://tên miền N8N của bạn/webhook-test/id "
        data-title="Tiêu đề bạn muốn"
        data-welcome-message="Chào bạn! Tôi có thể giúp gì cho bạn?"
        data-theme-color="#de1414cc"
        data-history-enabled="true"
        data-history-clear-button="true"
        defer>
</script>

Bạn cần thay URL file, URL webhook và nội dung hiển thị. Khi chạy thật, xóa khoảng trắng thừa sau ID và đổi webhook-test thành webhook. Ví dụ production:

<script src="https://tenmiencuaban.com/wp-content/uploads/just-chat/just-chat.umd.js"
        data-webhook-url="https://n8n.tenmiencuaban.com/webhook/chat-ai"
        data-title="Trợ lý NguyenThaiMMO"
        data-welcome-message="Chào bạn! Mình có thể giúp gì?"
        data-theme-color="#de1414cc"
        data-history-enabled="true"
        data-history-clear-button="true"
        defer>
</script>

Cách chèn nhanh để kiểm tra

Dùng công cụ chèn code header/footer đang có trên website hoặc vùng Custom HTML mà theme hỗ trợ. Dán script trước thẻ đóng </body> nếu công cụ cho phép, lưu và xóa cache. Phương án này nhanh để test nhưng bạn cần ghi lại nơi đã chèn để sau này bảo trì.

Cách chèn bằng child theme để quản lý rõ hơn

WordPress khuyến nghị enqueue script qua hook wp_enqueue_scripts thay vì hardcode trực tiếp vào file header. Vì widget đọc các thuộc tính data-* trên thẻ script, có thể enqueue rồi dùng filter để bổ sung thuộc tính:

add_action( 'wp_enqueue_scripts', 'ntmmo_enqueue_just_chat' );
function ntmmo_enqueue_just_chat() {
    wp_enqueue_script(
        'ntmmo-just-chat',
        content_url( '/uploads/just-chat/just-chat.umd.js' ),
        array(),
        '0.1.3',
        true
    );
}

add_filter( 'script_loader_tag', 'ntmmo_just_chat_data_attributes', 10, 3 );
function ntmmo_just_chat_data_attributes( $tag, $handle, $src ) {
    if ( 'ntmmo-just-chat' !== $handle ) {
        return $tag;
    }

    return sprintf(
        '<script src="%1$s" data-webhook-url="%2$s" data-title="%3$s" data-welcome-message="%4$s" data-theme-color="#de1414cc" data-history-enabled="true" data-history-clear-button="true" defer></script>',
        esc_url( $src ),
        esc_url( 'https://n8n.tenmiencuaban.com/webhook/chat-ai' ),
        esc_attr( 'Trợ lý NguyenThaiMMO' ),
        esc_attr( 'Chào bạn! Mình có thể giúp gì?' )
    );
}

Lưu đoạn PHP ở public_html/wp-content/themes/ten-child-theme/functions.php. Hãy tải bản sao lưu file trước khi sửa; nếu website lỗi trắng trang, khôi phục ngay bản cũ bằng cPanel hoặc SFTP.

Bước 7: Checklist kiểm tra sau khi cài

1. Activate workflow n8n và dùng Production URL.
2. Mở website bằng cửa sổ ẩn danh, kiểm tra nút chat có xuất hiện.
3. Gửi câu ngắn, xem execution trong n8n có nhận payload không.
4. Kiểm tra node cuối trả JSON có trường response.
5. Nếu trình duyệt báo CORS, cấu hình domain được phép ở phía webhook/proxy.
6. Kiểm tra trên mobile, bàn phím và nút xóa lịch sử.
7. Không đưa API key hoặc credential vào file JavaScript phía trình duyệt.

Cách kiếm tiền với chatbot AI WordPress và n8n

Mình sẽ nhìn nó như một dịch vụ có nhiều lớp, thay vì bán mỗi đoạn code:

• Gói cài đặt cơ bản: gắn widget, kết nối webhook, đổi màu và lời chào.
• Gói chatbot theo dữ liệu: thiết kế workflow tra FAQ, tài liệu, sản phẩm hoặc quy trình nội bộ.
• Gói thương mại điện tử: hỗ trợ hỏi sản phẩm, thu lead, chuyển người dùng sang nhân viên khi cần.
• Gói bảo trì: theo dõi execution, chi phí AI, lỗi webhook, cập nhật bundle và sao lưu workflow.
• Gói đào tạo: bàn giao tài liệu, video và buổi hướng dẫn cho đội vận hành.

Thu nhập thực tế phụ thuộc vào phạm vi, độ phức tạp, chi phí mô hình AI, hạ tầng và khả năng bán dịch vụ. Khi báo giá, bạn nên tách phí triển khai ban đầu, phí vận hành hàng tháng và phần phát sinh theo lượng sử dụng.

Góc nhìn NguyenThaiMMO: ba điều mình không bỏ qua

1. Luôn giữ quyền kiểm soát: tự host bundle giúp mình chủ động phiên bản, nhưng phải ghi lại ngày build và source tương ứng.
2. Không để bí mật ở frontend: mọi API key phải nằm trong n8n hoặc hệ thống backend, không đặt trong thẻ script.
3. Đo bằng kết quả thật: chatbot cần giảm câu hỏi lặp, thu lead đúng hoặc hỗ trợ chuyển đổi; số tin nhắn nhiều chưa chắc đã tạo giá trị.

Câu hỏi thường gặp

Có bắt buộc phải tự build just-chat không?

Không. Repository có hướng dẫn dùng CDN. Tự build phù hợp khi bạn muốn sửa source và tự kiểm soát file; CDN nhanh hơn cho thử nghiệm ban đầu.

Tại sao webhook-test chạy nhưng chatbot production không chạy?

URL test chỉ hoạt động trong phiên lắng nghe thử. Hãy activate workflow và dùng Production URL có đường dẫn /webhook/....

File just-chat.umd.js nên lưu ở đâu?

Trong hướng dẫn này, file được lưu tại /wp-content/uploads/just-chat/just-chat.umd.js. Bạn cũng có thể đóng gói thành plugin riêng nếu cần quản lý chuyên nghiệp hơn.

Có thể dùng chatbot cho website bán hàng không?

Có, nhưng cần thiết kế dữ liệu sản phẩm, quy tắc trả lời và bước chuyển cho nhân viên. Không nên để AI tự đưa ra cam kết giá, tồn kho hoặc chính sách khi chưa có dữ liệu xác thực.

Có nên bật lưu lịch sử chat?

Chỉ bật khi phù hợp với trải nghiệm và chính sách quyền riêng tư. Theo README của widget, lịch sử có thể được lưu trong LocalStorage theo webhook URL.

Nguồn tham khảo

• GitHub chính thức của just-chat — cài đặt, build, cấu hình và định dạng webhook.
• n8n Docs — Webhook node.
• WordPress Developer Resources — wp_enqueue_scripts.
• Google Search Central — nội dung hữu ích và đáng tin cậy.

Bạn nên chạy thử bằng Test URL trước, kiểm tra dữ liệu vào và câu trả lời trả ra đúng cấu trúc. Khi mọi thứ đã ổn, hãy activate workflow, đổi sang Production URL rồi mở website bằng cửa sổ ẩn danh để kiểm tra lại từ đầu đến cuối.