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.
Bài viết liên quan
- Bám đuổi khách hàng trên Messenger
- Đưa khách hàng từ Landingpage về Messenger khi chạy chuyển đổi trên Facebook hoặc TikTok – P1
- Tối ưu khách hàng cũ bằng Zalo OA
- Cách lựa chọn phần mềm quản lý bán hàng phù hợp cho nhu cầu của bạn.
- Hướng dẫn lấy thông tin đơn hàng Shopee về n8n/AnyCross
- Hướng dẫn tạo Landingpage bằng AI
- n8n là gì? Hướng dẫn cài đặt n8n từ A đến Z
- Hướng dẫn xuất dữ liệu đầu ra khi dùng AI với n8n theo đúng định dạng yêu cầu
- Hướng dẫn tạo ảnh trên midjourney sử dụng AI
- AI Automation miễn phí: hướng dẫn chi tiết
- Hướng dẫn toàn tập: Đẩy data về Base của Larksuite áp dụng trong ngành ecom, dịch vụ
