32 lines
1.7 KiB
Markdown
32 lines
1.7 KiB
Markdown
# 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`.
|