@robylon/web-react-sdk 1.1.28-staging.8 → 1.1.29

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 (120) hide show
  1. package/README.md +443 -32
  2. package/dist/cjs/index.js +1 -1215
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/types/components/ChatbotContainer/ChatbotContainer.d.ts +15 -0
  5. package/dist/cjs/types/components/ChatbotContainer/index.d.ts +1 -0
  6. package/dist/cjs/types/components/ChatbotFloatingButton.d.ts +3 -0
  7. package/dist/cjs/types/components/ChatbotIframe.d.ts +2 -0
  8. package/dist/cjs/types/components/RobylonChatbot.d.ts +3 -0
  9. package/dist/cjs/types/config.d.ts +1 -1
  10. package/dist/cjs/types/constants/fontStyles.d.ts +2 -0
  11. package/dist/cjs/types/core/api.d.ts +6 -54
  12. package/dist/cjs/types/core/config.d.ts +34 -0
  13. package/dist/cjs/types/core/events.d.ts +22 -0
  14. package/dist/cjs/types/core/index.d.ts +4 -0
  15. package/dist/cjs/types/core/state.d.ts +34 -0
  16. package/dist/cjs/types/index.d.ts +5 -9
  17. package/dist/cjs/types/types.d.ts +34 -9
  18. package/dist/cjs/types/utils/fetchData.d.ts +16 -0
  19. package/dist/cjs/types/vanilla/components/ChatbotContainer.d.ts +45 -0
  20. package/dist/cjs/types/vanilla/components/ChatbotFloatingButton.d.ts +72 -0
  21. package/dist/cjs/types/vanilla/components/ChatbotIframe.d.ts +73 -0
  22. package/dist/cjs/types/vanilla/index.d.ts +18 -29
  23. package/dist/esm/index.js +1 -1208
  24. package/dist/esm/index.js.map +1 -1
  25. package/dist/esm/types/components/ChatbotContainer/ChatbotContainer.d.ts +15 -0
  26. package/dist/esm/types/components/ChatbotContainer/index.d.ts +1 -0
  27. package/dist/esm/types/components/ChatbotFloatingButton.d.ts +3 -0
  28. package/dist/esm/types/components/ChatbotIframe.d.ts +2 -0
  29. package/dist/esm/types/components/RobylonChatbot.d.ts +3 -0
  30. package/dist/esm/types/config.d.ts +1 -1
  31. package/dist/esm/types/constants/fontStyles.d.ts +2 -0
  32. package/dist/esm/types/core/api.d.ts +6 -54
  33. package/dist/esm/types/core/config.d.ts +34 -0
  34. package/dist/esm/types/core/events.d.ts +22 -0
  35. package/dist/esm/types/core/index.d.ts +4 -0
  36. package/dist/esm/types/core/state.d.ts +34 -0
  37. package/dist/esm/types/index.d.ts +5 -9
  38. package/dist/esm/types/types.d.ts +34 -9
  39. package/dist/esm/types/utils/fetchData.d.ts +16 -0
  40. package/dist/esm/types/vanilla/components/ChatbotContainer.d.ts +45 -0
  41. package/dist/esm/types/vanilla/components/ChatbotFloatingButton.d.ts +72 -0
  42. package/dist/esm/types/vanilla/components/ChatbotIframe.d.ts +73 -0
  43. package/dist/esm/types/vanilla/index.d.ts +18 -29
  44. package/dist/index.d.ts +115 -57
  45. package/dist/umd/robylon-chatbot.js +2 -0
  46. package/dist/umd/robylon-chatbot.js.map +1 -0
  47. package/dist/umd/types/components/ChatbotContainer/ChatbotContainer.d.ts +15 -0
  48. package/dist/umd/types/components/ChatbotContainer/index.d.ts +1 -0
  49. package/dist/umd/types/components/ChatbotFloatingButton.d.ts +3 -0
  50. package/dist/umd/types/components/ChatbotIframe.d.ts +2 -0
  51. package/dist/umd/types/components/RobylonChatbot.d.ts +3 -0
  52. package/dist/umd/types/config.d.ts +1 -1
  53. package/dist/umd/types/constants/fontStyles.d.ts +2 -0
  54. package/dist/umd/types/core/api.d.ts +6 -54
  55. package/dist/umd/types/core/config.d.ts +34 -0
  56. package/dist/umd/types/core/events.d.ts +22 -0
  57. package/dist/umd/types/core/index.d.ts +4 -0
  58. package/dist/umd/types/core/state.d.ts +34 -0
  59. package/dist/umd/types/index.d.ts +5 -9
  60. package/dist/umd/types/types.d.ts +34 -9
  61. package/dist/umd/types/utils/fetchData.d.ts +16 -0
  62. package/dist/umd/types/vanilla/components/ChatbotContainer.d.ts +45 -0
  63. package/dist/umd/types/vanilla/components/ChatbotFloatingButton.d.ts +72 -0
  64. package/dist/umd/types/vanilla/components/ChatbotIframe.d.ts +73 -0
  65. package/dist/umd/types/vanilla/index.d.ts +18 -29
  66. package/package.json +30 -85
  67. package/dist/cjs/legacy.js +0 -2
  68. package/dist/cjs/legacy.js.map +0 -1
  69. package/dist/cjs/react.js +0 -2
  70. package/dist/cjs/react.js.map +0 -1
  71. package/dist/cjs/types/core/chatbotEmbed.d.ts +0 -59
  72. package/dist/cjs/types/core/utils/color.d.ts +0 -1
  73. package/dist/cjs/types/core/utils/cookies.d.ts +0 -30
  74. package/dist/cjs/types/core/utils/environment.d.ts +0 -19
  75. package/dist/cjs/types/core/utils/logger.d.ts +0 -37
  76. package/dist/cjs/types/core/utils/system.d.ts +0 -22
  77. package/dist/cjs/types/index.legacy.d.ts +0 -7
  78. package/dist/cjs/types/index.react.d.ts +0 -9
  79. package/dist/cjs/types/index.vanilla.d.ts +0 -32
  80. package/dist/cjs/types/react/components/Chatbot.d.ts +0 -34
  81. package/dist/cjs/types/react/components/ErrorBoundary.d.ts +0 -18
  82. package/dist/cjs/types/types/config.d.ts +0 -33
  83. package/dist/cjs/types/types/index.d.ts +0 -16
  84. package/dist/esm/legacy.js +0 -2
  85. package/dist/esm/legacy.js.map +0 -1
  86. package/dist/esm/react.js +0 -2
  87. package/dist/esm/react.js.map +0 -1
  88. package/dist/esm/types/core/chatbotEmbed.d.ts +0 -59
  89. package/dist/esm/types/core/utils/color.d.ts +0 -1
  90. package/dist/esm/types/core/utils/cookies.d.ts +0 -30
  91. package/dist/esm/types/core/utils/environment.d.ts +0 -19
  92. package/dist/esm/types/core/utils/logger.d.ts +0 -37
  93. package/dist/esm/types/core/utils/system.d.ts +0 -22
  94. package/dist/esm/types/index.legacy.d.ts +0 -7
  95. package/dist/esm/types/index.react.d.ts +0 -9
  96. package/dist/esm/types/index.vanilla.d.ts +0 -32
  97. package/dist/esm/types/react/components/Chatbot.d.ts +0 -34
  98. package/dist/esm/types/react/components/ErrorBoundary.d.ts +0 -18
  99. package/dist/esm/types/types/config.d.ts +0 -33
  100. package/dist/esm/types/types/index.d.ts +0 -16
  101. package/dist/legacy.d.ts +0 -160
  102. package/dist/react.d.ts +0 -49
  103. package/dist/umd/robylon.js +0 -1230
  104. package/dist/umd/robylon.js.map +0 -1
  105. package/dist/umd/robylon.min.js +0 -2
  106. package/dist/umd/robylon.min.js.map +0 -1
  107. package/dist/umd/types/core/chatbotEmbed.d.ts +0 -59
  108. package/dist/umd/types/core/utils/color.d.ts +0 -1
  109. package/dist/umd/types/core/utils/cookies.d.ts +0 -30
  110. package/dist/umd/types/core/utils/environment.d.ts +0 -19
  111. package/dist/umd/types/core/utils/logger.d.ts +0 -37
  112. package/dist/umd/types/core/utils/system.d.ts +0 -22
  113. package/dist/umd/types/index.legacy.d.ts +0 -7
  114. package/dist/umd/types/index.react.d.ts +0 -9
  115. package/dist/umd/types/index.vanilla.d.ts +0 -32
  116. package/dist/umd/types/react/components/Chatbot.d.ts +0 -34
  117. package/dist/umd/types/react/components/ErrorBoundary.d.ts +0 -18
  118. package/dist/umd/types/types/config.d.ts +0 -33
  119. package/dist/umd/types/types/index.d.ts +0 -16
  120. package/dist/vite-compat.js +0 -76
