npm - @robylon/web-react-sdk - Versions diffs - 1.1.32-staging.1 → 1.1.33-staging.2 - Mend

@robylon/web-react-sdk 1.1.32-staging.1 → 1.1.33-staging.2

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

package/README.md +615 -97
package/dist/cjs/index.js +1 -1
package/dist/cjs/index.js.map +1 -1
package/dist/cjs/types/core/api.d.ts +8 -0
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 +33 -0
package/dist/cjs/types/index.d.ts +1 -0
package/dist/cjs/types/types.d.ts +3 -0
package/dist/cjs/types/vanilla/components/ChatbotFloatingButton.d.ts +46 -0
package/dist/cjs/types/vanilla/components/ChatbotIframe.d.ts +66 -0
package/dist/cjs/types/vanilla/index.d.ts +32 -0
package/dist/esm/index.js +1 -1
package/dist/esm/index.js.map +1 -1
package/dist/esm/types/core/api.d.ts +8 -0
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 +33 -0
package/dist/esm/types/index.d.ts +1 -0
package/dist/esm/types/types.d.ts +3 -0
package/dist/esm/types/vanilla/components/ChatbotFloatingButton.d.ts +46 -0
package/dist/esm/types/vanilla/components/ChatbotIframe.d.ts +66 -0
package/dist/esm/types/vanilla/index.d.ts +32 -0
package/dist/index.d.ts +37 -2
package/dist/umd/robylon-chatbot.js +2 -0
package/dist/umd/robylon-chatbot.js.map +1 -0
package/dist/umd/types/components/ChatbotFloatingButton.d.ts +12 -0
package/dist/umd/types/components/ChatbotIframe.d.ts +12 -0
package/dist/umd/types/components/ErrorBoundary.d.ts +15 -0
package/dist/umd/types/components/RobylonChatbot.d.ts +11 -0
package/dist/umd/types/config.d.ts +5 -0
package/dist/umd/types/constants/errorConstants.d.ts +60 -0
package/dist/umd/types/core/api.d.ts +8 -0
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 +33 -0
package/dist/umd/types/hooks/useChatbot.d.ts +2 -0
package/dist/umd/types/hooks/useChatbotEvents.d.ts +12 -0
package/dist/umd/types/hooks/useChatbotState.d.ts +16 -0
package/dist/umd/types/hooks/useWhyDidYouUpdate.d.ts +5 -0
package/dist/umd/types/index.d.ts +4 -0
package/dist/umd/types/services/ErrorTrackingService.d.ts +38 -0
package/dist/umd/types/types/config.d.ts +33 -0
package/dist/umd/types/types/events.d.ts +22 -0
package/dist/umd/types/types/index.d.ts +16 -0
package/dist/umd/types/types/state.d.ts +5 -0
package/dist/umd/types/types.d.ts +41 -0
package/dist/umd/types/utils/chatbotSdk.d.ts +23 -0
package/dist/umd/types/utils/colorUtils.d.ts +1 -0
package/dist/umd/types/utils/cookieUtils.d.ts +6 -0
package/dist/umd/types/utils/environment.d.ts +12 -0
package/dist/umd/types/utils/fetchData.d.ts +30 -0
package/dist/umd/types/utils/logger.d.ts +6 -0
package/dist/umd/types/utils/misc.d.ts +1 -0
package/dist/umd/types/utils/originalFetchDataFile.d.ts +1 -0
package/dist/umd/types/utils/systemInfo.d.ts +13 -0
package/dist/umd/types/utils/version.d.ts +1 -0
package/dist/umd/types/vanilla/components/ChatbotFloatingButton.d.ts +46 -0
package/dist/umd/types/vanilla/components/ChatbotIframe.d.ts +66 -0
package/dist/umd/types/vanilla/index.d.ts +32 -0
package/package.json +20 -9
package/dist/cjs/types/components/ChatbotContainer/ChatbotContainer.d.ts +0 -10
package/dist/cjs/types/components/ChatbotContainer/index.d.ts +0 -1
package/dist/esm/types/components/ChatbotContainer/ChatbotContainer.d.ts +0 -10
package/dist/esm/types/components/ChatbotContainer/index.d.ts +0 -1

