Timekeeper-Web/readme.md

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.