npm - @robylon/web-react-sdk - Versions diffs - 1.1.28-staging.7 → 1.1.28 - Mend

@robylon/web-react-sdk 1.1.28-staging.7 → 1.1.28

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 (110) hide show

package/README.md +402 -34
package/dist/cjs/index.js +1 -5534
package/dist/cjs/index.js.map +1 -1
package/dist/cjs/types/components/ChatbotContainer/ChatbotContainer.d.ts +12 -0
package/dist/cjs/types/components/ChatbotContainer/index.d.ts +1 -0
package/dist/cjs/types/config.d.ts +1 -1
package/dist/cjs/types/constants/fontStyles.d.ts +2 -0
package/dist/cjs/types/core/api.d.ts +6 -54
package/dist/cjs/types/core/config.d.ts +34 -0
package/dist/cjs/types/core/events.d.ts +22 -0
package/dist/cjs/types/core/index.d.ts +4 -0
package/dist/cjs/types/core/state.d.ts +34 -0
package/dist/cjs/types/index.d.ts +5 -9
package/dist/cjs/types/types.d.ts +34 -9
package/dist/cjs/types/utils/fetchData.d.ts +16 -0
package/dist/cjs/types/vanilla/components/ChatbotContainer.d.ts +45 -0
package/dist/cjs/types/vanilla/components/ChatbotFloatingButton.d.ts +69 -0
package/dist/cjs/types/vanilla/components/ChatbotIframe.d.ts +71 -0
package/dist/cjs/types/vanilla/index.d.ts +15 -29
package/dist/esm/index.js +1 -5527
package/dist/esm/index.js.map +1 -1
package/dist/esm/types/components/ChatbotContainer/ChatbotContainer.d.ts +12 -0
package/dist/esm/types/components/ChatbotContainer/index.d.ts +1 -0
package/dist/esm/types/config.d.ts +1 -1
package/dist/esm/types/constants/fontStyles.d.ts +2 -0
package/dist/esm/types/core/api.d.ts +6 -54
package/dist/esm/types/core/config.d.ts +34 -0
package/dist/esm/types/core/events.d.ts +22 -0
package/dist/esm/types/core/index.d.ts +4 -0
package/dist/esm/types/core/state.d.ts +34 -0
package/dist/esm/types/index.d.ts +5 -9
package/dist/esm/types/types.d.ts +34 -9
package/dist/esm/types/utils/fetchData.d.ts +16 -0
package/dist/esm/types/vanilla/components/ChatbotContainer.d.ts +45 -0
package/dist/esm/types/vanilla/components/ChatbotFloatingButton.d.ts +69 -0
package/dist/esm/types/vanilla/components/ChatbotIframe.d.ts +71 -0
package/dist/esm/types/vanilla/index.d.ts +15 -29
package/dist/index.d.ts +101 -77
package/dist/umd/robylon-chatbot.js +2 -0
package/dist/umd/robylon-chatbot.js.map +1 -0
package/dist/umd/types/components/ChatbotContainer/ChatbotContainer.d.ts +12 -0
package/dist/umd/types/components/ChatbotContainer/index.d.ts +1 -0
package/dist/umd/types/config.d.ts +1 -1
package/dist/umd/types/constants/fontStyles.d.ts +2 -0
package/dist/umd/types/core/api.d.ts +6 -54
package/dist/umd/types/core/config.d.ts +34 -0
package/dist/umd/types/core/events.d.ts +22 -0
package/dist/umd/types/core/index.d.ts +4 -0
package/dist/umd/types/core/state.d.ts +34 -0
package/dist/umd/types/index.d.ts +5 -9
package/dist/umd/types/types.d.ts +34 -9
package/dist/umd/types/utils/fetchData.d.ts +16 -0
package/dist/umd/types/vanilla/components/ChatbotContainer.d.ts +45 -0
package/dist/umd/types/vanilla/components/ChatbotFloatingButton.d.ts +69 -0
package/dist/umd/types/vanilla/components/ChatbotIframe.d.ts +71 -0
package/dist/umd/types/vanilla/index.d.ts +15 -29
package/package.json +30 -82
package/dist/cjs/legacy.js +0 -2
package/dist/cjs/legacy.js.map +0 -1
package/dist/cjs/react.js +0 -2
package/dist/cjs/react.js.map +0 -1
package/dist/cjs/types/core/chatbotEmbed.d.ts +0 -59
package/dist/cjs/types/core/utils/color.d.ts +0 -1
package/dist/cjs/types/core/utils/cookies.d.ts +0 -30
package/dist/cjs/types/core/utils/environment.d.ts +0 -19
package/dist/cjs/types/core/utils/logger.d.ts +0 -37
package/dist/cjs/types/core/utils/system.d.ts +0 -22
package/dist/cjs/types/index.legacy.d.ts +0 -7
package/dist/cjs/types/index.react.d.ts +0 -9
package/dist/cjs/types/index.vanilla.d.ts +0 -32
package/dist/cjs/types/react/components/Chatbot.d.ts +0 -34
package/dist/cjs/types/react/components/ErrorBoundary.d.ts +0 -18
package/dist/cjs/types/types/config.d.ts +0 -33
package/dist/cjs/types/types/index.d.ts +0 -16
package/dist/esm/legacy.js +0 -2
package/dist/esm/legacy.js.map +0 -1
package/dist/esm/react.js +0 -2
package/dist/esm/react.js.map +0 -1
package/dist/esm/types/core/chatbotEmbed.d.ts +0 -59
package/dist/esm/types/core/utils/color.d.ts +0 -1
package/dist/esm/types/core/utils/cookies.d.ts +0 -30
package/dist/esm/types/core/utils/environment.d.ts +0 -19
package/dist/esm/types/core/utils/logger.d.ts +0 -37
package/dist/esm/types/core/utils/system.d.ts +0 -22
package/dist/esm/types/index.legacy.d.ts +0 -7
package/dist/esm/types/index.react.d.ts +0 -9
package/dist/esm/types/index.vanilla.d.ts +0 -32
package/dist/esm/types/react/components/Chatbot.d.ts +0 -34
package/dist/esm/types/react/components/ErrorBoundary.d.ts +0 -18
package/dist/esm/types/types/config.d.ts +0 -33
package/dist/esm/types/types/index.d.ts +0 -16
package/dist/legacy.d.ts +0 -160
package/dist/react.d.ts +0 -49
package/dist/umd/robylon.js +0 -5545
package/dist/umd/robylon.js.map +0 -1
package/dist/umd/robylon.min.js +0 -20
package/dist/umd/robylon.min.js.map +0 -1
package/dist/umd/types/core/chatbotEmbed.d.ts +0 -59
package/dist/umd/types/core/utils/color.d.ts +0 -1
package/dist/umd/types/core/utils/cookies.d.ts +0 -30
package/dist/umd/types/core/utils/environment.d.ts +0 -19
package/dist/umd/types/core/utils/logger.d.ts +0 -37
package/dist/umd/types/core/utils/system.d.ts +0 -22
package/dist/umd/types/index.legacy.d.ts +0 -7
package/dist/umd/types/index.react.d.ts +0 -9
package/dist/umd/types/index.vanilla.d.ts +0 -32
package/dist/umd/types/react/components/Chatbot.d.ts +0 -34
package/dist/umd/types/react/components/ErrorBoundary.d.ts +0 -18
package/dist/umd/types/types/config.d.ts +0 -33
package/dist/umd/types/types/index.d.ts +0 -16

