npm package: @kunaal_dhawan/tigest-chat-widget
Description: Professional AI chatbot widget for websites - powered by n8n workflows
Author: Kunaal Dhawan
Latest version: 1.1.1

# TigestChat Widget

A professional, lightweight AI chatbot widget for websites powered by n8n workflows.

## Features

- 🚀 **Lightweight** - No dependencies, pure JavaScript
- 🎨 **Customizable** - Colors, position, text, and more
- 📱 **Responsive** - Works on all devices
- 🔌 **Easy Integration** - Just copy-paste one script
- 🤖 **AI Powered** - Connects to your n8n workflows
- 💬 **Real-time Chat** - Instant messaging experience

## Quick Start

### 1. Add the Script

Add this code just before the `</body>` tag in your HTML:

```html
<script>
  (function() {
    function loadTigestChatWidget(callback) {
      var script = document.createElement('script');
      script.src = "https://unpkg.com/@kunaal14/tigest-chat-widget@latest/dist/widget.js";
      script.onload = callback;
      document.head.appendChild(script);
    }

    loadTigestChatWidget(function() {
      TigestChat.init({
        webhookUrl: "YOUR_WEBHOOK_URL_HERE",
        color: "#6366f1",
        position: "bottom-right"
      });
    });
  })();
</script>
```

### 2. Replace the Webhook URL

Replace `YOUR_WEBHOOK_URL_HERE` with your actual n8n webhook URL.

### 3. That's It!

The chatbot will automatically appear on your website!

## Configuration Options

### Basic Configuration

```javascript
TigestChat.init({
  webhookUrl: "https://your-webhook-url.com/chat",
  color: "#6366f1",
  position: "bottom-right"
});
```

### Advanced Configuration

```javascript
TigestChat.init({
  webhookUrl: "https://your-webhook-url.com/chat",
  color: "#ff6b6b",
  position: "bottom-left",
  options: {
    buttonText: "💬 Need Help?",
    buttonWidth: 70,
    buttonHeight: 70,
    welcomeMessage: "Hi! I'm here to help. What can I assist you with?",
    chatWindowWidth: 400,
    chatWindowHeight: 600,
    zIndex: 10000
  }
});
```

## Configuration Reference

### Required Parameters

| Parameter | Type | Description |
|-----------|------|-------------|
| `webhookUrl` | String | Your n8n webhook URL |

### Optional Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `color` | String | `#6366f1` | Primary color for the widget |
| `position` | String | `bottom-right` | Widget position (`bottom-right`, `bottom-left`, `top-right`, `top-left`) |

### Options Object

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `buttonText` | String | `💬 Chat with AI` | Text displayed on the chat button |
| `buttonWidth` | Number | `60` | Button width in pixels |
| `buttonHeight` | Number | `60` | Button height in pixels |
| `welcomeMessage` | String | `Hello! How can I assist you today?` | Initial message shown to users |
| `chatWindowWidth` | Number | `350` | Chat window width in pixels |
| `chatWindowHeight` | Number | `500` | Chat window height in pixels |
| `zIndex` | Number | `10000` | CSS z-index for layering |

## Position Options

- `bottom-right` - Bottom right corner (default)
- `bottom-left` - Bottom left corner
- `top-right` - Top right corner
- `top-left` - Top left corner

## Webhook Response Format

Your n8n workflow should return JSON in one of these formats:

```json
// Preferred format
{
  "output": "Hello! How can I help you today?"
}

// Alternative formats
{
  "reply": "Here's your answer..."
}

{
  "message": "Response message..."
}

{
  "text": "Plain text response"
}
```

## Examples

### Minimal Setup
```javascript
TigestChat.init({
  webhookUrl: "https://your-webhook.com/chat"
});
```

### Custom Styling
```javascript
TigestChat.init({
  webhookUrl: "https://your-webhook.com/chat",
  color: "#e74c3c",
  position: "bottom-left",
  options: {
    buttonText: "🆘 Help",
    welcomeMessage: "Welcome! I'm your AI assistant."
  }
});
```

### Professional Look
```javascript
TigestChat.init({
  webhookUrl: "https://your-webhook.com/chat",
  color: "#2c3e50",
  position: "bottom-right",
  options: {
    buttonText: "💬 Support",
    buttonWidth: 80,
    buttonHeight: 80,
    welcomeMessage: "Hello! I'm here to provide support. How can I help you?",
    chatWindowWidth: 400,
    chatWindowHeight: 600
  }
});
```

## API Methods

### Initialize
```javascript
TigestChat.init(config)
```

### Destroy Widget
```javascript
TigestChat.destroy()
```

## Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## License

MIT License - see LICENSE file for details.

## Support

For support and questions:
- GitHub Issues: [Create an issue](https://github.com/Kunaal14/tigest-chat-widget/issues)
- Email: kunaal@tigest.club

## Changelog

### v1.0.0
- Initial release
- Basic chat functionality
- Customizable styling
- Multiple position options
- Webhook integration