@robylon/web-react-sdk 1.1.30-staging.4 → 1.1.30

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 (57) hide show
  1. package/README.md +403 -166
  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 +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/constants/fontStyles.d.ts +2 -0
  10. package/dist/cjs/types/core/state.d.ts +1 -0
  11. package/dist/cjs/types/index.d.ts +2 -1
  12. package/dist/cjs/types/types.d.ts +30 -0
  13. package/dist/cjs/types/utils/fetchData.d.ts +16 -0
  14. package/dist/cjs/types/vanilla/components/ChatbotContainer.d.ts +45 -0
  15. package/dist/cjs/types/vanilla/components/ChatbotFloatingButton.d.ts +26 -0
  16. package/dist/cjs/types/vanilla/components/ChatbotIframe.d.ts +7 -0
  17. package/dist/cjs/types/vanilla/index.d.ts +7 -4
  18. package/dist/esm/index.js +1 -1
  19. package/dist/esm/index.js.map +1 -1
  20. package/dist/esm/types/components/ChatbotContainer/ChatbotContainer.d.ts +15 -0
  21. package/dist/esm/types/components/ChatbotContainer/index.d.ts +1 -0
  22. package/dist/esm/types/components/ChatbotFloatingButton.d.ts +3 -0
  23. package/dist/esm/types/components/ChatbotIframe.d.ts +2 -0
  24. package/dist/esm/types/components/RobylonChatbot.d.ts +3 -0
  25. package/dist/esm/types/constants/fontStyles.d.ts +2 -0
  26. package/dist/esm/types/core/state.d.ts +1 -0
  27. package/dist/esm/types/index.d.ts +2 -1
  28. package/dist/esm/types/types.d.ts +30 -0
  29. package/dist/esm/types/utils/fetchData.d.ts +16 -0
  30. package/dist/esm/types/vanilla/components/ChatbotContainer.d.ts +45 -0
  31. package/dist/esm/types/vanilla/components/ChatbotFloatingButton.d.ts +26 -0
  32. package/dist/esm/types/vanilla/components/ChatbotIframe.d.ts +7 -0
  33. package/dist/esm/types/vanilla/index.d.ts +7 -4
  34. package/dist/index.d.ts +41 -6
  35. package/dist/umd/robylon-chatbot.js +1 -1
  36. package/dist/umd/robylon-chatbot.js.map +1 -1
  37. package/dist/umd/types/components/ChatbotContainer/ChatbotContainer.d.ts +15 -0
  38. package/dist/umd/types/components/ChatbotContainer/index.d.ts +1 -0
  39. package/dist/umd/types/components/ChatbotFloatingButton.d.ts +3 -0
  40. package/dist/umd/types/components/ChatbotIframe.d.ts +2 -0
  41. package/dist/umd/types/components/RobylonChatbot.d.ts +3 -0
  42. package/dist/umd/types/constants/fontStyles.d.ts +2 -0
  43. package/dist/umd/types/core/state.d.ts +1 -0
  44. package/dist/umd/types/index.d.ts +2 -1
  45. package/dist/umd/types/types.d.ts +30 -0
  46. package/dist/umd/types/utils/fetchData.d.ts +16 -0
  47. package/dist/umd/types/vanilla/components/ChatbotContainer.d.ts +45 -0
  48. package/dist/umd/types/vanilla/components/ChatbotFloatingButton.d.ts +26 -0
  49. package/dist/umd/types/vanilla/components/ChatbotIframe.d.ts +7 -0
  50. package/dist/umd/types/vanilla/index.d.ts +7 -4
  51. package/package.json +13 -2
  52. package/dist/cjs/types/types/config.d.ts +0 -33
  53. package/dist/cjs/types/types/index.d.ts +0 -16
  54. package/dist/esm/types/types/config.d.ts +0 -33
  55. package/dist/esm/types/types/index.d.ts +0 -16
  56. package/dist/umd/types/types/config.d.ts +0 -33
  57. package/dist/umd/types/types/index.d.ts +0 -16
package/README.md CHANGED
@@ -1,10 +1,30 @@
1
- # Robylon Web React SDK
2
-
3
- A lightweight SDK for integrating Robylon's AI-powered chatbot into your web applications. Available for both React and vanilla JavaScript.
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
 
7
- ### React
27
+ ### For React applications:
8
28
 
9
29
  ```bash
10
30
  npm install @robylon/web-react-sdk
@@ -12,234 +32,451 @@ npm install @robylon/web-react-sdk
12
32
  yarn add @robylon/web-react-sdk
13
33
  ```
14
34
 
15
- ### 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:
16
38
 
17
39
  ```html
18
- <script src="https://unpkg.com/@robylon/web-react-sdk/dist/umd/robylon-chatbot.js"></script>
40
+ <script src="https://cdn.robylon.ai/sdk/latest/chatbot.js"></script>
19
41
  ```
20
42
 
21
- ## Quick Start
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
22
61
 
23
- ### React
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:
24
69
 
