Zeedata Chatbot Widget

Lightweight chatbot widget for websites. Integrates with Zeedata AI API.

Installation

Option 1: CDN (Recommended)

<zeedata-chatbot email="[email protected]"></zeedata-chatbot>
<script src="https://unpkg.com/zeedata-chatbot-widget@latest/dist/index.umd.js" async></script>

Option 2: NPM

npm install zeedata-chatbot-widget

import { ZeedataChatbot } from 'zeedata-chatbot-widget';

<ZeedataChatbot email="[email protected]" />

Configuration

| Attribute | Type | Required | Description | |-----------|------|----------|-------------| | email | string | ✅ | User email for API | | position | string | ❌ | bottom-right or bottom-left | | greeting | string | ❌ | Initial greeting message | | placeholder | string | ❌ | Input placeholder text |

Examples

Basic Usage

<zeedata-chatbot email="[email protected]"></zeedata-chatbot>

Custom Configuration

<zeedata-chatbot 
  email="[email protected]"
  position="bottom-left"
  greeting="Hi! How can I help?"
  placeholder="Ask me anything...">
</zeedata-chatbot>

React Component

import { ZeedataChatbot } from 'zeedata-chatbot-widget';

function App() {
  return (
    <ZeedataChatbot 
      email="[email protected]"
      position="bottom-right"
      greeting="Welcome! Need help?"
    />
  );
}

Development

Local Testing

./test.sh

Build

npm run build

Publish

./publish.sh

API Integration

The widget connects to https://zeedata.io/api/chat with:

• Request: { "question": "user message", "email": "[email protected]" }
• Response: { "answer": "AI response with markdown support" }

Features

• ✅ Responsive design
• ✅ Markdown support
• ✅ TypeScript definitions
• ✅ React component
• ✅ Vietnamese interface
• ✅ Loading indicators
• ✅ Mobile friendly

Browser Support

• Chrome/Edge 88+
• Firefox 85+
• Safari 14+

License

MIT