### Install and Embed n8n Chat via npm

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=dependents

This shows how to install the @n8n/chat package using npm and then import the CSS and JavaScript to initialize the chat widget. It requires replacing 'YOUR_PRODUCTION_WEBHOOK_URL' with your actual n8n webhook URL.

```bash
npm install @n8n/chat
```

```javascript
import '@n8n/chat/style.css';
import { createChat } from '@n8n/chat';

createChat({
	webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
});
```

--------------------------------

### Install @n8n/chat using npm

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat

Install the @n8n/chat package as a production dependency using npm. This allows you to import the CSS and JavaScript into your project.

```bash
npm install @n8n/chat
```

--------------------------------

### n8n Chat Widget Initialization

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat

This section details how to install and initialize the n8n Chat widget using either CDN or npm, and provides configuration options.

```APIDOC
## n8n Chat Widget Integration

This document outlines the integration and configuration of the n8n Chat widget, allowing you to embed an AI-powered chat interface into your website that connects to your n8n workflows.

### Prerequisites

1.  **n8n Workflow**: Create an n8n workflow intended to be triggered via chat. Ensure it uses a **Chat Trigger** node.
2.  **Allowed Origins (CORS)**: In the **Chat Trigger** node, add your domain to the **Allowed Origins (CORS)** field to permit requests from your website.
3.  **Active Workflow**: Make sure the n8n workflow is set to **Active**.
4.  **n8n Webhook URL**: Obtain the production webhook URL from your n8n workflow. This is the URL the chat widget will use to send requests.

### Installation Methods

#### a. CDN Embed

Add the following to your HTML page:

```html
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
	});
</script>
```

#### b. Import Embed (npm)

1.  Install the package:
    ```bash
    npm install @n8n/chat
    ```

2.  Import the CSS and initialize the chat:
    ```javascript
    import '@n8n/chat/style.css';
    import { createChat } from '@n8n/chat';

    createChat({
    	webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
    });
    ```

    **Vue.js Example:**
    ```vue
    <script lang="ts" setup>
    // App.vue
    import { onMounted } from 'vue';
    import '@n8n/chat/style.css';
    import { createChat } from '@n8n/chat';

    onMounted(() => {
    	createChat({
    		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
    	});
    });
    </script>
    <template>
    	<div></div>
    </template>
    ```

    **React Example:**
    ```jsx
    // App.tsx
    import { useEffect } from 'react';
    import '@n8n/chat/style.css';
    import { createChat } from '@n8n/chat';

    export const App = () => {
    	useEffect(() => {
    		createChat({
    			webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
    		});
    	}, []);

    	return (<div></div>);
    };
    ```

### How it Works

Each chat request is sent to your n8n Webhook endpoint. The `action` query parameter determines the operation:

*   `loadPreviousSession`: Loads the previous chat session when the user reopens the chatbot.
*   `sendMessage`: Processes a message sent by the user.

### Options

The `createChat` function accepts an options object to customize the widget's behavior and appearance. Default options are:

```javascript
createChat({
	webhookUrl: '',
	webhookConfig: {
		method: 'POST',
		headers: {}
	},
	target: '#n8n-chat',
	mode: 'window',
	chatInputKey: 'chatInput',
	chatSessionKey: 'sessionId',
	loadPreviousSession: true,
	metadata: {},
	showWelcomeScreen: false,
	defaultLanguage: 'en',
	initialMessages: [
		'Hi there! 👋',
		'My name is Nathan. How can I assist you today?'
	],
	i18n: {
		en: {
			title: 'Hi there! 👋',
			subtitle: "Start a chat. We're here to help you 24/7.",
			footer: '',
			getStarted: 'New Conversation',
			inputPlaceholder: 'Type your question..',
		},
	},
	enableStreaming: false,
});
```

#### `webhookUrl`

*   **Type**: `string`
*   **Required**: `true`
*   **Description**: The URL of the n8n Webhook endpoint. This should be your production URL.
*   **Examples**: `https://yourname.app.n8n.cloud/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183`, `http://localhost:5678/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183`

#### `webhookConfig`

*   **Type**: `{ method: string, headers: Record<string, string> }`
*   **Default**: `{ method: 'POST', headers: {} }`
*   **Description**: Configuration for the Webhook request, including HTTP method and headers.

#### `target`

*   **Type**: `string`
*   **Default**: `'#n8n-chat'`
*   **Description**: A CSS selector for the HTML element where the chat window will be embedded.

#### `mode`

*   **Type**: `'window' | 'fullscreen'`
*   **Default**: `'window'`
*   **Description**: Determines the render mode. `'window'` embeds the chat as a toggle button and a fixed-size window. `'fullscreen'` makes the chat occupy the entire target container.

#### `showWelcomeScreen`

*   **Type**: `boolean`
*   **Default**: `false`
*   **Description**: Controls whether the welcome screen is displayed when the chat window is opened.

#### `chatInputKey`

*   **Type**: `string`
*   **Default**: `'chatInput'`
*   **Description**: The key used for sending chat input to the AI Agent node in n8n.
```

--------------------------------

### n8n Chat Fullscreen Mode Setup

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=dependents

Configures the chat window to occupy the full width and height of its container, essential for fullscreen mode. Ensure the target container also has defined dimensions.

```css
html,
body,
#n8n-chat {
	width: 100%;
	height: 100%;
}
```

--------------------------------

### Import Embed: Initialize n8n Chat Widget (JavaScript/TypeScript)

Source: https://www.npmjs.com/package/@n8n/chat/index

Install `@n8n/chat` as a dependency and import the necessary CSS and `createChat` function to initialize the chat widget in your JavaScript or TypeScript application. This method provides more control and integration possibilities.

```javascript
import '@n8n/chat/style.css';
import { createChat } from '@n8n/chat';

