Skip to content

Instantly share code, notes, and snippets.

@xaif

xaif/gist:377c2c5eee03217261e9434d84ae4727

Created September 30, 2025 12:14
Show Gist options
  • Save xaif/377c2c5eee03217261e9434d84ae4727 to your computer and use it in GitHub Desktop.
Save xaif/377c2c5eee03217261e9434d84ae4727 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>n8n Chat Widget</title>
<!-- n8n Chat Styles -->
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<!-- Custom Styling - shadcn/ui Inspired -->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body, #n8n-chat {
width: 100%;
height: 100%;
overflow: hidden;
}
:root {
/* shadcn-inspired color palette */
--chat--color-primary: #18181B;
--chat--color-primary-shade-50: #27272A;
--chat--color-primary-shade-100: #3F3F46;
--chat--color-secondary: #3B82F6;
--chat--color-secondary-shade-50: #2563EB;
/* Neutral colors */
--chat--color-white: #FFFFFF;
--chat--color-light: #FAFAFA;
--chat--color-light-shade-50: #F4F4F5;
--chat--color-light-shade-100: #E4E4E7;
--chat--color-medium: #A1A1AA;
--chat--color-dark: #18181B;
--chat--color-disabled: #71717A;
--chat--color-typing: #52525B;
/* Modern spacing and styling */
--chat--spacing: 1rem;
--chat--border-radius: 0.75rem;
--chat--transition-duration: 0.2s;
/* Header - Clean dark theme */
--chat--header--padding: 1.5rem;
--chat--header--background: #18181B;
--chat--header--color: #FFFFFF;
--chat--header--border-bottom: 1px solid #27272A;
/* Typography */
--chat--heading--font-size: 1.25rem;
--chat--subtitle--font-size: 0.875rem;
--chat--subtitle--line-height: 1.5;
/* Message styling */
--chat--message--font-size: 0.9375rem;
--chat--message--padding: 0.75rem 1rem;
--chat--message--border-radius: 0.75rem;
--chat--message-line-height: 1.6;
/* Bot messages */
--chat--message--bot--background: #F4F4F5;
--chat--message--bot--color: #18181B;
--chat--message--bot--border: none;
/* User messages */
--chat--message--user--background: #3B82F6;
--chat--message--user--color: #FFFFFF;
--chat--message--user--border: none;
/* Code blocks */
--chat--message--pre--background: #E4E4E7;
/* Input area */
--chat--textarea--height: 60px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #FAFAFA;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* User messages styling */
.chat-message-from-user,
[class*="user"] .chat-message-markdown,
[class*="user"] [class*="message"],
[class*="User"] > div,
[class*="User"] [class*="markdown"] {
background: #3B82F6 !important;
color: #FFFFFF !important;
border: none !important;
box-shadow: none !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
}
/* Bot messages styling */
.chat-message-from-bot,
[class*="bot"] .chat-message-markdown,
[class*="bot"] [class*="message"],
[class*="Bot"] > div,
[class*="Bot"] [class*="markdown"] {
background: #F4F4F5 !important;
color: #18181B !important;
border: none !important;
box-shadow: none !important;
font-weight: 400 !important;
}
/* Remove borders on message containers */
[class*="message"] {
border: none !important;
}
/* Input field styling */
textarea[class*="input"],
input[class*="input"] {
border: 1px solid #E4E4E7 !important;
background: #FFFFFF !important;
border-radius: 0.5rem !important;
}
textarea[class*="input"]:focus,
input[class*="input"]:focus {
border-color: #3B82F6 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
/* Send button */
button[class*="send"] {
background: #3B82F6 !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 0.5rem !important;
font-weight: 500 !important;
transition: all 0.2s !important;
}
button[class*="send"]:hover {
background: #2563EB !important;
}
/* Scrollbar styling */
[class*="messages"]::-webkit-scrollbar {
width: 6px;
}
[class*="messages"]::-webkit-scrollbar-track {
background: transparent;
}
[class*="messages"]::-webkit-scrollbar-thumb {
background: #E4E4E7;
border-radius: 3px;
}
[class*="messages"]::-webkit-scrollbar-thumb:hover {
background: #D4D4D8;
}
</style>
</head>
<body>
<!-- Chat widget container -->
<div id="n8n-chat"></div>
<!-- n8n Chat Script -->
<script type="module">
import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
createChat({
// Your n8n webhook URL
webhookUrl: 'https://n8n.fiaxe.com/webhook/5e961732-3fbd-4ae9-ba98-68b16ad711ea/chat',
// Fullscreen mode for iframe
mode: 'fullscreen',
// Target container
target: '#n8n-chat',
// Load previous conversation
loadPreviousSession: true,
// No welcome screen in iframe
showWelcomeScreen: false,
// Initial messages
initialMessages: [
'Hi there! 👋',
'How can I help you today?'
],
// Custom text
i18n: {
en: {
title: 'Chat with us',
subtitle: "We're here to help you 24/7",
footer: '',
getStarted: 'New Conversation',
inputPlaceholder: 'Type your message...',
},
},
// Optional features
allowFileUploads: false,
enableStreaming: false,
// Keys
chatInputKey: 'chatInput',
chatSessionKey: 'sessionId',
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment