@robylon/web-react-sdk 1.1.32-staging.0 → 1.1.32

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