n8n Chat Widget

Professional & fully customizable chat widget for n8n workflows. Works with React, Angular, Vue, and any web application.

Features

• Framework Agnostic - Works with React, Angular, Vue, plain HTML, Wix, WordPress, Shopify, and more
• Shadow DOM - Complete style isolation, no CSS conflicts
• Fully Customizable - Colors, fonts, sizes, positions, branding
• Persistent History - Conversations saved in browser storage
• Mobile Responsive - Works beautifully on all devices
• TypeScript Support - Full type definitions included
• Lightweight - Small bundle size, no dependencies

Installation

NPM

npm install cti-chat-widget

CDN / Script Tag

<script src="https://cdn.jsdelivr.net/npm/cti-chat-widget/dist/chat-widget.js"></script>

Quick Start

Script Tag (HTML, Wix, WordPress, etc.)

<script src="https://cdn.jsdelivr.net/npm/cti-chat-widget/dist/chat-widget.js"></script>
<script>
  ChatWidget.init({
    apiUrl: 'https://your-n8n.com/webhook/chat',
    title: 'AI Assistant',
    primaryColor: '#6366f1'
  });
</script>

React

import { useEffect } from 'react';
import ChatWidget from 'cti-chat-widget';

function App() {
  useEffect(() => {
    ChatWidget.init({
      apiUrl: 'https://your-n8n.com/webhook/chat',
      title: 'AI Assistant'
    });

    return () => ChatWidget.destroy();
  }, []);

  return <div>Your App</div>;
}

Angular

import { Component, OnInit, OnDestroy } from '@angular/core';
import ChatWidget from 'cti-chat-widget';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit, OnDestroy {
  ngOnInit() {
    ChatWidget.init({
      apiUrl: 'https://your-n8n.com/webhook/chat'
    });
  }

  ngOnDestroy() {
    ChatWidget.destroy();
  }
}

Vue

<script>
import ChatWidget from 'cti-chat-widget';

export default {
  mounted() {
    ChatWidget.init({
      apiUrl: 'https://your-n8n.com/webhook/chat'
    });
  },
  beforeDestroy() {
    ChatWidget.destroy();
  }
};
</script>

Configuration Options

ChatWidget.init({
  // Required
  apiUrl: 'https://your-n8n.com/webhook/chat',

  // Branding
  title: 'AI Assistant',
  subtitle: 'Powered by n8n',
  botName: 'Assistant',
  botAvatar: '🤖', // Emoji or image URL
  welcomeMessage: 'Hello! How can I help you?',
  showPoweredBy: true,
  poweredByText: 'Powered by CTI',

  // Appearance
  theme: 'light', // 'light' or 'dark'
  primaryColor: '#6366f1',
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  position: 'bottom-right', // 'bottom-right' or 'bottom-left'
  width: 380,
  height: 600,
  borderRadius: 16,

  // Button
  buttonSize: 60,
  buttonIcon: '💬', // Emoji or SVG
  buttonOffset: { x: 24, y: 24 },

  // Initial Prompts
  initialPrompts: [
    'What can you help me with?',
    'Tell me about your features'
  ],

  // Behavior
  startOpen: false,
  persistHistory: true,
  showTimestamps: true,
  showBotAvatar: true,
  placeholder: 'Type a message...',

  // Callbacks
  onOpen: () => console.log('Chat opened'),
  onClose: () => console.log('Chat closed'),
  onMessageSent: (msg) => console.log('Sent:', msg),
  onMessageReceived: (msg) => console.log('Received:', msg),
  onError: (err) => console.error('Error:', err)
});

API Methods

// Open the chat panel
ChatWidget.open();

// Close the chat panel
ChatWidget.close();

// Toggle open/close
ChatWidget.toggle();

// Send a message programmatically
ChatWidget.sendMessage('Hello!');

// Clear conversation history
ChatWidget.clearHistory();

// Remove the widget
ChatWidget.destroy();

// Set user information
ChatWidget.setUser({
  id: 'user-123',
  name: 'John Doe',
  email: '[email protected]'
});

n8n Webhook Payload

The widget sends messages in this format:

{
  "metadata": {
    "clientCurrentDateTime": "Wed Jan 15 2025 10:30:00 GMT+0000",
    "clientCurrentTimezone": "America/New_York",
    "clientQueryParams": {},
    "clientUserAgent": "Mozilla/5.0...",
    "userId": "user_123",
    "userName": "John Doe",
    "userEmail": "[email protected]"
  },
  "action": "sendMessage",
  "sessionId": "uuid-session-id",
  "chatInput": "User's message"
}

Expected response format (any of these):

{ "output": "Bot response" }
{ "reply": "Bot response" }
{ "text": "Bot response" }
{ "message": "Bot response" }

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

License

MIT

Author

CTI