25
70
  ```jsx
26
71
  import { Chatbot } from "@robylon/web-react-sdk";
27
72
 
28
73
  function App() {
29
74
  const handleChatbotEvent = (event) => {
30
- logger.log(`Chatbot event: ${event.type}`, event);
75
+ console.log("Chatbot event:", event.type, event.data);
31
76
  };
32
77
 
33
78
  return (
34
- <Chatbot
35
- api_key="your-api-key"
36
- user_id="user-id"
37
- user_token="optional-auth-token"
38
- user_profile={{
39
- email: "user@example.com",
40
- name: "John Doe",
41
- mobile: "1234567890",
42
- }}
43
- onEvent={handleChatbotEvent}
44
- />
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>
45
93
  );
46
94
  }
95
+
96
+ export default App;
47
97
  ```
48
98
 
49
- ### Vanilla JavaScript
99
+ ### React: Event Handling
50
100
 
51
- ```html
52
- <!-- Include the SDK -->
53
- <script src="https://unpkg.com/@robylon/web-react-sdk/dist/umd/robylon-chatbot.js"></script>
101
+ The React component accepts an `onEvent` prop for handling chatbot events:
54
102
 
55
- <script>
56
- // Initialize the chatbot
57
- const chatbot = new RobylonChatbot.RobylonChatbot({
58
- api_key: "your-api-key",
59
- user_id: "optional-user-id", // Optional
60
- user_token: "optional-token", // Optional
61
- user_profile: {
62
- // Optional
63
- name: "John Doe",
64
- email: "user@example.com",
65
- mobile: "1234567890",
66
- },
67
- onEvent: function (event) {
68
- // Handle events
69
- console.log("Event:", event);
70
- },
71
- });
72
-
73
- // Control methods
74
- // chatbot.show(); // Show the chatbot
75
- // chatbot.hide(); // Hide the chatbot
76
- // chatbot.toggle(); // Toggle visibility
77
- // chatbot.destroy(); // Remove the chatbot
78
- </script>
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
+ />
79
121
  ```
80
122
 
81
- ## Configuration
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.
82
128
 
83
- ### Required Props
129
+ ### Quick Embed (Easiest Method)
84
130
 
85
- - `api_key`: Your Robylon API key
86
- - `user_id`: Unique identifier for the current user
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:
87
132
 
88
- ### Optional Props
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
+ ```
89
136
 
90
- - `user_token`: Authentication token for the user
91
- - `user_profile`: Object containing user information
92
- - `email`: User's email address
93
- - `name`: User's name
94
- - `mobile`: User's mobile number
95
- - `onEvent`: Callback function to handle chatbot events
137
+ Just replace `YOUR_API_KEY_HERE` with your actual Robylon API key, and you're done! No additional code is needed.
96
138
 
97
- ### Event Handling
139
+ #### Quick Embed with Custom Position and Spacing
98
140
 
99
- The SDK emits various events that you can listen to using the `onEvent` prop. Each event has the following structure:
141
+ If you want to customize the position and spacing of the chatbot button, you can use this alternative version:
100
142
 
101
- ```typescript
102
- interface ChatbotEvent {
103
- type: ChatbotEventType;
104
- timestamp: number;
105
- data?: any;
106
- }
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>
107
145
  ```
108
146
 
109
- Available event types:
147
+ Just replace:
110
148
 
111
- ```typescript
112
- enum ChatbotEventType {
113
- CHATBOT_BUTTON_LOADED = "CHATBOT_BUTTON_LOADED", // When the chat button is rendered
114
- CHATBOT_OPENED = "CHATBOT_OPENED", // When chat window is opened
115
- CHATBOT_CLOSED = "CHATBOT_CLOSED", // When chat window is closed
116
- CHATBOT_APP_READY = "CHATBOT_APP_READY", // When SDK is fully initialized
117
- CHATBOT_LOADED = "CHATBOT_LOADED", // When chatbot iframe is loaded
118
- CHAT_INITIALIZED = "CHAT_INITIALIZED", // When chat session is initialized
119
- SESSION_REFRESHED = "SESSION_REFRESHED", // When chat session is refreshed
120
- CHAT_INITIALIZATION_FAILED = "CHAT_INITIALIZATION_FAILED", // When initialization fails
121
- }
122
- ```
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
123
153
 
124
- Example usage:
154
+ #### Where to place the script:
125
155
 
126
- ```jsx
127
- function App() {
128
- const handleChatbotEvent = (event) => {
129
- switch (event.type) {
130
- case "CHATBOT_BUTTON_CLICKED":
131
- logger.log("Chat button clicked at:", new Date(event.timestamp));
132
- break;
133
- case "CHATBOT_OPENED":
134
- logger.log("Chat window opened at:", new Date(event.timestamp));
135
- break;
136
- case "CHAT_INITIALIZED":
137
- logger.log("Chat session initialized");
138
- break;
139
- case "CHAT_INITIALIZATION_FAILED":
140
- console.error("Chat initialization failed:", event.data);
141
- break;
142
- }
143
- };
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
144
158
 
145
- return (
146
- <Chatbot
147
- api_key="your-api-key"
148
- user_id="user-id"
149
- onEvent={handleChatbotEvent}
150
- />
151
- );
152
- }
153
- ```
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:**
154
168
 
155
- ### Automatically Included Information
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
+ ```
156
188
 