package/README.md CHANGED
@@ -1,71 +1,482 @@
1
1
  # Robylon SDK
2
2
 
3
- The Robylon SDK provides chatbot functionality that can be used in both React and vanilla JavaScript applications.
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
 
7
- ### React
27
+ ### For React applications:
8
28
 
9
29
  ```bash
10
30
  npm install @robylon/web-react-sdk
31
+ # or
32
+ yarn add @robylon/web-react-sdk
11
33
  ```
12
34
 
13
- ### Vanilla JavaScript
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:
14
38
 
15
39
  ```html
16
- <script src="https://staging-cdn.robylon.com/1.1.28-staging.7/robylon.min.js"></script>
40
+ <script src="https://cdn.robylon.ai/sdk/latest/chatbot.js"></script>
17
41
  ```
18
42
 
19
- Or via npm:
43
+ #### Where to place the script:
20
44
 
21
- ```bash
22
- npm install @robylon/web-react-sdk
23
- ```
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"
24
50
 
25
- ## Usage
51
+ 2. **For custom HTML sites:**
26
52
 
27
- ### React
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:
28
69
 
29
70
  ```jsx
30
- import { Chatbot } from '@robylon/web-react-sdk/react';
71
+ import { Chatbot } from "@robylon/web-react-sdk";
31
72
 
32
73
  function App() {
74
+ const handleChatbotEvent = (event) => {
75
+ console.log("Chatbot event:", event.type, event.data);
76
+ };
77
+
33
78
  return (
34
79
  <div className="App">
35
- <Chatbot
36
- api_key="your-api-key"
80
+ <h1>My Website</h1>
81
+
82
+ <Chatbot
83
+ api_key="YOUR_API_KEY"
37
84
  user_id="optional-user-id"
38
- onEvent={(event) => console.log(event)}
85
+ user_token="optional-auth-token"
86
+ user_profile={{
87
+ name: "Optional User Name",
88
+ email: "optional.email@example.com",
89
+ }}
90
+ onEvent={handleChatbotEvent}
39
91
  />
40
92
  </div>
41
93
  );
42
94
  }
95
+
96
+ export default App;
97
+ ```
98
+
99
+ ### React: Event Handling
100
+
101
+ The React component accepts an `onEvent` prop for handling chatbot events:
102
+
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
+ />
43
121
  ```
44
122
 
45
- ### Vanilla JavaScript
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.
124
+
125
+ ## Plain JavaScript & No-Code Integration
126
+
127
+ > **IMPORTANT:** You will need an API key from Robylon for any integration to work.
128
+
129
+ ### Quick Embed (Easiest Method)
130
+
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:
132
+
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>
135
+ ```
136
+
137
+ Just replace `YOUR_API_KEY_HERE` with your actual Robylon API key, and you're done! No additional code is needed.
138
+
139
+ #### Quick Embed with Custom Position and Spacing
140
+
141
+ If you want to customize the position and spacing of the chatbot button, you can use this alternative version:
142
+
143
+ ```
144
+ <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>
145
+ ```
146
+
147
+ Just replace:
148
+
149
+ - `YOUR_API_KEY_HERE` with your actual API key
150
+ - `"Left"` with `"Left"` or `"Right"` for button position
151
+ - `30` with your desired side spacing in pixels
152
+ - `25` with your desired bottom spacing in pixels
153
+
154
+ #### Where to place the script:
155
+
156
+ - At the end of your HTML `<body>` section for best performance
157
+ - Or anywhere in your HTML code if you're using a website builder
158
+
159
+ There are several other ways to add the Robylon chatbot to your website or no-code platform, depending on your needs:
160
+
161
+ ### Option 1: Quick Setup - Load with Page
162
+
163
+ This is the simplest approach for any website. The chatbot loads while the page is loading but doesn't block the page from appearing.
164
+
165
+ #### What to copy:
166
+
167
+ 1️⃣ **Add this to your HTML `<head>` section:**
168
+
169
+ ```html
170
+ <script
171
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
172
+ defer
173
+ ></script>
174
+ <script>
175
+ // Initialize when page is ready
176
+ document.addEventListener("DOMContentLoaded", () => {
177
+ RobylonChatbot.create({
178
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
179
+ user_id: "optional-user-id", // Optional: remove if not needed
180
+ user_profile: {
181
+ name: "Optional User Name", // Optional: remove if not needed
182
+ email: "optional.email@example.com", // Optional: remove if not needed
183
+ },
184
+ });
185
+ });
186
+ </script>
187
+ ```
188
+
189
+ #### Complete example:
190
+
191
+ ```html
192
+ <!DOCTYPE html>
193
+ <html>
194
+ <head>
195
+ <title>Robylon SDK - Quick Setup</title>
196
+ <!-- COPY FROM HERE -->
197
+ <script
198
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
199
+ defer
200
+ ></script>
201
+ <script>
202
+ // Initialize when page is ready
203
+ document.addEventListener("DOMContentLoaded", () => {
204
+ RobylonChatbot.create({
205
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
206
+ user_id: "optional-user-id", // Optional: remove if not needed
207
+ user_profile: {
208
+ name: "Optional User Name", // Optional: remove if not needed
209
+ email: "optional.email@example.com", // Optional: remove if not needed
210
+ },
211
+ });
212
+ });
213
+ </script>
214
+ <!-- COPY UNTIL HERE -->
215
+ </head>
216
+ <body>
217
+ <h1>Your Website Content</h1>
218
+ <!-- Your website content here -->
219
+ </body>
220
+ </html>
221
+ ```
222
+
223
+ ### Option 2: Reliable Loading - After DOM is Ready
224
+
225
+ This approach ensures the chatbot only initializes after your page is fully loaded, making it more reliable for websites with complex layouts.
226
+
227
+ #### What to copy:
228
+
229
+ 1️⃣ **Add this to your HTML `<head>` section:**
230
+
231
+ ```html
232
+ <script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"></script>
233
+ ```
234
+
235
+ 2️⃣ **Add this at the end of your HTML `<body>` section:**
236
+
237
+ ```html
238
+ <script>
239
+ // Wait for page to be fully loaded before showing chatbot
240
+ document.addEventListener("DOMContentLoaded", () => {
241
+ RobylonChatbot.create({
242
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
243
+ user_id: "optional-user-id", // Optional: remove if not needed
244
+ user_profile: {
245
+ name: "Optional User Name", // Optional: remove if not needed
246
+ email: "optional.email@example.com", // Optional: remove if not needed
247
+ },
248
+ });
249
+ });
250
+ </script>
251
+ ```
252
+
253
+ #### Complete example:
254
+
255
+ ```html
256
+ <!DOCTYPE html>
257
+ <html>
258
+ <head>
259
+ <title>Robylon SDK - Reliable Loading</title>
260
+ <!-- COPY FROM HERE -->
261
+ <script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"></script>
262
+ <!-- COPY UNTIL HERE -->
263
+ </head>
264
+ <body>
265
+ <h1>Your Website Content</h1>
266
+ <!-- Your website content here -->
267
+
268
+ <script>
269
+ // Wait for page to be fully loaded before showing chatbot
270
+ document.addEventListener("DOMContentLoaded", () => {
271
+ RobylonChatbot.create({
272
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
273
+ user_id: "optional-user-id", // Optional: remove if not needed
274
+ user_profile: {
275
+ name: "Optional User Name", // Optional: remove if not needed
276
+ email: "optional.email@example.com", // Optional: remove if not needed
277
+ },
278
+ });
279
+ });
280
+ </script>
281
+ </body>
282
+ </html>
283
+ ```
284
+
285
+ ### Option 3: User Context - Initialize After User Data
286
+
287
+ This approach loads the chatbot after user data is available. Great for websites where you want to personalize the chat experience.
288
+
289
+ #### What to copy:
290
+
291
+ 1️⃣ **Add this to your HTML `<head>` section:**
292
+
293
+ ```html
294
+ <script
295
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
296
+ defer
297
+ ></script>
298
+ ```
299
+
300
+ 2️⃣ **Add this script at the end of your HTML `<body>` section:**
301
+
302
+ ```html
303
+ <script>
304
+ // Wait for page to be ready
305
+ document.addEventListener("DOMContentLoaded", () => {
306
+ // Get your user data (replace this with your own method)
307
+ getUserData().then((user) => {
308
+ // Initialize chatbot with user info
309
+ RobylonChatbot.create({
310
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
311
+ user_id: user.id,
312
+ user_profile: {
313
+ name: user.name,
314
+ email: user.email,
315
+ },
316
+ });
317
+ });
318
+ });
319
+
320
+ // Example function to get user data - replace with your own
321
+ function getUserData() {
322
+ // This is just a placeholder - replace with your actual code
323
+ return Promise.resolve({
324
+ id: "user123",
325
+ name: "Jane Smith",
326
+ email: "jane@example.com",
327
+ });
328
+ }
329
+ </script>
330
+ ```
331
+
332
+ #### Complete example:
333
+
334
+ ```html
335
+ <!DOCTYPE html>
336
+ <html>
337
+ <head>
338
+ <title>My Website</title>
339
+ <!-- COPY FROM HERE -->
340
+ <script
341
+ src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
342
+ defer
343
+ ></script>
344
+ <!-- COPY UNTIL HERE -->
345
+ </head>
346
+ <body>
347
+ <h1>Your Website Content</h1>
348
+ <!-- Your website content here -->
349
+
350
+ <!-- COPY FROM HERE -->
351
+ <script>
352
+ // Wait for page to be ready
353
+ document.addEventListener("DOMContentLoaded", () => {
354
+ // Get your user data (replace this with your own method)
355
+ getUserData().then((user) => {
356
+ // Initialize chatbot with user info
357
+ RobylonChatbot.create({
358
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
359
+ user_id: user.id,
360
+ user_profile: {
361
+ name: user.name,
362
+ email: user.email,
363
+ },
364
+ });
365
+ });
366
+ });
367
+
368
+ // Example function to get user data - replace with your own
369
+ function getUserData() {
370
+ // This is just a placeholder - replace with your actual code
371
+ return Promise.resolve({
372
+ id: "user123",
373
+ name: "Jane Smith",
374
+ email: "jane@example.com",
375
+ });
376
+ }
377
+ </script>
378
+ <!-- COPY UNTIL HERE -->
379
+ </body>
380
+ </html>
381
+ ```
382
+
383
+ ### Plain JS & No-Code: Event Handling
384
+
385
+ You can handle chatbot events in plain JavaScript using the `onEvent` callback:
386
+
387
+ #### What to copy:
46
388
 
