obi-sdk 0.1.1 → 0.1.3

package/README.md

@@ -18,19 +18,18 @@ Currently, the recommended way to use Obi SDK is through the inline loader scrip
 
 The loader accepts the following configuration options:
 
-| Option       | Type    | Default                        | Description                                                                                                 |
-| ------------ | ------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------- |
-| `position`   | string  | `'bottom-right'`               | Position of the widget on the page. Options: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
-| `apiKey`     | string  | -                              | Your Obi API key (required for production)                                                                  |
-| `sdkVersion` | string  | `'latest'`                     | Version of the SDK to load                                                                                  |
-| `noCacheSDK` | boolean | `false`                        | Force fresh load of SDK without caching                                                                     |
-| `apiBaseUrl` | string  | `'https://www.iamobi.ai/api/'` | Base URL for API calls                                                                                      |
+| Option     | Type    | Default          | Description                                                                                                 |
+| ---------- | ------- | ---------------- | ----------------------------------------------------------------------------------------------------------- |
+| `position` | string  | `'bottom-right'` | Position of the widget on the page. Options: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
+| `apiKey`   | string  | -                | Your Obi API key (required for production)                                                                  |
+| `autoInit` | boolean | `true`           | Whether to initialize the widget automatically when loaded                                                  |
+| `user`     | object  | -                | User information with `id` (required), `email` (optional) and `metadata` (optional)                         |
 
 ## Quick Start
 
 The simplest way to add Obi to your website is by using the inline loader script:
 
-1. Copy the full inline loader script from above
+1. Copy the full inline loader script from below
 2. Add it to your HTML page
 3. Configure the widget using `window.obiWidgetConfig`
 
@@ -44,7 +43,10 @@ The simplest way to add Obi to your website is by using the inline loader script
       window.obiWidgetConfig = {
         position: "bottom-right",
         apiKey: "YOUR_API_KEY",
-        apiBaseUrl: "https://www.iamobi.ai/api/",
+        user: {
+          id: "user-123",
+          email: "user@example.com",
+        },
       }
     </script>
   </head>
@@ -57,9 +59,7 @@ The simplest way to add Obi to your website is by using the inline loader script
         "use strict"
         var c = {
           position: "bottom-right",
-          apiBaseUrl: "https://www.iamobi.ai/api/",
-          sdkVersion: "latest",
-          noCacheSDK: !1,
+          autoInit: true,
         }
         w.__obiSDKLoading = w.__obiSDKLoading || !1
         function i() {
@@ -73,20 +73,12 @@ The simplest way to add Obi to your website is by using the inline loader script
               })
               return
             }