157
- The SDK automatically collects and includes the following system information:
189
+ #### Complete example:
158
190
 
159
- - `platform`: Always set to "web"
160
- - `os`: User's operating system
161
- - `browser`: User's browser type
162
- - `device`: Device type (desktop/mobile/tablet)
163
- - `screen_size`: User's screen dimensions (width and height)
164
- - `sdk_version`: Current version of the SDK
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
+ ```
165
222
 
166
- ## Features
223
+ ### Option 2: Reliable Loading - After DOM is Ready
167
224
 
168
- - Persistent chat interface
169
- - Responsive design for all screen sizes
170
- - Automatic system information collection
171
- - Customizable chat bubble
172
- - Session management
173
- - Secure communication channel
174
- - Cross-browser compatibility
175
- - Comprehensive event system
225
+ This approach ensures the chatbot only initializes after your page is fully loaded, making it more reliable for websites with complex layouts.
176
226
 
177
- ## Browser Support
227
+ #### What to copy:
178
228
 
179
- The SDK supports all modern browsers and includes fallbacks for:
229
+ 1️⃣ **Add this to your HTML `<head>` section:**
180
230
 
181
- - User agent detection
182
- - Screen size detection
183
- - Browser identification
184
- - Device type detection
231
+ ```html
232
+ <script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"></script>
233
+ ```
185
234
 
186
- ## Development
235
+ 2️⃣ **Add this at the end of your HTML `<body>` section:**
187
236
 
188
- ### Creating Branches
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
+ ```
189
252
 
190
- Always use the provided script to create new branches:
253
+ #### Complete example:
191
254
 
192
- ```bash
193
- npm run branch
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>
194
283
  ```
195
284
 
196
- This ensures proper version control and naming conventions.
285
+ ### Option 3: User Context - Initialize After User Data
197
286
 
198
- ## Vanilla JavaScript API
287
+ This approach loads the chatbot after user data is available. Great for websites where you want to personalize the chat experience.
199
288
 
200
- The vanilla JavaScript version provides a simple API for controlling the chatbot:
289
+ #### What to copy:
201
290
 
202
- ### Initialization
291
+ 1️⃣ **Add this to your HTML `<head>` section:**
203
292
 
204
- ```javascript
205
- const chatbot = new RobylonChatbot.RobylonChatbot({
206
- api_key: "your-api-key",
207
- user_id: "optional-user-id",
208
- user_token: "optional-token",
209
- user_profile: {
210
- name: "John Doe",
211
- email: "user@example.com",
212
- },
213
- onEvent: function (event) {
214
- console.log("Event:", event);
215
- },
216
- });
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>
217
330
  ```
218
331
 
219
- ### Methods
332
+ #### Complete example:
220
333
 
221
- - `chatbot.show()` - Shows the chatbot
222
- - `chatbot.hide()` - Hides the chatbot
223
- - `chatbot.toggle()` - Toggles the chatbot visibility
224
- - `chatbot.destroy()` - Removes the chatbot from the DOM
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
+ ```
225
382
 
226
- ### Event Handling
383
+ ### Plain JS & No-Code: Event Handling
227
384
 
228
- Event handling works the same way as in the React version:
385
+ You can handle chatbot events in plain JavaScript using the `onEvent` callback:
386
+
387
+ #### What to copy:
229
388
 
230
389
  ```javascript
231
- const chatbot = new RobylonChatbot.RobylonChatbot({
232
- api_key: "your-api-key",
390
+ const chatbot = RobylonChatbot.create({
391
+ api_key: "YOUR_API_KEY", // Replace with your actual API key
233
392
  onEvent: function (event) {
234
393
  switch (event.type) {
235
- case "CHATBOT_BUTTON_CLICKED":
236
- console.log("Chat button clicked at:", new Date(event.timestamp));
394
+ case "CHATBOT_LOADED":
395
+ console.log("Chatbot loaded");
237
396
  break;
238
397
  case "CHATBOT_OPENED":
239
- console.log("Chat window opened at:", new Date(event.timestamp));
398
+ console.log("Chatbot opened");
399
+ break;
400
+ case "CHATBOT_CLOSED":
401
+ console.log("Chatbot closed");
240
402
  break;
241
- // Handle other events...
403
+ // See the Supported Events section for all available events
242
404
  }
243
405
  },
244
406
  });
407
+
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
245
413
  ```
414
+
415
+ ## Configuration Options
416
+
417
+ The SDK supports the following configuration options for both React and plain JavaScript implementations:
418
+
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,
453
+ });
454
+ ```
455
+
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 }` |
481
+
482
+ | `CHATBOT_ERROR`