You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A React component for integrating the Q&A Bot into your application. The bot can operate in two modes: **floating** (chat button that opens/closes a window) or **embedded** (always visible inline).
4
-
5
-
**Architecture**: Everything is React-backed for consistency and simplicity. HTML/plain JS usage loads a React-based standalone bundle.
3
+
A React component for integrating the Q&A Bot into your application. Also includes a standalone bundle for plain HTML/JS usage.
6
4
7
5
## Installation
8
6
@@ -34,94 +32,16 @@ The Q&A Bot supports two display modes:
34
32
-**Floating Mode** (default): Shows a chat button that opens/closes a floating chat window
35
33
-**Embedded Mode**: Always visible, embedded directly in the page content
36
34
37
-
**All integration methods support both modes**, but have different defaults:
38
-
39
-
| Method | Default Mode | Override |
40
-
|--------|--------------|----------|
41
-
| Element ID (`#qa-bot`) | Floating | Set `embedded: true`|
42
-
| CSS Class (`.embedded-qa-bot`) | Embedded | n/a |
43
-
| JavaScript API | Floating | Set `embedded: true`|
44
-
45
35
## Integration Methods
46
36
47
-
### Method 1: Auto-Detection by Element ID (Floating by Default)
botController.addMessage("Hello from JavaScript!");
98
-
botController.openChat(); // Only works in floating mode
99
-
});
100
-
</script>
101
-
```
102
-
103
-
## Programmatic Control
104
-
105
-
When using the JavaScript API in plain HTML/JS (requires standalone bundle), you get a controller object with these methods:
106
-
107
-
```javascript
108
-
constbotController=qaBot({...});
109
-
110
-
botController.addMessage("Hello World!");
111
-
botController.setBotIsLoggedIn(true);
112
-
// (floating mode only)
113
-
botController.openChat();
114
-
botController.closeChat();
115
-
botController.toggleChat();
116
-
// Cleanup
117
-
botController.destroy();
118
-
```
119
-
120
-
**Note**: The `qaBot()` function requires the standalone bundle (`access-qa-bot.standalone.js`) to be loaded first. React/Preact applications should use the `<QABot />` component instead.
121
-
122
-
## As a React Component
123
-
124
-
For React applications, import and use the component directly. If you want to be able to imperatively add a message to the chat, you can use the ref to do so.
41
+
For React applications, import and use the component directly.
42
+
- To control the chat programmatically, manage `open` and `isLoggedIn` state in your parent component.
43
+
- Use `onOpenChange` to keep your state in sync with user interactions.
44
+
- You can imperatively add a message to the bot using the `addMessage` function
125
45
126
46
```jsx
127
47
importReact, { useRef, useState } from'react';
@@ -161,8 +81,8 @@ function MyApp() {
161
81
</button>
162
82
163
83
<QABot
164
-
ref={botRef} //This is only needed if you want to add a message from outside the flow
165
-
embedded={false}// true for embedded, false for floating
84
+
ref={botRef} // only needed if you want use the addMessage function
85
+
embedded={false}
166
86
isLoggedIn={isLoggedIn}
167
87
open={chatOpen}
168
88
onOpenChange={setChatOpen}
@@ -174,112 +94,81 @@ function MyApp() {
174
94
}
175
95
```
176
96
177
-
**React Component Notes:**
178
-
- Uses **controlled component pattern**: manage `open` and `isLoggedIn` state in your parent component
179
-
- `onOpenChange` callback receives the new open state when user interacts with chat
180
-
- For programmatic message injection, use the ref: `botRef.current?.addMessage("Hello!")`
181
-
- `defaultOpen` prop not available - use `open` prop with `useState` instead
182
-
- For state management (login, chat open/close), use props and state instead of imperative methods
183
-
184
-
## Configuration Properties
185
-
186
-
| Property | Type | Description |
187
-
|----------|------|-------------|
188
-
| `apiKey` / `api-key` | string | API key for authentication (defaults to demo key) |
| `isLoggedIn` / `is-logged-in` | boolean | Sets initial login state and reacts to changes |
192
-
| `loginUrl` / `login-url` | string | URL to redirect for login (default: '/login') |
193
-
| `open` | boolean | **React Component only**: Controls chat window open state (floating mode only) |
194
-
| `onOpenChange` | function | **React Component only**: Callback when chat window open state changes |
195
-
| `ringEffect` / `ring-effect` | boolean | Enable phone ring animation on tooltip (floating mode only) |
196
-
| `welcome` | string | Welcome message shown to the user |
197
-
198
-
**Note**: The React component uses a controlled component pattern with `open`/`onOpenChange`, while the JavaScript API uses `defaultOpen` for initial state.
97
+
#### React Component Props
199
98
200
-
### CSS Custom Properties (Theming)
99
+
| Property | Type | Default | Description |
100
+
|----------|------|---------|-------------|
101
+
| `apiKey` | string | `"demo-key"` | API key for authentication |
| `ringEffect` | boolean | `true` | Phone ring animation on tooltip |
160
+
| `welcome` | string | - | Welcome message |
278
161
279
-
5. **API Key**: Defaults to demo key if not provided
162
+
> **More Examples**: See `index.html` in this repository for examples including login state management, embedded mode, and programmatic control. Run the react app to see the same in a react context.
280
163
281
-
6. **Browser Support**: Uses modern browser features; consider polyfills for older browsers
164
+
### CSS Custom Properties (Theming)
282
165
283
-
## Examples Repository
166
+
Customize the appearance by setting CSS custom properties on the container:
284
167
285
-
See the demo files in this repository for complete working examples of all integration methods.
0 commit comments