47
389
  ```javascript
48
- // From CDN
49
- Robylon.create({
50
- api_key: 'your-api-key',
51
- user_id: 'optional-user-id',
52
- onEvent: (event) => console.log(event)
53
- }).then(chatbot => {
54
- // The chatbot is now ready to use
55
- chatbot.show();
390
+ const chatbot = RobylonChatbot.create({
391
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
392
+ onEvent: function (event) {
393
+ switch (event.type) {
394
+ case "CHATBOT_LOADED":
395
+ console.log("Chatbot loaded");
396
+ break;
397
+ case "CHATBOT_OPENED":
398
+ console.log("Chatbot opened");
399
+ break;
400
+ case "CHATBOT_CLOSED":
401
+ console.log("Chatbot closed");
402
+ break;
403
+ // See the Supported Events section for all available events
404
+ }
405
+ },
56
406
  });
57
407
 
58
- // From npm module
59
- import { create } from '@robylon/web-react-sdk';
408
+ // The chatbot instance provides methods to control the chatbot
409
+ // chatbot.show(); // Show the chatbot
410
+ // chatbot.hide(); // Hide the chatbot
411
+ // chatbot.toggle(); // Toggle visibility
412
+ // chatbot.destroy(); // Remove the chatbot from the page
413
+ ```
414
+
415
+ ## Configuration Options
416
+
417
+ The SDK supports the following configuration options for both React and plain JavaScript implementations:
60
418
 
