Hướng dẫn chi tiết gắn chatbot N8N vào website của bạn một cách dễ dàng

Viewed 3
n8n chatbot website

Chia sẻ bởi Tù Bà Khuỳm

Bạn đang tìm cách nâng cao trải nghiệm người dùng trên website của mình? Bạn muốn tích hợp một chatbot thông minh, có khả năng tương tác và hỗ trợ khách truy cập, đồng thời kết nối với hệ thống tự động hóa mạnh mẽ như N8N? Bài viết này sẽ hướng dẫn bạn chi tiết cách gắn chatbot N8N vào website một cách đơn giản và hiệu quả, sử dụng một thư viện JavaScript mã nguồn mở tiện lợi.

Trong thời đại số, việc tương tác tức thì với khách hàng là yếu tố then chốt. Chatbot không chỉ giúp giải đáp thắc mắc nhanh chóng mà còn có thể thu thập thông tin, dẫn dắt người dùng, thậm chí là tích hợp với các AI agent để cung cấp những phản hồi thông minh hơn. Khi kết hợp với N8N, bạn có thể mở rộng khả năng của chatbot, tự động hóa các quy trình phức tạp phía sau dựa trên những tương tác của người dùng.

Hãy cùng khám phá giải pháp tuyệt vời này để làm cho website của bạn trở nên sống động và hữu ích hơn bao giờ hết!

Tại sao nên gắn chatbot N8N vào website?

Trước khi đi vào chi tiết kỹ thuật, hãy cùng điểm qua một vài lợi ích nổi bật khi bạn quyết định tích hợp chatbot, đặc biệt là chatbot có khả năng kết nối với N8N, vào trang web của mình:

  • Tăng cường tương tác: Chatbot tạo ra một kênh giao tiếp trực tiếp, giúp người dùng dễ dàng đặt câu hỏi hoặc yêu cầu hỗ trợ mà không cần rời khỏi trang.
  • Hỗ trợ 24/7: Với sự trợ giúp của AI agents được tích hợp qua N8N, chatbot có thể hoạt động suốt ngày đêm, cung cấp thông tin và hỗ trợ cơ bản ngay cả khi bạn không online.
  • Tự động hóa quy trình: N8N là một công cụ tự động hóa quy trình làm việc mạnh mẽ. Khi chatbot của bạn được kết nối với N8N, bạn có thể tự động hóa nhiều tác vụ như:
    • Gửi thông tin khách hàng tiềm năng vào CRM.
    • Tạo ticket hỗ trợ.
    • Gửi email thông báo.
    • Truy vấn dữ liệu từ các nguồn khác và trả về cho người dùng.
  • Cá nhân hóa trải nghiệm: Dựa vào lịch sử chat (nếu được kích hoạt) và thông tin thu thập được, chatbot có thể cung cấp những phản hồi và gợi ý phù hợp hơn với từng người dùng.
  • Dễ dàng triển khai: Với thư viện được giới thiệu trong bài viết này, việc thêm chatbot vào website trở nên vô cùng đơn giản, ngay cả khi bạn không phải là một lập trình viên chuyên nghiệp.

Giới thiệu thư viện chatbot mã nguồn mở

Để giúp việc tích hợp chatbot vào website trở nên dễ dàng hơn, tác giả của video gốc đã phát triển một thư viện JavaScript nhỏ gọn và mã nguồn mở. Thư viện này cho phép bạn nhanh chóng thêm một cửa sổ chat popup vào bất kỳ trang web nào và kết nối nó với một backend xử lý tin nhắn, điển hình ở đây là N8N thông qua webhook.

Ưu điểm của thư viện:

  • Dễ cài đặt: Chỉ cần một vài dòng mã nhúng vào HTML.
  • Tùy biến linh hoạt: Cho phép tùy chỉnh vị trí, màu sắc, tiêu đề của chat popup.
  • Hỗ trợ lưu lịch sử chat: Người dùng có thể xem lại cuộc trò chuyện trước đó (lưu trên Local Storage của trình duyệt).
  • Mã nguồn mở: Bạn có thể tự do tham khảo, chỉnh sửa và đóng góp cho dự án.

