# Chat Frontend with n8n Webhook

This is a simple chat frontend that connects to an n8n instance via a webhook. The frontend allows users to send messages, which are then processed by the n8n workflow and responses are displayed back in the chat interface.

## Setup Instructions

1. **Clone or download this repository**.
2. **Open the project in your preferred code editor** (e.g., VSCode).
3. **Ensure you have a running n8n instance** with a webhook set up to receive messages.
4. **Replace the webhook URL** in `script.js` on line 10 with your actual n8n webhook URL.

## Project Structure

- `index.html`: The main HTML file for the chat interface.
- `styles.css`: CSS styles for the chat interface.
- `script.js`: JavaScript functionality to handle user input and send messages to n8n via a webhook.
- `readme.md`: Documentation on the project setup and functions.

## How It Works

1. **User Input**: The user types a message in the input field and clicks "Send".
2. **Display User Message**: The message is displayed in the chat interface as sent by the user.
3. **Send to n8n**: The message is sent to the specified n8n webhook URL via a POST request.
4. **Receive Response**: The n8n workflow processes the message and sends back a response.
5. **Display Bot Message**: The response from n8n is displayed in the chat interface as received by the bot.

## Customization

- **Avatar**: Ensure you have an image file named `bot-avatar.png` in the same directory as the other files. If you want to use a different image, update the `src` attribute of the avatar image in `index.html` to point to the correct path.
- You can customize the appearance of the chat interface by modifying `styles.css`.
- To change the behavior, you can modify the JavaScript logic in `script.js`.