@codeyet/chatbot
v1.0.10
Published
Production-ready chatbot widget SDK for websites and applications
Downloads
1,749
Maintainers
nabinthapa2058Readme
@codeyet/chatbot
Production-ready chatbot widget SDK for websites and applications. Real-time messaging with socket.io, customizable themes, and multi-language support.
Installation
npm install @codeyet/chatbotQuick Start
React (recommended)
Wrap your app with ChatbotProvider:
import { ChatbotProvider, useChatbot } from '@codeyet/chatbot';
import '@codeyet/chatbot/styles.css';
function App() {
return (
<ChatbotProvider
config={{
apiKey: 'your-api-key',
workspaceId: 'your-workspace-id',
companyId: 'your-company-id',
theme: {
primaryColor: '#2563eb',
bubblePosition: 'right',
},
}}
>
<YourApp />
</ChatbotProvider>
);
}The chat widget appears automatically as a floating bubble. Control it from anywhere:
function YourApp() {
const { open, close, toggle, isOpen, unreadCount } = useChatbot();
return (
<button onClick={toggle}>
{isOpen ? 'Close Chat' : 'Open Chat'} ({unreadCount})
</button>
);
}Vanilla JS (script tag)
<script src="https://unpkg.com/@codeyet/[email protected]/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@codeyet/[email protected]/dist/index.css" />
<script>
window.codeyetChatbot.init({
apiKey: 'your-api-key',
workspaceId: 'your-workspace-id',
companyId: 'your-company-id',
});
</script>Or use data-* attributes:
<script
src="https://unpkg.com/@codeyet/[email protected]/dist/index.umd.js"
data-api-key="your-api-key"
data-workspace-id="your-workspace-id"
data-company-id="your-company-id"
></script>Vanilla JS (bundler)
import { createChatbot } from '@codeyet/chatbot';
import '@codeyet/chatbot/styles.css';
const chatbot = createChatbot({
apiKey: 'your-api-key',
workspaceId: 'your-workspace-id',
companyId: 'your-company-id',
container: '#chat-container',
visitor: { id: 'user-123', name: 'Jane' },
});
chatbot.open();
// chatbot.close()
// chatbot.toggle()
// chatbot.identify({ name: 'Jane', email: '[email protected]' })
// chatbot.destroy()Configuration
ChatbotProviderConfig
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| apiKey | string | Yes | — | Your API key |
| workspaceId | string | Yes | — | Workspace identifier |
| companyId | string | Yes | — | Company identifier |
| visitorId | string | No | — | Unique visitor identifier |
| serverUrl | string | No | http://localhost:3001 | Backend server URL |
| locale | string | No | en | Language (en, es, fr, de, pt, ja, zh) |
| theme | Partial<WidgetTheme> | No | — | Theme customization |
| onOpen | () => void | No | — | Called when chat opens |
| onClose | () => void | No | — | Called when chat closes |
| onMessage | (msg) => void | No | — | Called on new messages |
WidgetTheme
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #2563eb | Main brand color |
| secondaryColor | string | #f8fafc | Background color |
| fontFamily | string | system-ui, -apple-system, sans-serif | Font stack |
| bubbleSize | 'small' \| 'medium' \| 'large' | 'medium' | Floating button size |
| bubblePosition | 'left' \| 'right' | 'right' | Bubble position |
| borderRadius | number | 12 | Border radius in px |
| darkMode | boolean | false | Enable dark mode |
| customCSS | string | — | Custom CSS injected into <head> |
Components
ChatbotProvider
Root context provider. Must wrap all other chatbot components.
import { ChatbotProvider } from '@codeyet/chatbot';
<ChatbotProvider config={...}>
<App />
</ChatbotProvider>ChatWidget
Auto-mounted by ChatbotProvider. Renders the floating bubble and chat window.
ChatBubble
Floating action button. Opens/closes the chat window. Shows unread badge and online status dot.
ChatWindow
Chat panel with header, message list, and input area. Lazy-loaded for performance.
MessageList
Scrollable list of messages with auto-scroll. Supports text, image, and file message types.
import { MessageList } from '@codeyet/chatbot';
<MessageList messages={messages} />MessageInput
Auto-resizing textarea with send button. Submit on Enter, Shift+Enter for newline.
import { MessageInput } from '@codeyet/chatbot';
<MessageInput
onSend={(content, type) => console.log(content, type)}
placeholder="Type your message..."
disabled={false}
/>Hooks
useChatbot()
Access chatbot context. Must be used inside ChatbotProvider.
const { isOpen, unreadCount, open, close, toggle, setUnreadCount } = useChatbot();useChat()
Real-time chat messages with optimistic updates.
const { messages, sendMessage, isLoading, error } = useChat();useSocket()
WebSocket connection status.
const { socket, isConnected, connectionError } = useSocket();usePresence()
Online agent presence tracking.
const { onlineAgents, onlineVisitors, agents } = usePresence();useTypingIndicator()
Typing indicator state.
const { isTyping, typingUsers, startTyping, stopTyping } = useTypingIndicator();Theme Customization
Customize via CSS custom properties or the theme config.
<ChatbotProvider
config={{
theme: {
primaryColor: '#7c3aed',
bubblePosition: 'left',
borderRadius: 16,
darkMode: true,
customCSS: '.codeyet-chatbot-header { background: linear-gradient(135deg, #7c3aed, #a855f7); }',
},
}}
>
<App />
</ChatbotProvider>CSS Custom Properties
:root {
--codeyet-primary: #2563eb;
--codeyet-secondary: #f8fafc;
--codeyet-font-family: system-ui, -apple-system, sans-serif;
--codeyet-border-radius: 12px;
}Overwrite these in your own stylesheet to customize without JavaScript.
Internationalization
Supported locales: en, es, fr, de, pt, ja, zh
<ChatbotProvider
config={{ locale: 'es' }}
>
<App />
</ChatbotProvider>Change at runtime:
import { i18n } from '@codeyet/chatbot';
i18n.changeLanguage('fr');API
The SDK communicates with the CodeYet backend via REST + WebSocket.
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/v1/conversations | Start a conversation |
| GET | /api/v1/conversations/:id/messages | Get message history |
| POST | /api/v1/conversations/:id/messages | Send a message |
| GET | /api/v1/visitors/:id | Get visitor info |
| PATCH | /api/v1/visitors/:id | Update visitor info |
Browser Support
Chrome, Firefox, Safari, Edge (last 2 major versions).
License
MIT