Bạn có thể tìm thấy repository của thư viện này trong phần mô tả của video gốc.

Hướng dẫn cài đặt và nhúng chatbot vào website

Có hai cách chính để bạn có thể bắt đầu với thư viện chatbot này: clone toàn bộ repository về để thử nghiệm và tùy chỉnh sâu hơn, hoặc đơn giản là nhúng trực tiếp đoạn mã script vào website của bạn.

Cách 1: Clone repository (dành cho demo và thử nghiệm)

Nếu bạn muốn tìm hiểu sâu hơn về cấu trúc thư viện, chạy các ví dụ demo, hoặc tùy chỉnh mã nguồn, bạn có thể clone repository về máy tính của mình.

  1. Clone repository:
    Mở terminal hoặc command prompt, di chuyển đến thư mục bạn muốn lưu trữ và chạy lệnh:

    git clone [URL_CUA_REPOSITORY]

    (Thay [URL_CUA_REPOSITORY] bằng đường dẫn URL thực tế của thư viện trên GitHub).

  2. Cài đặt dependencies:
    Sau khi clone xong, di chuyển vào thư mục của dự án:

    cd [TEN_THU_MUC_REPOSITORY]

    Tác giả video sử dụng pnpm để quản lý package. Nếu bạn chưa có pnpm, bạn có thể cài đặt nó. Một cách phổ biến là cài nvm (Node Version Manager) trước, sau đó dùng nvm để cài npm và pnpm.
    Khi đã có pnpm, chạy lệnh sau để cài đặt các thư viện cần thiết:

    pnpm install

  3. Chạy server demo:
    Thư viện thường đi kèm với một server giả lập để bạn có thể test nhanh chức năng chat. Server này sẽ nhận tin nhắn từ chat popup và phản hồi lại chính tin nhắn đó. Để khởi động server demo (nếu có), bạn có thể chạy lệnh tương tự như:

    pnpm start

    Sau đó, bạn có thể mở trình duyệt và truy cập vào địa chỉ được cung cấp (thường là http://localhost:xxxx) để xem trang demo và thử nghiệm chat popup.

Cách này phù hợp cho việc phát triển và thử nghiệm các tính năng. Đối với việc triển khai thực tế lên website, cách thứ hai thường đơn giản và nhanh chóng hơn.

Cách 2: Nhúng trực tiếp script vào website (khuyến nghị)

Đây là cách đơn giản nhất để thêm chatbot vào website hiện có của bạn. Bạn chỉ cần chèn một đoạn mã JavaScript vào phần <body> của tệp HTML.

  1. Chuẩn bị đoạn mã script:
    Đoạn mã cơ bản sẽ trông giống như sau:

    <script
    src="[URL_DEN_FILE_SCRIPT_CHATBOT_CDN_HOAC_LOCAL]"
    data-server-url="http://localhost:3000/chat"
    data-title="Chat với chúng tôi"
    data-position="bottom-right"
    data-history-enable="true"
    defer
></script>
    • src: Đường dẫn đến file JavaScript của thư viện chatbot. Đây có thể là đường dẫn CDN (nếu tác giả cung cấp) hoặc đường dẫn đến file script bạn tự host. Trong ví dụ của video, tác giả demo bằng cách copy trực tiếp script.
    • data-server-url: Đây là URL của backend sẽ xử lý tin nhắn. Ban đầu, bạn có thể dùng server giả lập (ví dụ http://localhost:3000/chat nếu bạn đang chạy demo local). Sau này, bạn sẽ thay thế bằng URL webhook của N8N.
    • Các thuộc tính data- khác dùng để cấu hình cho chatbot, chúng ta sẽ tìm hiểu ở phần sau.

  2. Nhúng vào HTML:
    Mở tệp HTML của trang web bạn muốn thêm chatbot. Dán đoạn mã script trên vào bên trong thẻ <body>, thường là trước thẻ đóng </body>.
    Ví dụ:

    <!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website của tôi</title>
</head>
<body>
    <!-- Nội dung website của bạn -->
    <h1>Chào mừng đến với website!</h1>
    <p>Đây là nội dung trang web.</p>

    <!-- Script chatbot -->
    <script
        src="duong_dan_den_file_script_cua_ban/chatbot.js" 
        data-server-url="YOUR_N8N_WEBHOOK_URL_HOAC_BACKEND_URL"
        data-title="Hỗ trợ trực tuyến"
        data-position="bottom-right" 
        data-history-enable="true"
        defer
    ></script>
</body>
</html>

    Sau khi lưu lại và tải lại trang web, bạn sẽ thấy biểu tượng chat popup xuất hiện theo cấu hình.

Cấu hình chi tiết cho chat popup

Thư viện chatbot này cung cấp nhiều tùy chọn cấu hình thông qua các thuộc tính data- trên thẻ <script>. Dưới đây là các thuộc tính quan trọng:

  • data-server-url (bắt buộc):
    URL của endpoint mà chatbot sẽ gửi tin nhắn đến và nhận phản hồi. Đây sẽ là URL webhook N8N của bạn hoặc một server backend khác.
    Ví dụ: data-server-url="https://your-n8n-instance.com/webhook/chatbot"

  • data-title:
    Tiêu đề hiển thị trên đầu cửa sổ chat.
    Ví dụ: data-title="Chat với AI"

  • data-position:
    Vị trí của biểu tượng chat popup trên màn hình.
    Các giá trị thường dùng:

    • bottom-right (mặc định): Góc dưới bên phải.
    • bottom-left: Góc dưới bên trái.
      Ví dụ: data-position="bottom-left"

  • data-history-enable:
    Bật hoặc tắt tính năng lưu trữ lịch sử chat. Nếu bật (true), lịch sử sẽ được lưu vào Local Storage của trình duyệt người dùng.
    Ví dụ: data-history-enable="true"
    Khi tính năng này được bật, thường sẽ có một nút cho phép người dùng xóa lịch sử chat.

  • data-theme-color (tùy chọn):
    Cho phép bạn thay đổi màu sắc chủ đạo của biểu tượng chat và một số yếu tố trong cửa sổ chat.
    Ví dụ: data-theme-color="orange" (bạn có thể thử nghiệm với các tên màu hoặc mã màu hex).

  • data-welcome-message (tùy chọn):
    Tin nhắn chào mừng hiển thị khi người dùng mở cửa sổ chat lần đầu hoặc khi chưa có tin nhắn nào.
    Ví dụ: data-welcome-message="Chào bạn, tôi có thể giúp gì cho bạn?"

Hãy thử nghiệm với các giá trị khác nhau để tùy chỉnh chat popup sao cho phù hợp với giao diện và nhu cầu của website bạn.

Tích hợp chatbot với N8N

Đây là phần thú vị nhất: kết nối chatbot trên website của bạn với một workflow N8N để xử lý logic và phản hồi tin nhắn.

Bước 1: Tạo Webhook Node trong N8N

  1. Đăng nhập vào N8N instance của bạn.

  2. Tạo một workflow mới hoặc mở một workflow hiện có.

  3. Thêm một node "Webhook" (tìm trong danh sách node hoặc gõ "Webhook").

  4. Cấu hình Webhook Node:

    • Authentication: Ban đầu, bạn có thể để là "None" cho dễ test. Trong môi trường production, bạn nên cân nhắc sử dụng các phương thức xác thực an toàn hơn.
    • HTTP Method: Chọn POST.
    • Path: N8N sẽ tự tạo một path duy nhất cho webhook này.

  5. Sau khi cấu hình, N8N sẽ cung cấp cho bạn một Webhook URL (Test URL và Production URL). Copy URL này (ưu tiên Test URL khi đang phát triển). Đây chính là giá trị bạn sẽ sử dụng cho thuộc tính data-server-url trong script chatbot.

    Ví dụ Webhook Node trong N8N (Hình ảnh minh họa, không có sẵn để nhúng)

Bước 2: Cập nhật data-server-url trong script chatbot

Quay lại mã nhúng chatbot trên website của bạn, thay thế giá trị của data-server-url bằng URL webhook N8N bạn vừa copy.

Ví dụ:

<script
    src="path/to/your/chatbot-script.js"
    data-server-url="https://your-n8n-instance.com/webhook-test/your-unique-path" 
    data-title="Hỗ trợ N8N"
    defer
></script>

Bước 3: Xử lý và phản hồi tin nhắn trong N8N

Bây giờ, bạn cần cấu hình workflow N8N để nhận tin nhắn từ chatbot và gửi phản hồi lại.

  1. Kích hoạt Webhook Node:
    Trong N8N, sau khi cấu hình Webhook Node, bạn cần "Execute Node" hoặc "Listen for Test Event" để N8N bắt đầu lắng nghe các request gửi đến URL webhook.

  2. Gửi tin nhắn thử từ chatbot:
    Mở website của bạn, nhấp vào chat popup và gửi một tin nhắn thử (ví dụ: "Xin chào").

  3. Kiểm tra dữ liệu nhận được trong N8N:
    Nếu mọi thứ được cấu hình đúng, Webhook Node trong N8N sẽ nhận được dữ liệu. Dữ liệu này thường nằm trong body của request. Cấu trúc cụ thể có thể khác nhau tùy theo cách thư viện chatbot gửi đi, nhưng thường sẽ có một trường chứa nội dung tin nhắn, ví dụ: $json.body.message hoặc $json.body.text.

  4. Thêm Node "Respond to Webhook":
    Để gửi phản hồi lại cho chatbot, bạn cần thêm một node "Respond to Webhook" vào workflow N8N, kết nối sau Webhook Node (hoặc sau các node xử lý logic khác).

  5. Cấu hình Node "Respond to Webhook":

    • Trong node "Respond to Webhook", bạn cần định dạng dữ liệu trả về theo cách mà thư viện chatbot mong đợi. Dựa trên video, chatbot dường như mong đợi một đối tượng JSON chứa một khóa, ví dụ message, với giá trị là nội dung phản hồi.

    • Ví dụ cấu hình phản hồi:
      Trong phần "Body" của node "Respond to Webhook", bạn có thể đặt:

      {
    "message": "N8N đã nhận được tin nhắn của bạn: {{$json.body.message}}"
}

      Ở đây, {{$json.body.message}} là một biểu thức của N8N để lấy nội dung tin nhắn gốc từ Webhook Node.

    • Lưu ý quan trọng về history: Tác giả video có đề cập đến việc nếu bạn muốn duy trì chính xác lịch sử chat khi N8N phản hồi, bạn có thể cần phải gửi lại toàn bộ mảng history (nếu thư viện chatbot gửi nó lên). Tuy nhiên, với cách thiết lập đơn giản, chỉ cần trả về message mới là đủ, thư viện phía client sẽ tự xử lý việc thêm tin nhắn mới vào lịch sử. Đoạn transcript có một chút nhầm lẫn ban đầu của tác giả, nhưng cuối cùng chỉ cần phản hồi đơn giản như sau:
      Workflow N8N: Webhook -> Set (hoặc Function để tạo response) -> Respond to Webhook
      Trong node Set (hoặc tương tự), bạn tạo một trường ví dụ responseMessage.
      Trong Respond to Webhook, phần body sẽ là:

      {
    "message": "{{$node["Set"].json["responseMessage"]}}"
}

  6. Test lại toàn bộ luồng:
    Lưu và kích hoạt (activate) workflow N8N của bạn. Sau đó, quay lại website và gửi tin nhắn mới qua chatbot. Bạn sẽ thấy phản hồi từ N8N hiển thị trong cửa sổ chat.

    Ví dụ workflow N8N đơn giản:

    • Node 1: Webhook (nhận {"message": "Người dùng chat gì đó"})
    • Node 2: Set Node
      • Set response_text = Chào bạn, tôi là Bot từ N8N. Bạn đã nói: {{$json.body.message}}
    • Node 3: Respond to Webhook
      • Body: {"message": "{{$node["Set"].json["response_text"]}}"}

Bây giờ, bạn đã có một chatbot hoạt động trên website, được điều khiển bởi N8N! Bạn có thể mở rộng workflow N8N với nhiều node hơn để tích hợp AI (ví dụ: OpenAI, Hugging Face), kết nối với database, gửi email, v.v.

Tùy chỉnh giao diện và các tính năng khác

Thư viện chatbot này còn cung cấp một số tùy chỉnh thêm thông qua các ví dụ demo đi kèm trong repository.

  • Thay đổi màu sắc (Theme color):
    Như đã đề cập, bạn có thể sử dụng thuộc tính data-theme-color với các tên màu (ví dụ: orange, blue) hoặc mã màu hex để thay đổi màu sắc chủ đạo của icon và cửa sổ chat. Hãy thử nghiệm để tìm ra màu phù hợp nhất với thiết kế website của bạn.

  • Thay đổi tiêu đề và tin nhắn mặc định:
    Sử dụng data-title cho tiêu đề cửa sổ chat và data-welcome-message (nếu thư viện hỗ trợ hoặc bạn tùy chỉnh thêm) cho tin nhắn chào mừng.

  • Khám phá layout demo:
    Nếu bạn đã clone repository, hãy xem qua các file ví dụ (.html) trong thư mục demo. Chúng có thể minh họa cách sử dụng các tùy chọn cấu hình khác nhau hoặc các layout khác nhau.

Lưu ý quan trọng và hướng phát triển

  • Xác thực (Authentication):
    Trong video, tác giả đề cập rằng tính năng xác thực cho webhook chưa được implement trong thư viện hoặc ví dụ cơ bản. Khi triển khai lên môi trường production, việc bảo vệ webhook N8N của bạn là rất quan trọng để tránh bị lạm dụng. Bạn nên tìm hiểu các cơ chế xác thực của N8N (ví dụ: Header Auth, Basic Auth) và tùy chỉnh script chatbot hoặc server trung gian (nếu có) để gửi kèm thông tin xác thực.

  • Xử lý lỗi và trạng thái:
    Cân nhắc việc cải thiện cách chatbot hiển thị lỗi khi không kết nối được với server N8N hoặc khi N8N trả về lỗi.

  • Đóng góp cho dự án:
    Vì đây là một dự án mã nguồn mở, nếu bạn có ý tưởng cải tiến hoặc sửa lỗi, đừng ngần ngại đóng góp cho tác giả.

Kết luận

Việc gắn chatbot N8N vào website không còn là một nhiệm vụ phức tạp nhờ vào các công cụ và thư viện hỗ trợ như đã trình bày. Bằng cách sử dụng thư viện JavaScript mã nguồn mở này, bạn có thể nhanh chóng thiết lập một kênh tương tác hiệu quả trên trang web của mình, đồng thời tận dụng sức mạnh tự động hóa của N8N để tạo ra những trải nghiệm người dùng thông minh và liền mạch.

Từ việc trả lời câu hỏi đơn giản đến việc tích hợp với các AI agent phức tạp, khả năng là vô tận. Hãy bắt đầu thử nghiệm ngay hôm nay, tùy chỉnh chatbot theo nhu cầu và khám phá những lợi ích mà nó mang lại cho website cũng như cho người dùng của bạn. Đừng quên tham khảo repository của thư viện để biết thêm chi tiết và các bản cập nhật mới nhất. Chúc bạn thành công!

0 Answers
Related Questions
Xây dựng workflow n8n với AI phân tích quảng cáo Facebook: Chìa khoá nắm bắt chiến lược đối thủ
Seedance và n8n: Tự động hóa tạo video AI hiệu quả vượt trội
Tự động hóa Video ASMR: Bí quyết tạo và đăng nội dung viral không ngừng với AI
Tự động hóa ở tầm cao mới: Dùng AI Agent trong n8n để xây dựng... một AI Agent khác
Hướng dẫn tự host n8n AI agents miễn phí trên máy tính cá nhân
Tự động hóa video AI với Google Veo 3 và n8n: Hướng dẫn chi tiết cho người mới bắt đầu