-            if (f.sdkVersion === "latest" && !f.noCacheSDK) {
-              m(function (v) {
-                v && (f.sdkVersion = v)
-                j(f, function () {
-                  w.__obiSDKLoading = !1
-                  g(f)
-                })
-              })
-            } else {
-              j(f, function () {
+            m(function (v) {
+              j(v, function () {
                 w.__obiSDKLoading = !1
                 g(f)
               })
-            }
+            })
           }
         }
         function e(f) {
@@ -99,7 +91,7 @@ The simplest way to add Obi to your website is by using the inline loader script
         }
         function m(cb) {
           try {
-            var x = new (w.XMLHttpRequest || w.ActiveXObject)("Microsoft.XMLHTTP")
+            var x = new XMLHttpRequest()
             x.open("GET", "https://registry.npmjs.org/obi-sdk/latest")
             x.onload = function () {
               if (x.status === 200) {
@@ -121,23 +113,23 @@ The simplest way to add Obi to your website is by using the inline loader script
             cb(null)
           }
         }
-        function j(f, cb) {
+        function j(v, cb) {
           w.__obiSDKLoading = !0
           var s = d.createElement("script")
           s.type = "text/javascript"
           s.async = !0
-          var b = "https://cdn.iamobi.ai/obi-sdk"
-          s.src = f.noCacheSDK
-            ? b + "-" + f.sdkVersion + ".js?t=" + Date.now()
-            : b + "-" + f.sdkVersion + ".js"
+          var b = "https://unpkg.com/obi-sdk"
+          var u = v || "latest"
+          s.src = b + "@" + u + "/dist/obi-sdk.standalone.iife.js"
           s.onload = cb
           s.onerror = function () {
-            w.__obiSDKLoading = !1
-            w.console && w.console.error && w.console.error("Failed to load Obi SDK")
-            if (f.sdkVersion !== "latest" && !f.noCacheSDK) {
-              w.console && w.console.warn && w.console.warn("Falling back to latest version")
-              f.sdkVersion = "latest"
-              j(f, cb)
+            if (u !== "latest") {
+              console.warn("Failed to load specific version, falling back to latest")
+              s.src = b + "@latest/dist/obi-sdk.standalone.iife.js"
+              s.onload = cb
+            } else {
+              w.__obiSDKLoading = !1
+              console.error("Failed to load Obi SDK")
             }
           }
           var fs = d.getElementsByTagName("script")[0]
@@ -159,36 +151,22 @@ The simplest way to add Obi to your website is by using the inline loader script
           var t = d.createElement("obi-widget")
           f.theme && t.setAttribute("theme", f.theme)
           f.apiKey && t.setAttribute("api-key", f.apiKey)
-          f.endpoint && t.setAttribute("endpoint", f.endpoint)
-          f.apiBaseUrl && t.setAttribute("api-base-url", f.apiBaseUrl)
-          t.style.position = "fixed"
-          t.style.zIndex = "9999"
-          switch (f.position) {
-            case "bottom-right":
-              t.style.bottom = "20px"
-              t.style.right = "20px"
-              break
-            case "bottom-left":
-              t.style.bottom = "20px"
-              t.style.left = "20px"
-              break
-            case "top-right":
-              t.style.top = "20px"
-              t.style.right = "20px"
-              break
-            case "top-left":
-              t.style.top = "20px"
-              t.style.left = "20px"
-              break
-          }
+          t.setAttribute("api-base-url", "https://www.iamobi.ai/api/")
+          f.position && t.setAttribute("position", f.position)
+          f.user && t.setAttribute("user", JSON.stringify(f.user))
           d.body.appendChild(t)
           w.console && w.console.log && w.console.log("Obi Widget added to page")
         }
-        d.readyState === "complete"
-          ? i()
-          : w.attachEvent
-            ? w.attachEvent("onload", i)
-            : w.addEventListener("load", i, !1)
+        if (w.obiWidgetConfig && w.obiWidgetConfig.autoInit === false) {
+          // Skip auto-initialization
+          console.log("Obi Widget auto-initialization disabled")
+        } else {
+          d.readyState === "complete"
+            ? i()
+            : w.attachEvent
+              ? w.attachEvent("onload", i)
+              : w.addEventListener("load", i, !1)
+        }
       })(window, document)
     </script>
   </body>
@@ -197,6 +175,72 @@ The simplest way to add Obi to your website is by using the inline loader script
 
 The widget will automatically appear in the specified position on your page.
 
+## How It Works
+
+The loader script:
+
+1. Dynamically checks for the latest version using the npm registry API
+2. Loads the specific versioned SDK from unpkg.com for better browser caching
+3. Creates and positions the `<obi-widget>` custom element on your page
+4. Initializes the widget with your API key and configuration
+
+## Advanced Loader Usage
+
+The inline loader script shown above is already minified for production use. If you need to customize it or understand how it works, you can find the full, commented version in the source code (`src/loader-inline.js`).
+
+The loader script is also available as a separate file that can be loaded directly:
+
+```html
+<!-- Configure the widget (optional) -->
+<script>
+  window.obiWidgetConfig = {
+    position: "bottom-right",
+    apiKey: "YOUR_API_KEY",
+  }
+</script>
+
+<!-- Load the widget using the separate loader script -->
+<script src="https://unpkg.com/obi-sdk@latest/dist/obi-loader.iife.js"></script>
+```
+
+## Installation for npm Projects
+
+You can also install the SDK via npm:
+
+```bash
+npm install obi-sdk
+```
+
+And import it in your application:
+
+```javascript
+import ObiSDK from "obi-sdk"
+
+// Initialize the SDK
+const sdk = new ObiSDK({
+  apiKey: "YOUR_API_KEY",
+})
+```
+
+## Building the SDK
+
+To build the SDK locally:
+
+```bash
+# Install dependencies
+npm install
+
+# Build all formats (UMD, ES, standalone IIFE, and loader)
+npm run build:all
+```
+
+This generates the following in the `dist` directory:
+
+- `obi-sdk.umd.js` - UMD format for CommonJS/AMD environments
+- `obi-sdk.es.js` - ES Module format for modern bundlers
+- `obi-sdk.standalone.iife.js` - IIFE format with all dependencies bundled
+- `obi-loader.iife.js` - Standalone loader script
+
 ## Coming Soon
 
 The following features are under development and will be available in future releases:
@@ -218,14 +262,14 @@ The inline loader script provides a self-contained way to add the Obi Widget to
 5. It creates the `<obi-widget>` element and positions it on the page
 6. It configures the widget with the provided options
 
-Before using in production, you should update the CDN URL to point to where you host the SDK files:
+Before using in production, you can use unpkg.com as a CDN which automatically serves files from npm packages:
 
 ```js
-// In the loader script, change this line:
-var b = "https://cdn.iamobi.ai/obi-sdk"
+// The loader automatically uses unpkg.com to load the package:
+var b = "https://unpkg.com/obi-sdk"
 
-// To point to your CDN:
-var b = "https://your-cdn.iamobi.ai/path/to/obi-sdk"
+// Which resolves to URLs like:
+// https://unpkg.com/obi-sdk@0.1.1/dist/obi-sdk.standalone.iife.js
 ```
 
 ### Widget Positioning
@@ -236,7 +280,6 @@ The widget can be positioned in one of four corners of the page:
 window.obiWidgetConfig = {
   position: "bottom-right", // Options: "bottom-right", "bottom-left", "top-right", "top-left"
   apiKey: "YOUR_API_KEY",
-  apiBaseUrl: "https://www.iamobi.ai/api/",
 }
 ```
 
@@ -248,7 +291,6 @@ The widget supports light and dark themes:
 window.obiWidgetConfig = {
   theme: "light", // Options: "light", "dark"
   apiKey: "YOUR_API_KEY",
-  apiBaseUrl: "https://www.iamobi.ai/api/",
 }
 ```
 
@@ -261,7 +303,6 @@ window.obiWidgetConfig = {
   sdkVersion: "latest", // Use "latest" or a specific version number
   noCacheSDK: false, // Set to true to bypass cache
   apiKey: "YOUR_API_KEY",
-  apiBaseUrl: "https://www.iamobi.ai/api/",
 }
 ```