@robylon/web-react-sdk 1.1.26-staging.7 → 1.1.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +389 -104
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/components/ChatbotContainer/ChatbotContainer.d.ts +10 -0
  5. package/dist/cjs/types/components/ChatbotContainer/index.d.ts +1 -0
  6. package/dist/cjs/types/core/api.d.ts +8 -0
  7. package/dist/cjs/types/core/config.d.ts +34 -0
  8. package/dist/cjs/types/core/events.d.ts +22 -0
  9. package/dist/cjs/types/core/index.d.ts +4 -0
  10. package/dist/cjs/types/core/state.d.ts +34 -0
  11. package/dist/cjs/types/index.d.ts +2 -0
  12. package/dist/cjs/types/types.d.ts +3 -0
  13. package/dist/cjs/types/vanilla/components/ChatbotContainer.d.ts +43 -0
  14. package/dist/cjs/types/vanilla/components/ChatbotFloatingButton.d.ts +66 -0
  15. package/dist/cjs/types/vanilla/components/ChatbotIframe.d.ts +71 -0
  16. package/dist/cjs/types/vanilla/index.d.ts +32 -0
  17. package/dist/esm/index.js +1 -1
  18. package/dist/esm/index.js.map +1 -1
  19. package/dist/esm/types/components/ChatbotContainer/ChatbotContainer.d.ts +10 -0
  20. package/dist/esm/types/components/ChatbotContainer/index.d.ts +1 -0
  21. package/dist/esm/types/core/api.d.ts +8 -0
  22. package/dist/esm/types/core/config.d.ts +34 -0
  23. package/dist/esm/types/core/events.d.ts +22 -0
  24. package/dist/esm/types/core/index.d.ts +4 -0
  25. package/dist/esm/types/core/state.d.ts +34 -0
  26. package/dist/esm/types/index.d.ts +2 -0
  27. package/dist/esm/types/types.d.ts +3 -0
  28. package/dist/esm/types/vanilla/components/ChatbotContainer.d.ts +43 -0
  29. package/dist/esm/types/vanilla/components/ChatbotFloatingButton.d.ts +66 -0
  30. package/dist/esm/types/vanilla/components/ChatbotIframe.d.ts +71 -0
  31. package/dist/esm/types/vanilla/index.d.ts +32 -0
  32. package/dist/index.d.ts +35 -1
  33. package/dist/umd/robylon-chatbot.js +2 -0
  34. package/dist/umd/robylon-chatbot.js.map +1 -0
  35. package/dist/umd/types/components/ChatbotContainer/ChatbotContainer.d.ts +10 -0
  36. package/dist/umd/types/components/ChatbotContainer/index.d.ts +1 -0
  37. package/dist/umd/types/components/ChatbotFloatingButton.d.ts +12 -0
  38. package/dist/umd/types/components/ChatbotIframe.d.ts +12 -0
  39. package/dist/umd/types/components/ErrorBoundary.d.ts +15 -0
  40. package/dist/umd/types/components/RobylonChatbot.d.ts +11 -0
  41. package/dist/umd/types/config.d.ts +5 -0
  42. package/dist/umd/types/constants/errorConstants.d.ts +60 -0
  43. package/dist/umd/types/core/api.d.ts +8 -0
  44. package/dist/umd/types/core/config.d.ts +34 -0
  45. package/dist/umd/types/core/events.d.ts +22 -0
  46. package/dist/umd/types/core/index.d.ts +4 -0
  47. package/dist/umd/types/core/state.d.ts +34 -0
  48. package/dist/umd/types/hooks/useChatbot.d.ts +2 -0
  49. package/dist/umd/types/hooks/useChatbotEvents.d.ts +12 -0
  50. package/dist/umd/types/hooks/useChatbotState.d.ts +16 -0
  51. package/dist/umd/types/hooks/useWhyDidYouUpdate.d.ts +5 -0
  52. package/dist/umd/types/index.d.ts +5 -0
  53. package/dist/umd/types/services/ErrorTrackingService.d.ts +38 -0
  54. package/dist/umd/types/types/config.d.ts +33 -0
  55. package/dist/umd/types/types/events.d.ts +22 -0
  56. package/dist/umd/types/types/index.d.ts +16 -0
  57. package/dist/umd/types/types/state.d.ts +5 -0
  58. package/dist/umd/types/types.d.ts +41 -0
  59. package/dist/umd/types/utils/chatbotSdk.d.ts +23 -0
  60. package/dist/umd/types/utils/colorUtils.d.ts +1 -0
  61. package/dist/umd/types/utils/cookieUtils.d.ts +6 -0
  62. package/dist/umd/types/utils/environment.d.ts +12 -0
  63. package/dist/umd/types/utils/fetchData.d.ts +30 -0
  64. package/dist/umd/types/utils/logger.d.ts +6 -0
  65. package/dist/umd/types/utils/misc.d.ts +1 -0
  66. package/dist/umd/types/utils/originalFetchDataFile.d.ts +1 -0
  67. package/dist/umd/types/utils/systemInfo.d.ts +13 -0
  68. package/dist/umd/types/utils/version.d.ts +1 -0
  69. package/dist/umd/types/vanilla/components/ChatbotContainer.d.ts +43 -0
  70. package/dist/umd/types/vanilla/components/ChatbotFloatingButton.d.ts +66 -0
  71. package/dist/umd/types/vanilla/components/ChatbotIframe.d.ts +71 -0
  72. package/dist/umd/types/vanilla/index.d.ts +32 -0
  73. package/package.json +28 -9
