@streamoji/avatar-widget 0.4.9 → 0.5.0
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 +46 -3
- package/dist/avatar-widget.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @streamoji/avatar-widget
|
|
2
2
|
|
|
3
|
-
Plug-and-play
|
|
3
|
+
Plug-and-play avatar widget for token-based AI conversations. Use the **React** component in your app or drop in the **script-tag (web)** build on any HTML page—no React required.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -54,7 +54,49 @@ function App() {
|
|
|
54
54
|
}
|
|
55
55
|
```
|
|
56
56
|
|
|
57
|
-
##
|
|
57
|
+
## Web flow (script tag, no React)
|
|
58
|
+
|
|
59
|
+
You can embed the widget on any HTML page without a React app. Use the UMD build and call the global init.
|
|
60
|
+
|
|
61
|
+
**1. Build the UMD bundle** (if you’re developing the package; otherwise use the published `dist`):
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
npm run build:html
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
**2. Include the script and styles** in your HTML:
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<link rel="stylesheet" href="path/to/avatar-widget.umd.css">
|
|
71
|
+
<script src="path/to/avatar-widget.umd.js"></script>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
For npm installs, the files are in `node_modules/@streamoji/avatar-widget/dist/` (e.g. `avatar-widget.umd.js`, `avatar-widget.umd.css`). You can copy them to your static assets or point your bundler at them.
|
|
75
|
+
|
|
76
|
+
**3. Initialize the widget** (e.g. before `</body>`):
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<script>
|
|
80
|
+
StreamojiLeadsAvatarWidget.init({ token: "YOUR_ENCRYPTED_AGENT_TOKEN" });
|
|
81
|
+
</script>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
If you don’t add a container, the widget creates one fixed at the bottom-right of the page. To control placement, add a div with id `streamoji-leads-avatar-widget-root` where the widget should mount:
|
|
85
|
+
|
|
86
|
+
```html
|
|
87
|
+
<div id="streamoji-leads-avatar-widget-root"></div>
|
|
88
|
+
<script>
|
|
89
|
+
StreamojiLeadsAvatarWidget.init({ token: "YOUR_ENCRYPTED_AGENT_TOKEN" });
|
|
90
|
+
</script>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Web init options
|
|
94
|
+
|
|
95
|
+
| Option | Type | Description |
|
|
96
|
+
|--------|------|-------------|
|
|
97
|
+
| `token` | `string` | Encrypted agent token for chat/STT API. |
|
|
98
|
+
|
|
99
|
+
## Props (React)
|
|
58
100
|
|
|
59
101
|
| Prop | Type | Description |
|
|
60
102
|
|------|------|-------------|
|
|
@@ -79,7 +121,8 @@ From the repo root:
|
|
|
79
121
|
|
|
80
122
|
```bash
|
|
81
123
|
cd packages/avatar-widget
|
|
82
|
-
npm run build
|
|
124
|
+
npm run build # React build
|
|
125
|
+
npm run build:html # optional: UMD bundle for web/script-tag usage (or use npm run build:all)
|
|
83
126
|
npm version patch # or minor / major
|
|
84
127
|
npm publish --access public
|
|
85
128
|
```
|