@klyro/widget 1.1.2 → 1.1.4
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.
- package/README.md +72 -11
- package/dist/index.js +1 -1
- package/dist/widget.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @klyro/widget
|
|
2
2
|
|
|
3
|
-
The Klyro widget allows you to easily embed an AI-powered chat interface into any website.
|
|
3
|
+
The Klyro widget allows you to easily embed an AI-powered chat interface into any website. It works as a simple script tag for static sites or as a React-compatible module for modern applications.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,28 +8,89 @@ The Klyro widget allows you to easily embed an AI-powered chat interface into an
|
|
|
8
8
|
npm install @klyro/widget
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
---
|
|
12
|
+
|
|
11
13
|
## Usage
|
|
12
14
|
|
|
13
|
-
###
|
|
15
|
+
### 1. React / Next.js (Recommended)
|
|
16
|
+
|
|
17
|
+
For modern frameworks, use the programmatic `initKlyro` function.
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
"use client";
|
|
21
|
+
import { useEffect } from "react";
|
|
22
|
+
import { initKlyro } from "@klyro/widget";
|
|
23
|
+
|
|
24
|
+
export default function ChatWidget() {
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
initKlyro({
|
|
27
|
+
key: "YOUR_WIDGET_KEY",
|
|
28
|
+
// Optional: defaults to https://klyro-pro.vercel.app
|
|
29
|
+
apiBase: "https://your-api-domain.com",
|
|
30
|
+
});
|
|
31
|
+
}, []);
|
|
32
|
+
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
```
|
|
14
36
|
|
|
15
|
-
|
|
37
|
+
### 2. Static HTML (Script Tag)
|
|
38
|
+
|
|
39
|
+
Add the following script tag to your HTML `<head>` or before the closing `</body>` tag.
|
|
16
40
|
|
|
17
41
|
```html
|
|
18
42
|
<script
|
|
19
|
-
src="
|
|
43
|
+
src="https://unpkg.com/@klyro/widget/dist/widget.js"
|
|
20
44
|
data-widget-key="YOUR_WIDGET_KEY"
|
|
21
45
|
async
|
|
22
46
|
></script>
|
|
23
47
|
```
|
|
24
48
|
|
|
25
|
-
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Configuration Options
|
|
52
|
+
|
|
53
|
+
When using `initKlyro(options)`, you can pass the following properties:
|
|
54
|
+
|
|
55
|
+
| Property | Type | Description | Required |
|
|
56
|
+
| --------- | -------- | ----------------------------------- | -------- |
|
|
57
|
+
| `key` | `string` | Your unique Klyro widget key. | Yes |
|
|
58
|
+
| `apiBase` | `string` | The base URL of your Klyro backend. | No |
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
## Troubleshooting & Common Issues
|
|
63
|
+
|
|
64
|
+
### 1. "Cannot find module '@klyro/widget'"
|
|
65
|
+
|
|
66
|
+
If you're using TypeScript and see this error after installing:
|
|
67
|
+
|
|
68
|
+
- Ensure you are on version `1.1.1` or higher (which includes types).
|
|
69
|
+
- Restart your TypeScript server (VS Code: `Cmd+Shift+P` -> `TypeScript: Restart TS Server`).
|
|
70
|
+
|
|
71
|
+
### 2. "document is not defined" (SSR Error)
|
|
72
|
+
|
|
73
|
+
The widget interacts with the DOM and cannot run on the server.
|
|
74
|
+
|
|
75
|
+
- **Next.js:** Ensure the component calling `initKlyro` is marked with `"use client";` and the call is inside a `useEffect` hook.
|
|
76
|
+
- **Other Frameworks:** Ensure initialization only happens after the window/document is available.
|
|
77
|
+
|
|
78
|
+
### 3. CORS Policy Blocked
|
|
79
|
+
|
|
80
|
+
If the widget fails to fetch its configuration:
|
|
81
|
+
|
|
82
|
+
- Check that the `apiBase` is correct.
|
|
83
|
+
- If running locally, ensure your backend allows requests from `localhost`.
|
|
84
|
+
- For the best experience during local development, set `apiBase` to `http://localhost:3000`.
|
|
85
|
+
|
|
86
|
+
### 4. Widget Not Appearing
|
|
26
87
|
|
|
27
|
-
|
|
88
|
+
- Verify your `data-widget-key` is correct.
|
|
89
|
+
- Check the browser console for any "404 Not Found" errors related to the widget configuration fetch.
|
|
90
|
+
- Ensure the allowed routes in your Klyro dashboard match the current URL.
|
|
28
91
|
|
|
29
|
-
|
|
92
|
+
---
|
|
30
93
|
|
|
31
|
-
|
|
94
|
+
## License
|
|
32
95
|
|
|
33
|
-
|
|
34
|
-
| ----------------- | ---------------------------- | -------- |
|
|
35
|
-
| `data-widget-key` | Your unique Klyro widget key | Yes |
|
|
96
|
+
MIT © [Klyro](https://klyro-pro.vercel.app/)
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var N=(Y,k,b)=>new Promise((v,M)=>{var f=i=>{try{h(b.next(i))}catch(y){M(y)}},e=i=>{try{h(b.throw(i))}catch(y){M(y)}},h=i=>i.done?v(i.value):Promise.resolve(i.value).then(f,e);h((b=b.apply(Y,k)).next())});(function(){"use strict";let Y="2.3.2",k=null,b="",v="",M={init:f};function f(){return N(this,arguments,function*(o={}){if(typeof o=="string"&&(o={key:o}),k=o.key||o.widgetKey,!k){console.error("[Klyro] Missing widget key in initKlyro");return}b=o.apiBase||"https://klyro.
|
|
1
|
+
"use strict";var N=(Y,k,b)=>new Promise((v,M)=>{var f=i=>{try{h(b.next(i))}catch(y){M(y)}},e=i=>{try{h(b.throw(i))}catch(y){M(y)}},h=i=>i.done?v(i.value):Promise.resolve(i.value).then(f,e);h((b=b.apply(Y,k)).next())});(function(){"use strict";let Y="2.3.2",k=null,b="",v="",M={init:f};function f(){return N(this,arguments,function*(o={}){if(typeof o=="string"&&(o={key:o}),k=o.key||o.widgetKey,!k){console.error("[Klyro] Missing widget key in initKlyro");return}b=o.apiBase||"https://klyro-pro.vercel.app",v=`klyro_${k}`,console.log("[Klyro] Initializing with version:",Y),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",J):J()})}let e=null,h=!1,i=[],y=null,x=!1,E=null,R=null,D=!1,w=!1;function W(){try{let o=localStorage.getItem(v);if(o){let r=JSON.parse(o);return i=r.messages||[],y=r.sessionId||null,console.log("[Klyro] Loaded persisted chat:",i.length,"messages"),!0}}catch(o){console.error("[Klyro] Failed to load persisted chat:",o)}return!1}function j(){try{let o={messages:i,sessionId:y,lastUpdated:new Date().toISOString()};localStorage.setItem(v,JSON.stringify(o))}catch(o){console.error("[Klyro] Failed to persist chat:",o)}}function Z(){try{localStorage.removeItem(v)}catch(o){console.error("[Klyro] Failed to clear persisted chat:",o)}}function q(){if(i.length===0)return;let o=(e==null?void 0:e.headerTitle)||"Chat Transcript",r=new Date().toLocaleString(),t=`${o}
|
|
2
2
|
`;t+=`Downloaded: ${r}
|
|
3
3
|
`,t+="=".repeat(50)+`
|
|
4
4
|
|
package/dist/widget.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var go=(C,p)=>()=>(p||C((p={exports:{}}).exports,p),p.exports);var Y=(C,p,y)=>new Promise((v,R)=>{var f=i=>{try{u(y.next(i))}catch(B){R(B)}},e=i=>{try{u(y.throw(i))}catch(B){R(B)}},u=i=>i.done?v(i.value):Promise.resolve(i.value).then(f,e);u((y=y.apply(C,p)).next())});var Ao=go((bo,M)=>{(function(){"use strict";let C="2.3.2",p=null,y="",v="",R={init:f};function f(){return Y(this,arguments,function*(o={}){if(typeof o=="string"&&(o={key:o}),p=o.key||o.widgetKey,!p){console.error("[Klyro] Missing widget key in initKlyro");return}y=o.apiBase||"https://klyro.
|
|
1
|
+
"use strict";(()=>{var go=(C,p)=>()=>(p||C((p={exports:{}}).exports,p),p.exports);var Y=(C,p,y)=>new Promise((v,R)=>{var f=i=>{try{u(y.next(i))}catch(B){R(B)}},e=i=>{try{u(y.throw(i))}catch(B){R(B)}},u=i=>i.done?v(i.value):Promise.resolve(i.value).then(f,e);u((y=y.apply(C,p)).next())});var Ao=go((bo,M)=>{(function(){"use strict";let C="2.3.2",p=null,y="",v="",R={init:f};function f(){return Y(this,arguments,function*(o={}){if(typeof o=="string"&&(o={key:o}),p=o.key||o.widgetKey,!p){console.error("[Klyro] Missing widget key in initKlyro");return}y=o.apiBase||"https://klyro-pro.vercel.app",v=`klyro_${p}`,console.log("[Klyro] Initializing with version:",C),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",X):X()})}let e=null,u=!1,i=[],B=null,x=!1,E=null,j=null,G=!1,k=!1;function Z(){try{let o=localStorage.getItem(v);if(o){let r=JSON.parse(o);return i=r.messages||[],B=r.sessionId||null,console.log("[Klyro] Loaded persisted chat:",i.length,"messages"),!0}}catch(o){console.error("[Klyro] Failed to load persisted chat:",o)}return!1}function F(){try{let o={messages:i,sessionId:B,lastUpdated:new Date().toISOString()};localStorage.setItem(v,JSON.stringify(o))}catch(o){console.error("[Klyro] Failed to persist chat:",o)}}function q(){try{localStorage.removeItem(v)}catch(o){console.error("[Klyro] Failed to clear persisted chat:",o)}}function O(){if(i.length===0)return;let o=(e==null?void 0:e.headerTitle)||"Chat Transcript",r=new Date().toLocaleString(),t=`${o}
|
|
2
2
|
`;t+=`Downloaded: ${r}
|
|
3
3
|
`,t+="=".repeat(50)+`
|
|
4
4
|
|