n8n-nodes-enhanced-chat
Version:
Enhanced Chat UI for n8n - Complete interactive chat solution with Enhanced Chat Trigger, Chat UI Renderer, HTML Renderer, and Callback Handler nodes. Features dynamic forms, media, WebRTC, and interactive workflows.
126 lines (118 loc) • 4.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>n8n-nodes-enhanced-chat Example</title>
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.header {
text-align: center;
margin-bottom: 30px;
}
.instructions {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
.code-block {
background: #f1f3f4;
padding: 10px;
border-radius: 4px;
font-family: monospace;
font-size: 14px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>n8n-nodes-enhanced-chat Example</h1>
<p>This example demonstrates how to integrate the Enhanced Chat Trigger with the @n8n/chat widget</p>
</div>
<div class="instructions">
<h3>Setup Instructions:</h3>
<ol>
<li>Create a workflow in n8n with the Enhanced Chat Trigger node</li>
<li>Configure the Chat Trigger with your desired settings</li>
<li>Activate the workflow to get the webhook URL</li>
<li>Replace <code>YOUR_WEBHOOK_URL</code> below with your actual webhook URL</li>
<li>Open this HTML file in your browser to test the chat</li>
</ol>
</div>
<div class="code-block">
Webhook URL format: https://your-n8n-instance.com/webhook/[workflow-id]
</div>
<p>The chat widget will appear in the bottom right corner. Click the chat button to start a conversation!</p>
<div class="instructions">
<h3>Enhanced Features:</h3>
<ul>
<li>✅ Session management for conversation continuity</li>
<li>✅ File upload support (images, PDFs, text files)</li>
<li>✅ Callback URL generation for enhanced interactions</li>
<li>✅ Multiple response formats (text, JSON, HTML)</li>
<li>✅ Real-time message processing</li>
</ul>
</div>
</div>
<!-- Chat widget will be embedded here -->
<div id="n8n-chat"></div>
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
// Replace with your actual webhook URL
const webhookUrl = 'YOUR_WEBHOOK_URL';
if (webhookUrl === 'YOUR_WEBHOOK_URL') {
alert('Please replace YOUR_WEBHOOK_URL with your actual n8n webhook URL in the script section of this HTML file.');
} else {
createChat({
webhookUrl: webhookUrl,
webhookConfig: {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
},
target: '#n8n-chat',
mode: 'window',
chatInputKey: 'chatInput',
chatSessionKey: 'sessionId',
loadPreviousSession: true,
allowFileUploads: true,
allowedFilesMimeTypes: 'image/*,application/pdf,text/*',
showWelcomeScreen: true,
defaultLanguage: 'en',
initialMessages: [
'Hi there! 👋',
'I\'m your Enhanced Chat Assistant. How can I help you today?',
'You can send text messages or upload files!'
],
i18n: {
en: {
title: 'Enhanced Chat Assistant',
subtitle: "Powered by n8n-nodes-enhanced-chat",
footer: '',
getStarted: 'Start Chatting',
inputPlaceholder: 'Type your message or upload a file...',
},
},
});
}
</script>
</body>
</html>