createChat({
	webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
});
```

--------------------------------

### Integrate n8n Chat in Vue.js

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=dependents

This example illustrates how to integrate the n8n Chat widget within a Vue.js application. The chat is initialized using the `createChat` function within the `onMounted` lifecycle hook, ensuring the DOM is ready.

```vue
<script lang="ts" setup>
// App.vue
import { onMounted } from 'vue';
import '@n8n/chat/style.css';
import { createChat } from '@n8n/chat';

onMounted(() => {
	createChat({
		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
	});
});
</script>
<template>
	<div></div>
</template>
```

--------------------------------

### React Integration for n8n Chat

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=code

Integrates the n8n chat widget into a React application using the `useEffect` hook. This ensures that the chat widget is initialized after the component has mounted.

```javascript
// App.tsx
import { useEffect } from 'react';
import '@n8n/chat/style.css';
import { createChat } from '@n8n/chat';

export const App = () => {
	useEffect(() => {
		createChat({
			webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
		});
	}, []);

	return (<div></div>);
};

```

--------------------------------

### n8n Chat Default Options

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=dependents

This object shows the default configuration options for the `createChat` function. These options control various aspects of the chat widget's appearance and behavior, such as the webhook URL, target element, mode, and internationalization.

```javascript
createChat({
	webhookUrl: '',
	webhookConfig: {
		method: 'POST',
		headers: {}
	},
	target: '#n8n-chat',
	mode: 'window',
	chatInputKey: 'chatInput',
	chatSessionKey: 'sessionId',
	loadPreviousSession: true,
	metadata: {},
	showWelcomeScreen: false,
	defaultLanguage: 'en',
	initialMessages: [
		'Hi there! 👋',
		'My name is Nathan. How can I assist you today?'
	],
	i18n: {
		en: {
			title: 'Hi there! 👋',
			subtitle: "Start a chat. We're here to help you 24/7.",
			footer: '',
			getStarted: 'New Conversation',
			inputPlaceholder: 'Type your question..',
		},
	},
	enableStreaming: false,
});
```

--------------------------------

### Embed n8n Chat via CDN

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=dependents

This snippet demonstrates how to embed the n8n Chat widget into an HTML page using a CDN link. It includes linking the CSS file and importing the JavaScript module to initialize the chat with a provided webhook URL.

```html
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
	});
</script>
```

--------------------------------

### n8n Chat CSS Customization Variables

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=dependents

These CSS variables allow for extensive customization of the n8n chat window's appearance, including colors, spacing, borders, and dimensions. They are applied globally using the `:root` selector.

```css
:root {
	--chat--color--primary: #e74266;
	--chat--color--primary-shade-50: #db4061;
	--chat--color--primary--shade-100: #cf3c5c;
	--chat--color--secondary: #20b69e;
	--chat--color-secondary-shade-50: #1ca08a;
	--chat--color-white: #ffffff;
	--chat--color-light: #f2f4f8;
	--chat--color-light-shade-50: #e6e9f1;
	--chat--color-light-shade-100: #c2c5cc;
	--chat--color-medium: #d2d4d9;
	--chat--color-dark: #101330;
	--chat--color-disabled: #777980;
	--chat--color-typing: #404040;

	--chat--spacing: 1rem;
	--chat--border-radius: 0.25rem;
	--chat--transition-duration: 0.15s;

	--chat--window--width: 400px;
	--chat--window--height: 600px;

	--chat--header-height: auto;
	--chat--header--padding: var(--chat--spacing);
	--chat--header--background: var(--chat--color-dark);
	--chat--header--color: var(--chat--color-light);
	--chat--header--border-top: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--heading--font-size: 2em;
	--chat--header--color: var(--chat--color-light);
	--chat--subtitle--font-size: inherit;
	--chat--subtitle--line-height: 1.8;

	--chat--textarea--height: 50px;

	--chat--message--font-size: 1rem;
	--chat--message--padding: var(--chat--spacing);
	--chat--message--border-radius: var(--chat--border-radius);
	--chat--message-line-height: 1.8;
	--chat--message--bot--background: var(--chat--color-white);
	--chat--message--bot--color: var(--chat--color-dark);
	--chat--message--bot--border: none;
	--chat--message--user--background: var(--chat--color--secondary);
	--chat--message--user--color: var(--chat--color-white);
	--chat--message--user--border: none;
	--chat--message--pre--background: rgba(0, 0, 0, 0.05);

	--chat--toggle--background: var(--chat--color--primary);
	--chat--toggle--hover--background: var(--chat--color--primary-shade-50);
	--chat--toggle--active--background: var(--chat--color--primary--shade-100);
	--chat--toggle--color: var(--chat--color-white);
	--chat--toggle--size: 64px;
}
```

--------------------------------

### Integrate n8n Chat in React

Source: https://www.npmjs.com/package/@n8n/chat/package/%40n8n/chat_activetab=dependents

This code demonstrates the integration of the n8n Chat widget into a React application. The `createChat` function is called within the `useEffect` hook to initialize the chat after the component has mounted.

```react
// App.tsx
import { useEffect } from 'react';
import '@n8n/chat/style.css';
import { createChat } from '@n8n/chat';

export const App = () => {
	useEffect(() => {
		createChat({
			webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
		});
	}, []);

	return (<div></div>);
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.