package/README.md CHANGED
@@ -1,154 +1,439 @@
1
- # Robylon Web React SDK
2
-
3
- A lightweight React SDK for integrating Robylon's AI-powered chatbot into your web applications.
1
+ # Robylon SDK
2
+
3
+ The Robylon SDK provides an easy way to integrate a customizable chatbot into your application. This SDK supports both React applications and plain JavaScript/no-code websites.
4
+
5
+ ## Table of Contents
6
+
7
+ - [Installation](#installation)
8
+ - [React SDK Usage](#react-sdk-usage)
9
+ - [Plain JavaScript & No-Code Integration](#plain-javascript--no-code-integration)
10
+ - [Quick Embed (Easiest Method)](#quick-embed-easiest-method)
11
+ - [Option 1: Quick Setup - Load with Page](#option-1-quick-setup---load-with-page)
12
+ - [Option 2: Reliable Loading - After DOM is Ready](#option-2-reliable-loading---after-dom-is-ready)
13
+ - [Option 3: User Context - Initialize After User Data](#option-3-user-context---initialize-after-user-data)
14
+ - [Configuration Options](#configuration-options)
15
+ - [Event Handling](#event-handling)
16
+ - [Customization](#customization)
17
+ - [Troubleshooting](#troubleshooting)
18
+ - [Platform-Specific Integration Guides](#platform-specific-integration-guides)
19
+ - [Webflow](#webflow-integration)
20
+ - [Wix](#wix-integration)
21
+ - [Shopify](#shopify-integration)
22
+ - [WordPress](#wordpress-integration)
23
+ - [Using the SDK from CDN](#using-the-sdk-from-cdn)
4
24
 
5
25
  ## Installation
6
26
 
27
+ ### For React applications:
28
+
7
29
  ```bash
8
30
  npm install @robylon/web-react-sdk
9
31
  # or
10
32
  yarn add @robylon/web-react-sdk
11
33
  ```
12
34
 
13
- ## Quick Start
35
+ ### For plain JavaScript and no-code websites:
36
+
37
+ Add this script to your website by copying and pasting the following code into the `<head>` section of your HTML:
38
+
39
+ ```html
40
+ <script src="https://cdn.robylon.ai/sdk/latest/chatbot.js"></script>
41
+ ```
42
+
43
+ #### Where to place the script:
44
+
45
+ 1. **For website builders (Wix, Squarespace, etc.):**
46
+
47
+ - Find your site editor or dashboard
48
+ - Look for "Custom Code", "Header Code", or "Site Settings" options
49
+ - Paste the script there, usually in a section labeled "Header" or "Head"
50
+
51
+ 2. **For custom HTML sites:**
52
+
53
+ - Open your website's HTML file in your editor
54
+ - Find the `<head>` section (it's near the top, between `<html>` and `<body>` tags)
55
+ - Paste the script tag just before the closing `</head>` tag
56
+
57
+ 3. **For WordPress:**
58
+ - Go to your WordPress dashboard
59
+ - Navigate to Appearance → Theme Editor or use a header/footer plugin
60
+ - Add the script to the header.php file before the closing `</head>` tag
61
+
62
+ > **Note:** Some of the integration options later in this guide will show different placements of this script - follow the specific example that best matches your needs.
63
+
64
+ ## React SDK Usage
65
+
66
+ ### React: Basic Implementation
67
+
68
+ To use the Robylon SDK in a React application:
14
69
 
15
70
  ```jsx
16
71
  import { Chatbot } from "@robylon/web-react-sdk";
17
72
 
18
73
  function App() {
19
74
  const handleChatbotEvent = (event) => {
20
- logger.log(`Chatbot event: ${event.type}`, event);
75
+ console.log("Chatbot event:", event.type, event.data);
21
76
  };
22
77
 
23
78
  return (
24
- <Chatbot
25
- api_key="your-api-key"
26
- user_id="user-id"
27
- user_token="optional-auth-token"
28
- user_profile={{
29
- email: "user@example.com",
30
- name: "John Doe",
31
- mobile: "1234567890",
32
- }}
33
- onEvent={handleChatbotEvent}
34
- />
79
+ <div className="App">
80
+ <h1>My Website</h1>
81
+
82
+ <Chatbot
83
+ api_key="YOUR_API_KEY"
84
+ user_id="optional-user-id"
85
+ user_token="optional-auth-token"
86
+ user_profile={{
87
+ name: "Optional User Name",
88
+ email: "optional.email@example.com",
89
+ }}
90
+ onEvent={handleChatbotEvent}
91
+ />
92
+ </div>
35
93
  );
36
94
  }
95
+
96
+ export default App;
37
97
  ```
38
98
 
39
- ## Configuration
99
+ ### React: Event Handling
100
+
101
+ The React component accepts an `onEvent` prop for handling chatbot events:
40
102
 
41
- ### Required Props
103
+ ```jsx
104
+ <Chatbot
105
+ api_key="YOUR_API_KEY"
106
+ onEvent={(event) => {
107
+ switch (event.type) {
108
+ case "CHATBOT_LOADED":
109
+ console.log("Chatbot loaded");
110
+ break;
111
+ case "CHATBOT_OPENED":
112
+ console.log("Chatbot opened");
113
+ break;
114
+ case "CHATBOT_CLOSED":
115
+ console.log("Chatbot closed");
116
+ break;
117
+ // See the Supported Events section for all available events
118
+ }
119
+ }}
120
+ />
121
+ ```
42
122
 
43
- - `api_key`: Your Robylon API key
44
- - `user_id`: Unique identifier for the current user
123
+ The `Chatbot` component renders a floating button that opens a chat interface when clicked. It handles all the communication with the Robylon backend services.
45
124
 
46
- ### Optional Props
125
+ ## Plain JavaScript & No-Code Integration
47
126
 
48
- - `user_token`: Authentication token for the user
49
- - `user_profile`: Object containing user information
50
- - `email`: User's email address
51
- - `name`: User's name
52
- - `mobile`: User's mobile number
53
- - `onEvent`: Callback function to handle chatbot events
127
+ > **IMPORTANT:** You will need an API key from Robylon for any integration to work.
54
128
 
55
- ### Event Handling
129
+ ### Quick Embed (Easiest Method)
56
130
 
57
- The SDK emits various events that you can listen to using the `onEvent` prop. Each event has the following structure:
131
+ This is the simplest way to add the Robylon chatbot to any website with a single line of code. Just copy and paste this script tag into your HTML:
58
132
 
59
- ```typescript
60
- interface ChatbotEvent {
61
- type: ChatbotEventType;
62
- timestamp: number;
63
- data?: any;
64
- }
133
+ ```
134
+ <script>(function(k){window.R=window.R||function(){(window.R.q=window.R.q||[]).push(arguments)};window.R=new Proxy(window.R,{get:(t,p)=>p==="q"?t.q:(...a)=>t(p,...a)});function l(){var s=document.createElement("script");s.src="https://cdn.robylon.ai/sdk/latest/chatbot.js";s.onload=()=>k&&window.RobylonChatbot.create({api_key:k});document.body.appendChild(s)}document.readyState==="complete"?l():window.addEventListener("load",l)})("YOUR_API_KEY_HERE");</script>
65
135
  ```
66
136
 
67
- Available event types:
68
-
69
- ```typescript
70
- enum ChatbotEventType {
71
- CHATBOT_BUTTON_LOADED = "CHATBOT_BUTTON_LOADED", // When the chat button is rendered
72
- CHATBOT_OPENED = "CHATBOT_OPENED", // When chat window is opened
73
- CHATBOT_CLOSED = "CHATBOT_CLOSED", // When chat window is closed
74
- CHATBOT_APP_READY = "CHATBOT_APP_READY", // When SDK is fully initialized
75
- CHATBOT_LOADED = "CHATBOT_LOADED", // When chatbot iframe is loaded
76
- CHAT_INITIALIZED = "CHAT_INITIALIZED", // When chat session is initialized
77
- SESSION_REFRESHED = "SESSION_REFRESHED", // When chat session is refreshed
78
- CHAT_INITIALIZATION_FAILED = "CHAT_INITIALIZATION_FAILED", // When initialization fails
79
- }
137
+ Just replace `YOUR_API_KEY_HERE` with your actual Robylon API key, and you're done! No additional code is needed.
138
+
139
+ #### Where to place the script:
140
+
141
+ - At the end of your HTML `<body>` section for best performance
142
+ - Or anywhere in your HTML code if you're using a website builder
143
+
144
+ There are several other ways to add the Robylon chatbot to your website or no-code platform, depending on your needs:
145
+
146
+ ### Option 1: Quick Setup - Load with Page
147
+
148
+ This is the simplest approach for any website. The chatbot loads while the page is loading but doesn't block the page from appearing.
149
+
150
+ #### What to copy:
151
+
152
+ 1️⃣ **Add this to your HTML `<head>` section:**
153
+
154
+ ```html
155
+ <script
156
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
157
+ defer
158
+ ></script>
159
+ <script>
160
+ // Initialize when page is ready
161
+ document.addEventListener("DOMContentLoaded", () => {
162
+ RobylonChatbot.create({
163
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
164
+ user_id: "optional-user-id", // Optional: remove if not needed
165
+ user_profile: {
166
+ name: "Optional User Name", // Optional: remove if not needed
167
+ email: "optional.email@example.com", // Optional: remove if not needed
168
+ },
169
+ });
170
+ });
171
+ </script>
80
172
  ```
81
173
 
82
- Example usage:
174
+ #### Complete example:
175
+
176
+ ```html
177
+ <!DOCTYPE html>
178
+ <html>
179
+ <head>
180
+ <title>Robylon SDK - Quick Setup</title>
181
+ <!-- COPY FROM HERE -->
182
+ <script
183
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
184
+ defer
185
+ ></script>
186
+ <script>
187
+ // Initialize when page is ready
188
+ document.addEventListener("DOMContentLoaded", () => {
189
+ RobylonChatbot.create({
190
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
191
+ user_id: "optional-user-id", // Optional: remove if not needed
192
+ user_profile: {
193
+ name: "Optional User Name", // Optional: remove if not needed
194
+ email: "optional.email@example.com", // Optional: remove if not needed
195
+ },
196
+ });
197
+ });
198
+ </script>
199
+ <!-- COPY UNTIL HERE -->
200
+ </head>
201
+ <body>
202
+ <h1>Your Website Content</h1>
203
+ <!-- Your website content here -->
204
+ </body>
205
+ </html>
206
+ ```
83
207
 
84
- ```jsx
85
- function App() {
86
- const handleChatbotEvent = (event) => {
87
- switch (event.type) {
88
- case "CHATBOT_BUTTON_CLICKED":
89
- logger.log("Chat button clicked at:", new Date(event.timestamp));
90
- break;
91
- case "CHATBOT_OPENED":
92
- logger.log("Chat window opened at:", new Date(event.timestamp));
93
- break;
94
- case "CHAT_INITIALIZED":
95
- logger.log("Chat session initialized");
96
- break;
97
- case "CHAT_INITIALIZATION_FAILED":
98
- console.error("Chat initialization failed:", event.data);
99
- break;
100
- }
101
- };
208
+ ### Option 2: Reliable Loading - After DOM is Ready
102
209
 
103
- return (
104
- <Chatbot
105
- api_key="your-api-key"
106
- user_id="user-id"
107
- onEvent={handleChatbotEvent}
108
- />
109
- );
110
- }
210
+ This approach ensures the chatbot only initializes after your page is fully loaded, making it more reliable for websites with complex layouts.
211
+
212
+ #### What to copy:
213
+
214
+ 1️⃣ **Add this to your HTML `<head>` section:**
215
+
216
+ ```html
217
+ <script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"></script>
218
+ ```
219
+
220
+ 2️⃣ **Add this at the end of your HTML `<body>` section:**
221
+
222
+ ```html
223
+ <script>
224
+ // Wait for page to be fully loaded before showing chatbot
225
+ document.addEventListener("DOMContentLoaded", () => {
226
+ RobylonChatbot.create({
227
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
228
+ user_id: "optional-user-id", // Optional: remove if not needed
229
+ user_profile: {
230
+ name: "Optional User Name", // Optional: remove if not needed
231
+ email: "optional.email@example.com", // Optional: remove if not needed
232
+ },
233
+ });
234
+ });
235
+ </script>
111
236
  ```
112
237
 
113
- ### Automatically Included Information
238
+ #### Complete example:
239
+
240
+ ```html
241
+ <!DOCTYPE html>
242
+ <html>
243
+ <head>
244
+ <title>Robylon SDK - Reliable Loading</title>
245
+ <!-- COPY FROM HERE -->
246
+ <script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"></script>
247
+ <!-- COPY UNTIL HERE -->
248
+ </head>
249
+ <body>
250
+ <h1>Your Website Content</h1>
251
+ <!-- Your website content here -->
252
+
253
+ <script>
254
+ // Wait for page to be fully loaded before showing chatbot
255
+ document.addEventListener("DOMContentLoaded", () => {
256
+ RobylonChatbot.create({
257
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
258
+ user_id: "optional-user-id", // Optional: remove if not needed
259
+ user_profile: {
260
+ name: "Optional User Name", // Optional: remove if not needed
261
+ email: "optional.email@example.com", // Optional: remove if not needed
262
+ },
263
+ });
264
+ });
265
+ </script>
266
+ </body>
267
+ </html>
268
+ ```
114
269
 
115
- The SDK automatically collects and includes the following system information:
270
+ ### Option 3: User Context - Initialize After User Data
116
271
 
117
- - `platform`: Always set to "web"
118
- - `os`: User's operating system
119
- - `browser`: User's browser type
120
- - `device`: Device type (desktop/mobile/tablet)
121
- - `screen_size`: User's screen dimensions (width and height)
122
- - `sdk_version`: Current version of the SDK
272
+ This approach loads the chatbot after user data is available. Great for websites where you want to personalize the chat experience.
123
273
 
124
- ## Features
274
+ #### What to copy:
125
275
 
126
- - Persistent chat interface
127
- - Responsive design for all screen sizes
128
- - Automatic system information collection
129
- - Customizable chat bubble
130
- - Session management
131
- - Secure communication channel
132
- - Cross-browser compatibility
133
- - Comprehensive event system
276
+ 1️⃣ **Add this to your HTML `<head>` section:**
134
277
 
135
- ## Browser Support
278
+ ```html
279
+ <script
280
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
281
+ defer
282
+ ></script>
283
+ ```
136
284
 
137
- The SDK supports all modern browsers and includes fallbacks for:
285
+ 2️⃣ **Add this script at the end of your HTML `<body>` section:**
286
+
287
+ ```html
288
+ <script>
289
+ // Wait for page to be ready
290
+ document.addEventListener("DOMContentLoaded", () => {
291
+ // Get your user data (replace this with your own method)
292
+ getUserData().then((user) => {
293
+ // Initialize chatbot with user info
294
+ RobylonChatbot.create({
295
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
296
+ user_id: user.id,
297
+ user_profile: {
298
+ name: user.name,
299
+ email: user.email,
300
+ },
301
+ });
302
+ });
303
+ });
304
+
305
+ // Example function to get user data - replace with your own
306
+ function getUserData() {
307
+ // This is just a placeholder - replace with your actual code
308
+ return Promise.resolve({
309
+ id: "user123",
310
+ name: "Jane Smith",
311
+ email: "jane@example.com",
312
+ });
313
+ }
314
+ </script>
315
+ ```
138
316
 
139
- - User agent detection
140
- - Screen size detection
141
- - Browser identification
142
- - Device type detection
317
+ #### Complete example:
318
+
319
+ ```html
320
+ <!DOCTYPE html>
321
+ <html>
322
+ <head>
323
+ <title>My Website</title>
324
+ <!-- COPY FROM HERE -->
325
+ <script
326
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
327
+ defer
328
+ ></script>
329
+ <!-- COPY UNTIL HERE -->
330
+ </head>
331
+ <body>
332
+ <h1>Your Website Content</h1>
333
+ <!-- Your website content here -->
334
+
335
+ <!-- COPY FROM HERE -->
336
+ <script>
337
+ // Wait for page to be ready
338
+ document.addEventListener("DOMContentLoaded", () => {
339
+ // Get your user data (replace this with your own method)
340
+ getUserData().then((user) => {
341
+ // Initialize chatbot with user info
342
+ RobylonChatbot.create({
343
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
344
+ user_id: user.id,
345
+ user_profile: {
346
+ name: user.name,
347
+ email: user.email,
348
+ },
349
+ });
350
+ });
351
+ });
352
+
353
+ // Example function to get user data - replace with your own
354
+ function getUserData() {
355
+ // This is just a placeholder - replace with your actual code
356
+ return Promise.resolve({
357
+ id: "user123",
358
+ name: "Jane Smith",
359
+ email: "jane@example.com",
360
+ });
361
+ }
362
+ </script>
363
+ <!-- COPY UNTIL HERE -->
364
+ </body>
365
+ </html>
366
+ ```
143
367
 
144
- ## Development
368
+ ### Plain JS & No-Code: Event Handling
145
369
 
146
- ### Creating Branches
370
+ You can handle chatbot events in plain JavaScript using the `onEvent` callback:
147
371
 
148
- Always use the provided script to create new branches:
372
+ #### What to copy:
149
373
 
150
- ```bash
151
- npm run branch
374
+ ```javascript
375
+ const chatbot = RobylonChatbot.create({
376
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
377
+ onEvent: function (event) {
378
+ switch (event.type) {
379
+ case "CHATBOT_LOADED":
380
+ console.log("Chatbot loaded");
381
+ break;
382
+ case "CHATBOT_OPENED":
383
+ console.log("Chatbot opened");
384
+ break;
385
+ case "CHATBOT_CLOSED":
386
+ console.log("Chatbot closed");
387
+ break;
388
+ // See the Supported Events section for all available events
389
+ }
390
+ },
391
+ });
392
+
393
+ // The chatbot instance provides methods to control the chatbot
394
+ // chatbot.show(); // Show the chatbot
395
+ // chatbot.hide(); // Hide the chatbot
396
+ // chatbot.toggle(); // Toggle visibility
397
+ // chatbot.destroy(); // Remove the chatbot from the page
152
398
  ```
153
399
 
154
- This ensures proper version control and naming conventions.
400
+ ## Configuration Options
401
+
402
+ The SDK supports the following configuration options for both React and plain JavaScript implementations:
403
+
404
+ | Option | Type | Description | Required/Optional |
405
+ | ------------ | -------- | ----------------------------------------- | ----------------- |
406
+ | api_key | string | Your Robylon API key | Required |
407
+ | user_id | string | User identifier for conversation tracking | Optional |
408
+ | user_token | string | Authentication token | Optional |
409
+ | user_profile | object | Additional user information | Optional |
410
+ | onEvent | function | Event handler for chatbot interactions | Optional |
411
+
412
+ ## Event Handling
413
+
414
+ ### Supported Events
415
+
416
+ The SDK emits the following events that you can listen for in both React and plain JavaScript implementations:
417
+
418
+ | Event Type | Description | Data |
419
+ | ---------------------------- | ----------------------------------------------- | ---------------------------------------- |
420
+ | `CHATBOT_BUTTON_LOADED` | The chatbot button has been loaded and rendered | - |
421
+ | `CHATBOT_LOADED` | The chatbot iframe has been loaded | - |
422
+ | `CHATBOT_OPENED` | The chatbot has been opened | - |
423
+ | `CHATBOT_CLOSED` | The chatbot has been closed | - |
424
+ | `CHAT_INITIALIZED` | The chat session has been initialized | - |
425
+ | `CHAT_INITIALIZATION_FAILED` | The chat session failed to initialize | `{ error: string }` |
426
+ | `SESSION_REFRESHED` | The chat session has been refreshed | - |
427
+ | `MESSAGE_SENT` | User has sent a message | `{ message: string }` |
428
+ | `MESSAGE_RECEIVED` | A message was received from the chatbot | `{ message: string }` |
429
+ | `CONVERSATION_STARTED` | A new conversation has started | `{ conversationId: string }` |
430
+ | `CONVERSATION_ENDED` | The current conversation has ended | `{ conversationId: string }` |
431
+ | `USER_AUTHENTICATED` | The user has been authenticated | `{ userId: string }` |
432
+ | `USER_PROFILE_UPDATED` | The user profile has been updated | `{ profile: object }` |
433
+ | `USER_FEEDBACK_SUBMITTED` | The user has submitted feedback | `{ rating: number, comment: string }` |
434
+ | `FILE_UPLOAD_STARTED` | A file upload has started | `{ fileName: string, fileSize: number }` |
435
+ | `FILE_UPLOAD_COMPLETED` | A file upload has completed | `{ fileName: string, fileUrl: string }` |
436
+ | `FILE_UPLOAD_FAILED` | A file upload has failed | `{ fileName: string, error: string }` |
437
+ | `CHATBOT_ERROR` | An error occurred in the chatbot | `{ code: string, message: string }` |
438
+
439
+ Events can be handled through the `onEvent` callback in both React and plain JavaScript implementations. Each event includes a `timestamp`