@klyro/widget 1.1.4 → 1.1.6
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 +22 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,6 +10,24 @@ npm install @klyro/widget
|
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
+
## Obtaining Your Widget Key
|
|
14
|
+
|
|
15
|
+
To use the widget, follow these steps in your Klyro dashboard:
|
|
16
|
+
|
|
17
|
+
1. **Add Knowledge**:
|
|
18
|
+
- Log in to your dashboard at [https://klyro-pro.vercel.app/](https://klyro-pro.vercel.app/).
|
|
19
|
+
- Navigate to the **Knowledge Base** tab.
|
|
20
|
+
- Upload documents (PDFs, TXT) or add text. This is the data your AI will use to answer visitor questions.
|
|
21
|
+
2. **Define AI Persona**:
|
|
22
|
+
- Go to the **AI Persona** tab.
|
|
23
|
+
- Customize your bot's identity, communication style (e.g., professional, casual), and specific traits. This defines _how_ your bot speaks.
|
|
24
|
+
3. **Customize UI & Retrieve Key**:
|
|
25
|
+
- Navigate to the **Integrations** tab.
|
|
26
|
+
- Click the **Settings icon** (⚙️) on your widget card to customize the **Primary Color**, **Greeting Message**, **Theme**, and **Position**.
|
|
27
|
+
- Once saved, your unique **Widget Key** will be visible in the "Installation Code" section of this tab.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
13
31
|
## Usage
|
|
14
32
|
|
|
15
33
|
### 1. React / Next.js (Recommended)
|
|
@@ -25,8 +43,6 @@ export default function ChatWidget() {
|
|
|
25
43
|
useEffect(() => {
|
|
26
44
|
initKlyro({
|
|
27
45
|
key: "YOUR_WIDGET_KEY",
|
|
28
|
-
// Optional: defaults to https://klyro-pro.vercel.app
|
|
29
|
-
apiBase: "https://your-api-domain.com",
|
|
30
46
|
});
|
|
31
47
|
}, []);
|
|
32
48
|
|
|
@@ -52,10 +68,9 @@ Add the following script tag to your HTML `<head>` or before the closing `</body
|
|
|
52
68
|
|
|
53
69
|
When using `initKlyro(options)`, you can pass the following properties:
|
|
54
70
|
|
|
55
|
-
| Property
|
|
56
|
-
|
|
|
57
|
-
| `key`
|
|
58
|
-
| `apiBase` | `string` | The base URL of your Klyro backend. | No |
|
|
71
|
+
| Property | Type | Description | Required |
|
|
72
|
+
| -------- | -------- | ----------------------------- | -------- |
|
|
73
|
+
| `key` | `string` | Your unique Klyro widget key. | Yes |
|
|
59
74
|
|
|
60
75
|
---
|
|
61
76
|
|
|
@@ -79,9 +94,7 @@ The widget interacts with the DOM and cannot run on the server.
|
|
|
79
94
|
|
|
80
95
|
If the widget fails to fetch its configuration:
|
|
81
96
|
|
|
82
|
-
-
|
|
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`.
|
|
97
|
+
- Ensure your backend allows requests from the domain where the widget is hosted.
|
|
85
98
|
|
|
86
99
|
### 4. Widget Not Appearing
|
|
87
100
|
|