N8n hiện tại khá mạnh trong việc làm automation kết hợp với AI. Như tiêu đề thì hôm nay mình demo cái workflow tạo cửa sổ chat ngay trên website/landingpage bằng n8n nhé.
Bạn có thể trải nghiệm tại đây nhé. Workflow này mình setup bằng n8n + Google gemini nha.
Dưới đây là hình ảnh workflow mình setup. Cái này mình làm đơn giản thôi nha vì đây là demo mà.
Chức năng của các node:
- When chat message received: dùng để nhận dữ liệu đầu vào (input). Đây cũng là node để cấu hình hiển thị thông tin khi chat.
- Switch: dùng để check điều kiện là loadPreviousSession hoặc sendMessage khi workflow hoạt động. Mình dùng node này để check điều kiện và không cho dữ liệu chạy thẳng vào AI Agent
- AI Agent: Bạn điền prompt hoặc thứ bạn muốn vào đây
- Chat Model: Dùng GPT, gemini, anthropic, Ollama … (có gì thì dùng đó, nhớ điều key API là được)
- Window Buffer Memory: Cái này setup để nó nhớ xem trước đó đã trao đổi cái gì
- Tool: Nếu bạn có tài liệu riêng hoặc chạy workflow riêng (kiểu chỉ trả lời dựa trên các tài liệu đó) thì setup cái này. Lên youtube để xem nha vì có nhiều lắm.
Cấu hình node để hiển thị trên website hoặc landingpage
Bạn copy cái link được tạo ra.
Điền cái link copy đó vào đoạn code bên dưới
<div id="iframe-container" style="width: 100%; height: 100vh; margin: 0; padding: 0;">
<iframe id="dynamic-iframe" src="điền cái link vào đây" style="width: 100%; height: 100%; border: none;" allow="fullscreen" frameborder="0">
</iframe>
</div>
<script>
const iframe = document.getElementById('dynamic-iframe');
iframe.onload = () => {
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
};
</script>Xong thì dán đoạn code này và head nha. Nếu ai biết code thì tùy chỉnh nó dán vào đâu cũng được hoặc chuyển nó thành dạng popup nhé.
Ngoài ra bạn có thể đọc tài liệu này của n8n để biết thêm các thông tin khác về cái mình vừa hướng dẫn nhé.
Có gì không biết thì hỏi AI tiếp nha.
Lưu ý:
- Bản localhost sẽ không dùng được nha, bạn dùng bản cloud hoặc selfhost trỏ domain về thì mới dùng được
- Cách này không thay thế được cái Widget chat chuyên cho website nha, nên sử dụng thật thông minh để đạt hiệu quả cao nhất. Đừng bắt n8n nó gánh quá nhiều thứ mà nó không chuyên.
Thế là xong rồi. Thử và cảm nhận nhé bạn.
