@klyro/widget 1.1.3 → 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/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/)
|