package/README.md CHANGED Viewed

@@ -1,154 +1,672 @@
-# Robylon Web React SDK
-A lightweight React SDK for integrating Robylon's AI-powered chatbot into your web applications.
+# Robylon SDK
+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)
+  - [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
+### For React applications:
 ```bash
 npm install @robylon/web-react-sdk
 # or
 yarn add @robylon/web-react-sdk
 ```
-## Quick Start
+### 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://cdn.robylon.ai/sdk/latest/chatbot.js"></script>
+```
+For specific versions:
+```html
+<script src="https://cdn.robylon.ai/sdk/v1.0.0/chatbot.js"></script>
+```
+For staging/testing environment:
+```html
+<script src="https://cdn.robylon.ai/sdk/staging/latest/chatbot.js"></script>
+```
+#### Where to place the script:
+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.
+## React SDK Usage
+### React: Basic Implementation
+To use the Robylon SDK in a React application:
 ```jsx
 import { Chatbot } from "@robylon/web-react-sdk";
 function App() {
   const handleChatbotEvent = (event) => {
-    logger.log(`Chatbot event: ${event.type}`, event);
+    console.log("Chatbot event:", event.type, event.data);
   };
   return (
-    <Chatbot
-      api_key="your-api-key"
-      user_id="user-id"
-      user_token="optional-auth-token"
-      user_profile={{
-        email: "user@example.com",
-        name: "John Doe",
-        mobile: "1234567890",
-      }}
-      onEvent={handleChatbotEvent}
-    />
+    <div className="App">
+      <h1>My Website</h1>
+      <Chatbot
+        api_key="YOUR_API_KEY"
+        user_id="optional-user-id"
+        user_token="optional-auth-token"
+        user_profile={{
+          name: "Optional User Name",
+          email: "optional.email@example.com",
+        }}
+        onEvent={handleChatbotEvent}
+      />
+    </div>
   );
 }
+export default App;
 ```
-## Configuration
+### React: Event Handling
-### Required Props
+The React component accepts an `onEvent` prop for handling chatbot events:
-- `api_key`: Your Robylon API key
-- `user_id`: Unique identifier for the current user
+```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
+    }
+  }}
+/>
+```
-### Optional Props
+The `Chatbot` component renders a floating button that opens a chat interface when clicked. It handles all the communication with the Robylon backend services.
-- `user_token`: Authentication token for the user
-- `user_profile`: Object containing user information
-  - `email`: User's email address
-  - `name`: User's name
-  - `mobile`: User's mobile number
-- `onEvent`: Callback function to handle chatbot events
+## Plain JavaScript & No-Code Integration
-### Event Handling
+> **IMPORTANT:** You will need an API key from Robylon for any integration to work.
-The SDK emits various events that you can listen to using the `onEvent` prop. Each event has the following structure:
+There are several ways to add the Robylon chatbot to your website or no-code platform, depending on your needs:
-```typescript
-interface ChatbotEvent {
-  type: ChatbotEventType;
-  timestamp: number;
-  data?: any;
-}
+### 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>
 ```
-Available event types:
+#### 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>
+```
-```typescript
-enum ChatbotEventType {
-  CHATBOT_BUTTON_LOADED = "CHATBOT_BUTTON_LOADED", // When the chat button is rendered
-  CHATBOT_OPENED = "CHATBOT_OPENED", // When chat window is opened
-  CHATBOT_CLOSED = "CHATBOT_CLOSED", // When chat window is closed
-  CHATBOT_APP_READY = "CHATBOT_APP_READY", // When SDK is fully initialized
-  CHATBOT_LOADED = "CHATBOT_LOADED", // When chatbot iframe is loaded
-  CHAT_INITIALIZED = "CHAT_INITIALIZED", // When chat session is initialized
-  SESSION_REFRESHED = "SESSION_REFRESHED", // When chat session is refreshed
-  CHAT_INITIALIZATION_FAILED = "CHAT_INITIALIZATION_FAILED", // When initialization fails
-}
+### Option 2: Reliable Loading - After DOM is Ready
+This approach ensures the chatbot only initializes after your page is fully loaded, making it more reliable for websites with complex layouts.
+#### 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>
 ```
