Currently, n8n is powerful for automating workflows combined with AI. Today, I’ll demo a workflow to create a chat window directly on your website or landing page using n8n.
You can experience it [n8n]. This workflow is built using n8n + Google Gemini.
Below is an image of the workflow I set up. It’s kept simple since this is just a demo.
Node Functions:
- When Chat Message Received:
- Used to receive input data.
- Also the node where you configure the display information for the chat interface.
- Switch:
- Checks conditions like
loadPreviousSessionorsendMessagewhen the workflow runs. - Ensures that data doesn’t go straight to the AI Agent without condition checking.
- Checks conditions like
- AI Agent:
- You can input your prompt or desired content here.
- Chat Model:
- Use GPT, Gemini, Anthropic, Ollama, or any other model available. Just make sure to provide the API key.
- Window Buffer Memory:
- Configured to retain prior exchanges.
- Tool:
- If you have custom documents or workflows (e.g., only responding based on specific documents), set this up. Check YouTube for tutorials as there are plenty available.
Configuring the Node for Display on Your Website or Landing Page:
- Copy the generated link.
- Paste the copied link into the code snippet below.
<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>3. Insert the code snippet into the <head> section. If you’re familiar with coding, customize and place it wherever appropriate or convert it into a popup format.
You can also read n8n documentation for more details about this guide.
Notes:
- The localhost version won’t work. Use the cloud version or self-hosted version with a domain pointed to it.
- This approach doesn’t replace specialized chat widgets for websites. Use it smartly to achieve optimal results. Avoid overloading n8n with tasks it isn’t designed for.
