Tạo hệ thống chatbot tự động trả lời khách hàng trên WordPress

7 ngày 0 5 4 phút đọc

Chatbot không còn là công nghệ xa lạ, và bạn hoàn toàn có thể triển khai một hệ thống tự động trả lời đơn giản ngay trên website WordPress mà không cần tích hợp nền tảng bên thứ ba như Tawk.to hay Messenger. Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng một chatbot đơn giản bằng JavaScript và WordPress REST API.

Tạo hệ thống chatbot tự động trả lời khách hàng trên WordPress
Mục lục

1. Xác định mục tiêu chatbot

  • Trả lời các câu hỏi thường gặp (FAQ)
  • Hướng dẫn khách truy cập theo kịch bản (ví dụ: tìm sản phẩm, xem bài viết nổi bật…)
  • Thu thập email hoặc yêu cầu hỗ trợ

Lưu ý: Với mục tiêu đơn giản, bạn không cần dùng AI hay NLP phức tạp – chỉ cần kịch bản dạng “if keyword then response”.

2. Tạo bảng dữ liệu lưu kịch bản chatbot

Có 2 cách:

  • Tạo Custom Post Type (vd: chatbot_scenario) chứa từ khóa và phản hồi
  • Hoặc lưu trong file JSON nếu không cần cập nhật thường xuyên
// Ví dụ CPT: chatbot_scenario
// Tiêu đề: từ khóa
// Nội dung: câu trả lời

3. Viết REST API custom để lấy dữ liệu kịch bản

add_action('rest_api_init', function () {
  register_rest_route('mychatbot/v1', '/response', [
    'methods' => 'POST',
    'callback' => 'mychatbot_get_response',
    'permission_callback' => '__return_true'
  ]);
});

function mychatbot_get_response($request) {
  $question = sanitize_text_field($request->get_param('question'));

  $args = [
    'post_type' => 'chatbot_scenario',
    'posts_per_page' => 1,
    's' => $question
  ];

  $query = new WP_Query($args);
  if ($query->have_posts()) {
    $query->the_post();
    return ['answer' => get_the_content()];
  }

  return ['answer' => 'Xin lỗi, tôi chưa hiểu câu hỏi của bạn. Bạn có thể hỏi lại theo cách khác không?'];
}

4. Giao diện chatbot bằng HTML + JS

<div id="chatbot-box">
  <div id="chatbot-messages"></div>
  <input type="text" id="chatbot-input" placeholder="Nhập câu hỏi..." />
</div>

<style>
#chatbot-box { border: 1px solid #ccc; padding: 10px; max-width: 400px; }
#chatbot-messages { max-height: 300px; overflow-y: auto; }
.user-msg { color: blue; }
.bot-msg { color: green; }
</style>

<script>
document.getElementById("chatbot-input").addEventListener("keypress", function(e) {
  if (e.key === "Enter") {
    let msg = this.value;
    this.value = "";
    addMessage("Bạn: " + msg, "user-msg");

    fetch("/wp-json/mychatbot/v1/response", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ question: msg })
    })
    .then(res => res.json())
    .then(data => {
      addMessage("Bot: " + data.answer, "bot-msg");
    });
  }
});

function addMessage(msg, cls) {
  let div = document.createElement("div");
  div.className = cls;
  div.innerText = msg;
  document.getElementById("chatbot-messages").appendChild(div);
}
</script>

5. Mở rộng nâng cao

  • Tự động phát hiện từ khóa theo regex (nhiều biến thể)
  • Ghi lại lịch sử cuộc trò chuyện để phân tích
  • Kết nối với Zapier hoặc webhook để đẩy dữ liệu khách hàng
  • Tích hợp thêm với GPT API để tăng tính tự nhiên khi cần

Kết luận

Chatbot tự động có thể được triển khai ngay trên WordPress với chi phí gần như bằng 0. Nếu bạn biết tận dụng REST API và JavaScript, chatbot này có thể xử lý các tình huống phổ biến mà không cần nhờ đến nền tảng phức tạp. Đây là bước khởi đầu tuyệt vời nếu bạn muốn nâng tầm trải nghiệm người dùng trên site của mình.

Series: Độ chức năng WordPress

Bài Viết Liên Quan

Bình Luận

  • Không có bình luận.