-Example usage:
+#### 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>
+```
-```jsx
-function App() {
-  const handleChatbotEvent = (event) => {
+### 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_BUTTON_CLICKED":
-        logger.log("Chat button clicked at:", new Date(event.timestamp));
+      case "CHATBOT_LOADED":
+        console.log("Chatbot loaded");
         break;
       case "CHATBOT_OPENED":
-        logger.log("Chat window opened at:", new Date(event.timestamp));
-        break;
-      case "CHAT_INITIALIZED":
-        logger.log("Chat session initialized");
+        console.log("Chatbot opened");
         break;
-      case "CHAT_INITIALIZATION_FAILED":
-        console.error("Chat initialization failed:", event.data);
+      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
+```
-  return (
-    <Chatbot
-      api_key="your-api-key"
-      user_id="user-id"
-      onEvent={handleChatbotEvent}
-    />
-  );
-}
+## 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 }`      |
+Events can be handled through the `onEvent` callback in both React and plain JavaScript implementations. Each event includes a `timestamp` field indicating when the event occurred.
+## Customization
+The Robylon SDK can be customized through the management console. Visit [app.robylon.ai](https://app.robylon.ai) to:
+- Customize the chatbot appearance
+- Set up chatbot behavior
+- Configure message flows
+- Manage AI capabilities
+## Troubleshooting
+If you encounter issues with the SDK:
+1. Ensure your API key is correct
+2. Check browser console for errors
+3. Verify that your domain is whitelisted in the Robylon console
+4. Make sure the script is loading correctly (no CORS or network issues)
+5. For vanilla JS implementation, ensure you're using `RobylonChatbot.create()` and not `new RobylonChatbot()`
+For further assistance, contact [support@robylon.com](mailto:support@robylon.com)
+## Platform-Specific Integration Guides
+### <a id="webflow-integration"></a>Webflow Integration
+Webflow is a popular no-code website builder that allows custom code injection. Here's how to add the Robylon chatbot to your Webflow site:
+1. Log in to your Webflow account and open your project
+2. Go to **Project Settings** (gear icon) in the left sidebar
+3. Click on **Custom Code** tab
+4. In the **Head Code** section, paste the following code:
+```html
+<script
+  src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+  defer
+></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    RobylonChatbot.create({
+      api_key: "YOUR_API_KEY", // Replace with your actual API key
+    });
+  });
+</script>
 ```
-### Automatically Included Information
+5. Click **Save Changes** at the bottom of the page
+6. Publish your site to apply the changes
+![Webflow Custom Code](https://cdn.robylon.ai/docs/webflow-integration.png)
+### <a id="wix-integration"></a>Wix Integration
+To add the Robylon chatbot to your Wix website:
+1. Log in to your Wix account and open your site in the Editor
+2. Click on the **+ Add** button on the left sidebar
+3. Search for and select **Dev Tools** > **Custom Code**
+4. Click **Add to Site**
+5. In the popup, select **Head** as the placement
+6. Paste the following code:
+```html
+<script
+  src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+  defer
+></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    RobylonChatbot.create({
+      api_key: "YOUR_API_KEY", // Replace with your actual API key
+    });
+  });
+</script>
+```
-The SDK automatically collects and includes the following system information:
+7. Click **Apply** and then **Save**
+8. Publish your site to apply the changes
+### <a id="shopify-integration"></a>Shopify Integration
+To add the Robylon chatbot to your Shopify store:
+1. Log in to your Shopify admin dashboard
+2. Go to **Online Store** > **Themes**
+3. Find your current theme and click **Actions** > **Edit code**
+4. In the left sidebar, under the **Layout** section, click on `theme.liquid`
+5. Find the closing `</head>` tag
+6. Just before the `</head>` tag, paste the following code:
+```html
+<script
+  src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+  defer
+></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    RobylonChatbot.create({
+      api_key: "YOUR_API_KEY", // Replace with your actual API key
+      user_profile: {% if customer %}
+        {
+          name: {{ customer.name | json }},
+          email: {{ customer.email | json }},
+          id: {{ customer.id | json }}
+        }
+      {% else %}
+        {}
+      {% endif %}
+    });
+  });
+</script>
+```
-- `platform`: Always set to "web"
-- `os`: User's operating system
-- `browser`: User's browser type
-- `device`: Device type (desktop/mobile/tablet)
-- `screen_size`: User's screen dimensions (width and height)
-- `sdk_version`: Current version of the SDK
+7. Click **Save**
+8. Your chatbot will now appear on all pages of your Shopify store
+### <a id="wordpress-integration"></a>WordPress Integration
+#### Option 1: Using a Header/Footer Plugin
+1. Install and activate a header/footer plugin like "Insert Headers and Footers" or "Header Footer Code Manager"
+2. Go to the plugin settings (usually under **Settings** or its own menu item)
+3. Add the following code to the **Header** section:
+```html
+<script
+  src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js"
+  defer
+></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    RobylonChatbot.create({
+      api_key: "YOUR_API_KEY", // Replace with your actual API key
+    });
+  });
+</script>
+```
-## Features
+4. Save the changes
+#### Option 2: Editing Theme Files
+If you're comfortable editing theme files:
+1. Go to **Appearance** > **Theme Editor**
+2. Select **Theme Header** (`header.php`)
+3. Find the closing `</head>` tag
+4. Just before the `</head>` tag, paste the following code:
+```php
+<script src="https://cdn.robylon.ai/sdk/latest/robylon-chatbot.js" defer></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    RobylonChatbot.create({
+      api_key: "YOUR_API_KEY", // Replace with your actual API key
+      <?php if (is_user_logged_in()): ?>
+      user_id: "<?php echo get_current_user_id(); ?>",
+      user_profile: {
+        name: "<?php echo esc_js(wp_get_current_user()->display_name); ?>",
+        email: "<?php echo esc_js(wp_get_current_user()->user_email); ?>"
+      }
+      <?php endif; ?>
+    });
+  });
+</script>
+```
-- Persistent chat interface
-- Responsive design for all screen sizes
-- Automatic system information collection
-- Customizable chat bubble
-- Session management
-- Secure communication channel
-- Cross-browser compatibility
-- Comprehensive event system
+5. Save the changes
-## Browser Support
+> **Note:** For WordPress, if you're using a caching plugin, you may need to clear the cache after adding the code.
-The SDK supports all modern browsers and includes fallbacks for:
+## Using the SDK from CDN
-- User agent detection
-- Screen size detection
-- Browser identification
-- Device type detection
+You can use the Robylon Chatbot SDK directly from our CDN without installing it via npm. This is useful for quick integration or when you're not using a build system.
-## Development
+### Latest Version
-### Creating Branches
+To use the latest version of the SDK, include the following script tag in your HTML:
-Always use the provided script to create new branches:
+```html
+<script src="https://cdn.robylon.ai/sdk/latest/chatbot.js"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    // Initialize the chatbot
+    const chatbot = RobylonChatbot.create({
+      api_key: "YOUR_API_KEY",
+      // Optional configuration
+      user_id: "user-123",
+      user_profile: {
+        name: "John Doe",
+        email: "john@example.com",
+      },
+      onEvent: function (event) {
+        console.log("Chatbot event:", event);
+      },
+    });
+    // Show the chatbot
+    chatbot.show();
+  });
+</script>
+```
-```bash
-npm run branch
+### Specific Version
+If you need to use a specific version of the SDK (recommended for production), use:
+```html
+<script src="https://cdn.robylon.ai/sdk/v1.1.30/chatbot.js"></script>
 ```
-This ensures proper version control and naming conventions.
+Replace `1.1.30` with the version you want to use.
+### Staging Version
+For testing with our staging environment:
+```html
+<script src="https://cdn.robylon.ai/sdk/staging/latest/chatbot.js"></script>
+```
+Or for a specific staging version:
+```html
+<script src="https://cdn.robylon.ai/sdk/staging/v1.1.30-staging.4/chatbot.js"></script>
+```
+### API Reference
+The CDN version provides the same API as the npm package:
+- `RobylonChatbot.create(config)`: Creates a new chatbot instance
+- `chatbot.show()`: Shows the chatbot
+- `chatbot.hide()`: Hides the chatbot
+- `chatbot.toggle()`: Toggles the chatbot visibility
+- `chatbot.destroy()`: Removes the chatbot from the DOM