package/README.md CHANGED Viewed

@@ -1,71 +1,439 @@
 # Robylon SDK
-The Robylon SDK provides chatbot functionality that can be used in both React and vanilla JavaScript applications.
+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.
+## Table of Contents
+- [Installation](#installation)
+- [React SDK Usage](#react-sdk-usage)
+- [Plain JavaScript & No-Code Integration](#plain-javascript--no-code-integration)
+  - [Quick Embed (Easiest Method)](#quick-embed-easiest-method)
+  - [Option 1: Quick Setup - Load with Page](#option-1-quick-setup---load-with-page)
+  - [Option 2: Reliable Loading - After DOM is Ready](#option-2-reliable-loading---after-dom-is-ready)
+  - [Option 3: User Context - Initialize After User Data](#option-3-user-context---initialize-after-user-data)
+- [Configuration Options](#configuration-options)
+- [Event Handling](#event-handling)
+- [Customization](#customization)
+- [Troubleshooting](#troubleshooting)
+- [Platform-Specific Integration Guides](#platform-specific-integration-guides)
+  - [Webflow](#webflow-integration)
+  - [Wix](#wix-integration)
+  - [Shopify](#shopify-integration)
+  - [WordPress](#wordpress-integration)
+- [Using the SDK from CDN](#using-the-sdk-from-cdn)
 ## Installation
-### React
+### For React applications:
 ```bash
 npm install @robylon/web-react-sdk
+# or
+yarn add @robylon/web-react-sdk
 ```
-### Vanilla JavaScript
+### For plain JavaScript and no-code websites:
+Add this script to your website by copying and pasting the following code into the `<head>` section of your HTML:
 ```html
-<script src="https://staging-cdn.robylon.com/1.1.28-staging.6/robylon.min.js"></script>
+<script src="https://cdn.robylon.ai/sdk/latest/chatbot.js"></script>
 ```
-Or via npm:
+#### Where to place the script:
-```bash
-npm install @robylon/web-react-sdk
-```
+1. **For website builders (Wix, Squarespace, etc.):**
+   - Find your site editor or dashboard
+   - Look for "Custom Code", "Header Code", or "Site Settings" options
+   - Paste the script there, usually in a section labeled "Header" or "Head"
+2. **For custom HTML sites:**
+   - Open your website's HTML file in your editor
+   - Find the `<head>` section (it's near the top, between `<html>` and `<body>` tags)
+   - Paste the script tag just before the closing `</head>` tag
+3. **For WordPress:**
+   - Go to your WordPress dashboard
+   - Navigate to Appearance → Theme Editor or use a header/footer plugin
+   - Add the script to the header.php file before the closing `</head>` tag
+> **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.
-## Usage
+## React SDK Usage
-### React
+### React: Basic Implementation
+To use the Robylon SDK in a React application:
 ```jsx
-import { Chatbot } from '@robylon/web-react-sdk/react';
+import { Chatbot } from "@robylon/web-react-sdk";
 function App() {
+  const handleChatbotEvent = (event) => {
+    console.log("Chatbot event:", event.type, event.data);
+  };
   return (
     <div className="App">
-      <Chatbot
-        api_key="your-api-key"
+      <h1>My Website</h1>
+      <Chatbot
+        api_key="YOUR_API_KEY"
         user_id="optional-user-id"
-        onEvent={(event) => console.log(event)}
+        user_token="optional-auth-token"
+        user_profile={{
+          name: "Optional User Name",
+          email: "optional.email@example.com",
+        }}
+        onEvent={handleChatbotEvent}
       />
     </div>
   );
 }
+export default App;
 ```
-### Vanilla JavaScript
+### React: Event Handling
-```javascript
-// From CDN
-Robylon.create({
-  api_key: 'your-api-key',
-  user_id: 'optional-user-id',
-  onEvent: (event) => console.log(event)
-}).then(chatbot => {
-  // The chatbot is now ready to use
-  chatbot.show();
-});
+The React component accepts an `onEvent` prop for handling chatbot events:
+```jsx
+<Chatbot
+  api_key="YOUR_API_KEY"
+  onEvent={(event) => {
+    switch (event.type) {
+      case "CHATBOT_LOADED":
+        console.log("Chatbot loaded");
+        break;
+      case "CHATBOT_OPENED":
+        console.log("Chatbot opened");
+        break;
+      case "CHATBOT_CLOSED":
+        console.log("Chatbot closed");
+        break;
+      // See the Supported Events section for all available events
+    }
+  }}
+/>
+```
+The `Chatbot` component renders a floating button that opens a chat interface when clicked. It handles all the communication with the Robylon backend services.
+## Plain JavaScript & No-Code Integration
+> **IMPORTANT:** You will need an API key from Robylon for any integration to work.
+### Quick Embed (Easiest Method)
+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:
+```
+<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>
+```
+Just replace `YOUR_API_KEY_HERE` with your actual Robylon API key, and you're done! No additional code is needed.
+#### Where to place the script:
+- At the end of your HTML `<body>` section for best performance
+- Or anywhere in your HTML code if you're using a website builder
+There are several other ways to add the Robylon chatbot to your website or no-code platform, depending on your needs:
+### Option 1: Quick Setup - Load with Page
+This is the simplest approach for any website. The chatbot loads while the page is loading but doesn't block the page from appearing.
+#### What to copy:
+1️⃣ **Add this to your HTML `<head>` section:**
+```html
+<script
+  src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+  defer
+></script>
+<script>
+  // Initialize when page is ready
+  document.addEventListener("DOMContentLoaded", () => {
+    RobylonChatbot.create({
+      api_key: "YOUR_API_KEY", // Replace with your actual API key
+      user_id: "optional-user-id", // Optional: remove if not needed
+      user_profile: {
+        name: "Optional User Name", // Optional: remove if not needed
+        email: "optional.email@example.com", // Optional: remove if not needed
+      },
+    });
+  });
+</script>
+```
+#### Complete example:
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Robylon SDK - Quick Setup</title>
+    <!-- COPY FROM HERE -->
+    <script
+      src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+      defer
+    ></script>
+    <script>
+      // Initialize when page is ready
+      document.addEventListener("DOMContentLoaded", () => {
+        RobylonChatbot.create({
+          api_key: "YOUR_API_KEY", // Replace with your actual API key
+          user_id: "optional-user-id", // Optional: remove if not needed
+          user_profile: {
+            name: "Optional User Name", // Optional: remove if not needed
+            email: "optional.email@example.com", // Optional: remove if not needed
+          },
+        });
+      });
+    </script>
+    <!-- COPY UNTIL HERE -->
+  </head>
+  <body>
+    <h1>Your Website Content</h1>
+    <!-- Your website content here -->
+  </body>
+</html>
+```
+### Option 2: Reliable Loading - After DOM is Ready
-// From npm module
-import { create } from '@robylon/web-react-sdk';
+This approach ensures the chatbot only initializes after your page is fully loaded, making it more reliable for websites with complex layouts.
-create({
-  api_key: 'your-api-key',
-  user_id: 'optional-user-id'
-}).then(chatbot => {
-  chatbot.show();
+#### What to copy:
+1️⃣ **Add this to your HTML `<head>` section:**
+```html
+<script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"></script>
+```
+2️⃣ **Add this at the end of your HTML `<body>` section:**
+```html
+<script>
+  // Wait for page to be fully loaded before showing chatbot
+  document.addEventListener("DOMContentLoaded", () => {
+    RobylonChatbot.create({
+      api_key: "YOUR_API_KEY", // Replace with your actual API key
+      user_id: "optional-user-id", // Optional: remove if not needed
+      user_profile: {
+        name: "Optional User Name", // Optional: remove if not needed
+        email: "optional.email@example.com", // Optional: remove if not needed
+      },
+    });
+  });
+</script>
+```
+#### Complete example:
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Robylon SDK - Reliable Loading</title>
+    <!-- COPY FROM HERE -->
+    <script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"></script>
+    <!-- COPY UNTIL HERE -->
+  </head>
+  <body>
+    <h1>Your Website Content</h1>
+    <!-- Your website content here -->
+    <script>
+      // Wait for page to be fully loaded before showing chatbot
+      document.addEventListener("DOMContentLoaded", () => {
+        RobylonChatbot.create({
+          api_key: "YOUR_API_KEY", // Replace with your actual API key
+          user_id: "optional-user-id", // Optional: remove if not needed
+          user_profile: {
+            name: "Optional User Name", // Optional: remove if not needed
+            email: "optional.email@example.com", // Optional: remove if not needed
+          },
+        });
+      });
+    </script>
+  </body>
+</html>
+```
+### Option 3: User Context - Initialize After User Data
+This approach loads the chatbot after user data is available. Great for websites where you want to personalize the chat experience.
+#### What to copy:
+1️⃣ **Add this to your HTML `<head>` section:**
+```html
+<script
+  src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+  defer
+></script>
+```
+2️⃣ **Add this script at the end of your HTML `<body>` section:**
+```html
+<script>
+  // Wait for page to be ready
+  document.addEventListener("DOMContentLoaded", () => {
+    // Get your user data (replace this with your own method)
+    getUserData().then((user) => {
+      // Initialize chatbot with user info
+      RobylonChatbot.create({
+        api_key: "YOUR_API_KEY", // Replace with your actual API key
+        user_id: user.id,
+        user_profile: {
+          name: user.name,
+          email: user.email,
+        },
+      });
+    });
+  });
+  // Example function to get user data - replace with your own
+  function getUserData() {
+    // This is just a placeholder - replace with your actual code
+    return Promise.resolve({
+      id: "user123",
+      name: "Jane Smith",
+      email: "jane@example.com",
+    });
+  }
+</script>
+```
+#### Complete example:
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My Website</title>
+    <!-- COPY FROM HERE -->
+    <script
+      src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+      defer
+    ></script>
+    <!-- COPY UNTIL HERE -->
+  </head>
+  <body>
+    <h1>Your Website Content</h1>
+    <!-- Your website content here -->
+    <!-- COPY FROM HERE -->
+    <script>
+      // Wait for page to be ready
+      document.addEventListener("DOMContentLoaded", () => {
+        // Get your user data (replace this with your own method)
+        getUserData().then((user) => {
+          // Initialize chatbot with user info
+          RobylonChatbot.create({
+            api_key: "YOUR_API_KEY", // Replace with your actual API key
+            user_id: user.id,
+            user_profile: {
+              name: user.name,
+              email: user.email,
+            },
+          });
+        });
+      });
+      // Example function to get user data - replace with your own
+      function getUserData() {
+        // This is just a placeholder - replace with your actual code
+        return Promise.resolve({
+          id: "user123",
+          name: "Jane Smith",
+          email: "jane@example.com",
+        });
+      }
+    </script>
+    <!-- COPY UNTIL HERE -->
+  </body>
+</html>
+```
+### Plain JS & No-Code: Event Handling
+You can handle chatbot events in plain JavaScript using the `onEvent` callback:
+#### What to copy:
+```javascript
+const chatbot = RobylonChatbot.create({
+  api_key: "YOUR_API_KEY", // Replace with your actual API key
+  onEvent: function (event) {
+    switch (event.type) {
+      case "CHATBOT_LOADED":
+        console.log("Chatbot loaded");
+        break;
+      case "CHATBOT_OPENED":
+        console.log("Chatbot opened");
+        break;
+      case "CHATBOT_CLOSED":
+        console.log("Chatbot closed");
+        break;
+      // See the Supported Events section for all available events
+    }
+  },
 });
+// The chatbot instance provides methods to control the chatbot
+// chatbot.show();    // Show the chatbot
+// chatbot.hide();    // Hide the chatbot
+// chatbot.toggle();  // Toggle visibility
+// chatbot.destroy(); // Remove the chatbot from the page
 ```
-## Documentation
+## Configuration Options
+The SDK supports the following configuration options for both React and plain JavaScript implementations:
+| Option       | Type     | Description                               | Required/Optional |
+| ------------ | -------- | ----------------------------------------- | ----------------- |
+| api_key      | string   | Your Robylon API key                      | Required          |
+| user_id      | string   | User identifier for conversation tracking | Optional          |
+| user_token   | string   | Authentication token                      | Optional          |
+| user_profile | object   | Additional user information               | Optional          |
+| onEvent      | function | Event handler for chatbot interactions    | Optional          |
+## Event Handling
+### Supported Events
+The SDK emits the following events that you can listen for in both React and plain JavaScript implementations:
+| Event Type                   | Description                                     | Data                                     |
+| ---------------------------- | ----------------------------------------------- | ---------------------------------------- |
+| `CHATBOT_BUTTON_LOADED`      | The chatbot button has been loaded and rendered | -                                        |
+| `CHATBOT_LOADED`             | The chatbot iframe has been loaded              | -                                        |
+| `CHATBOT_OPENED`             | The chatbot has been opened                     | -                                        |
+| `CHATBOT_CLOSED`             | The chatbot has been closed                     | -                                        |
+| `CHAT_INITIALIZED`           | The chat session has been initialized           | -                                        |
+| `CHAT_INITIALIZATION_FAILED` | The chat session failed to initialize           | `{ error: string }`                      |
+| `SESSION_REFRESHED`          | The chat session has been refreshed             | -                                        |
+| `MESSAGE_SENT`               | User has sent a message                         | `{ message: string }`                    |
+| `MESSAGE_RECEIVED`           | A message was received from the chatbot         | `{ message: string }`                    |
+| `CONVERSATION_STARTED`       | A new conversation has started                  | `{ conversationId: string }`             |
+| `CONVERSATION_ENDED`         | The current conversation has ended              | `{ conversationId: string }`             |
+| `USER_AUTHENTICATED`         | The user has been authenticated                 | `{ userId: string }`                     |
+| `USER_PROFILE_UPDATED`       | The user profile has been updated               | `{ profile: object }`                    |
+| `USER_FEEDBACK_SUBMITTED`    | The user has submitted feedback                 | `{ rating: number, comment: string }`    |
+| `FILE_UPLOAD_STARTED`        | A file upload has started                       | `{ fileName: string, fileSize: number }` |
+| `FILE_UPLOAD_COMPLETED`      | A file upload has completed                     | `{ fileName: string, fileUrl: string }`  |
+| `FILE_UPLOAD_FAILED`         | A file upload has failed                        | `{ fileName: string, error: string }`    |
+| `CHATBOT_ERROR`              | An error occurred in the chatbot                | `{ code: string, message: string }`      |
-For detailed documentation, please visit: [https://app.robylon.ai/docs](https://app.robylon.ai/docs)
+Events can be handled through the `onEvent` callback in both React and plain JavaScript implementations. Each event includes a `timestamp`