61
- create({
62
- api_key: 'your-api-key',
63
- user_id: 'optional-user-id'
64
- }).then(chatbot => {
65
- chatbot.show();
419
+ | Option | Type | Description | Required/Optional |
420
+ | ------------- | -------- | ----------------------------------------------- | ----------------- |
421
+ | api_key | string | Your Robylon API key | Required |
422
+ | user_id | string | User identifier for conversation tracking | Optional |
423
+ | user_token | string | Authentication token | Optional |
424
+ | user_profile | object | Additional user information | Optional |
425
+ | onEvent | function | Event handler for chatbot interactions | Optional |
426
+ | position | string | Position of the chatbot button ("Left"/"Right") | Optional |
427
+ | sideSpacing | number | Distance from the side of the screen (in px) | Optional |
428
+ | bottomSpacing | number | Distance from the bottom of the screen (in px) | Optional |
429
+
430
+ ### Position and Spacing Configuration
431
+
432
+ 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.
433
+
434
+ #### React Example:
435
+
436
+ ```jsx
437
+ <Chatbot
438
+ api_key="YOUR_API_KEY"
439
+ position="Left"
440
+ sideSpacing={30}
441
+ bottomSpacing={25}
442
+ />
443
+ ```
444
+
445
+ #### Plain JavaScript Example:
446
+
447
+ ```javascript
448
+ RobylonChatbot.create({
449
+ api_key: "YOUR_API_KEY",
450
+ position: "Left",
451
+ sideSpacing: 30,
452
+ bottomSpacing: 25,
66
453
  });
67
454
  ```
68
455
 
69
- ## Documentation
456
+ ## Event Handling
457
+
458
+ ### Supported Events
459
+
460
+ The SDK emits the following events that you can listen for in both React and plain JavaScript implementations:
461
+
462
+ | Event Type | Description | Data |
463
+ | ---------------------------- | ----------------------------------------------- | ---------------------------------------- |
464
+ | `CHATBOT_BUTTON_LOADED` | The chatbot button has been loaded and rendered | - |
465
+ | `CHATBOT_LOADED` | The chatbot iframe has been loaded | - |
466
+ | `CHATBOT_OPENED` | The chatbot has been opened | - |
467
+ | `CHATBOT_CLOSED` | The chatbot has been closed | - |
468
+ | `CHAT_INITIALIZED` | The chat session has been initialized | - |
469
+ | `CHAT_INITIALIZATION_FAILED` | The chat session failed to initialize | `{ error: string }` |
470
+ | `SESSION_REFRESHED` | The chat session has been refreshed | - |
471
+ | `MESSAGE_SENT` | User has sent a message | `{ message: string }` |
472
+ | `MESSAGE_RECEIVED` | A message was received from the chatbot | `{ message: string }` |
473
+ | `CONVERSATION_STARTED` | A new conversation has started | `{ conversationId: string }` |
474
+ | `CONVERSATION_ENDED` | The current conversation has ended | `{ conversationId: string }` |
475
+ | `USER_AUTHENTICATED` | The user has been authenticated | `{ userId: string }` |
476
+ | `USER_PROFILE_UPDATED` | The user profile has been updated | `{ profile: object }` |
477
+ | `USER_FEEDBACK_SUBMITTED` | The user has submitted feedback | `{ rating: number, comment: string }` |
478
+ | `FILE_UPLOAD_STARTED` | A file upload has started | `{ fileName: string, fileSize: number }` |
479
+ | `FILE_UPLOAD_COMPLETED` | A file upload has completed | `{ fileName: string, fileUrl: string }` |
480
+ | `FILE_UPLOAD_FAILED` | A file upload has failed | `{ fileName: string, error: string }` |
70
481
 
71
- For detailed documentation, please visit: [https://app.robylon.ai/docs](https://app.robylon.ai/docs)
482
+ | `CHATBOT_ERROR`