A reusable chatbot component for React applications supporting Tawk.to and custom Veeyaa chatbot with route-based visibility
npm install @veeyaainnovatives/chatbotbash
npm install @veeyaainnovatives/chatbot
`
Usage
$3
`jsx
import { Chatbot } from '@veeyaainnovatives/chatbot';
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
tawkPropertyId="69401d325921b4197ee500f1"
tawkWidgetId="1jch7cecr"
/>
{/ Your app content /}
);
}
`
$3
`jsx
import { Chatbot } from '@veeyaainnovatives/chatbot';
import '@veeyaainnovatives/chatbot/styles.css';
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
position="bottom-right"
primaryColor="#677a58"
backgroundColor="#ffffff"
apiUrl="https://api.example.com/chat"
onMessage={(message) => console.log('Message sent:', message)}
/>
{/ Your app content /}
);
}
`
Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| provider | 'tawk' \| 'veeyaa' | 'tawk' | Chatbot provider to use |
| tawkPropertyId | string | required if provider='tawk' | Tawk.to property ID |
| tawkWidgetId | string | required if provider='tawk' | Tawk.to widget ID |
| hideOnRoutes | string[] | ['/customer'] | Routes where chatbot should be hidden |
| position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Chatbot position (Veeyaa only) |
| primaryColor | string | '#677a58' | Primary color for Veeyaa chatbot |
| backgroundColor | string | '#ffffff' | Background color for Veeyaa chatbot |
| apiUrl | string | undefined | API URL for Veeyaa chatbot messages |
| onMessage | function | undefined | Callback when a message is sent (Veeyaa) |
| enableErrorHandling | boolean | true | Enable error handling for Tawk.to |
| enableTitleProtection | boolean | true | Prevent Tawk.to from changing page title |
| onLoad | function | undefined | Callback when Tawk.to script loads |
| onError | function | undefined` | Callback when Tawk.to script fails to load |