@lemonsliceai/lemon-slice-widget 1.0.11 → 1.0.13
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 +47 -0
- package/dist/index.js +42 -42
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,3 +9,50 @@ LemonSlice agents are created on [https://lemonslice.com/](https://lemonslice.co
|
|
|
9
9
|
<lemon-slice-widget agent-id="agent_id"></lemon-slice-widget>
|
|
10
10
|
<script type="module" src="https://unpkg.com/@lemonsliceai/lemon-slice-widget"></script>
|
|
11
11
|
```
|
|
12
|
+
|
|
13
|
+
## Configuration
|
|
14
|
+
|
|
15
|
+
### Attributes
|
|
16
|
+
|
|
17
|
+
- **`agent-id`** (required): Your LemonSlice agent ID
|
|
18
|
+
- **`inline`**: Display widget inline instead of floating (default: `false`)
|
|
19
|
+
- **`show-minimize-button`**: Show/hide the minimize button (default: `true`)
|
|
20
|
+
- **`initial-state`**: Initial widget state on load - `"minimized"`, `"active"`, or `"hidden"` (default: `"minimized"`)
|
|
21
|
+
- **`controlled-widget-state`**: Dynamically control widget state - `"minimized"`, `"active"`, or `"hidden"`
|
|
22
|
+
- **`controlled-show-minimize-button`**: Dynamically control minimize button visibility - `"true"` or `"false"`
|
|
23
|
+
- **`video-button-color-hex`**: Hex color (with or without `#`) used for the minimized video chat button (default: `#919191`)
|
|
24
|
+
- **`video-button-color-opacity`**: Opacity for the video chat button color in the range `[0, 1]` (default: `0.3`)
|
|
25
|
+
|
|
26
|
+
### Examples
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<!-- Start expanded -->
|
|
30
|
+
<lemon-slice-widget agent-id="agent_id" initial-state="active"></lemon-slice-widget>
|
|
31
|
+
|
|
32
|
+
<!-- Hide minimize button -->
|
|
33
|
+
<lemon-slice-widget agent-id="agent_id" show-minimize-button="false"></lemon-slice-widget>
|
|
34
|
+
|
|
35
|
+
<!-- Inline widget -->
|
|
36
|
+
<lemon-slice-widget agent-id="agent_id" inline></lemon-slice-widget>
|
|
37
|
+
|
|
38
|
+
<!-- Custom button color -->
|
|
39
|
+
<lemon-slice-widget
|
|
40
|
+
agent-id="agent_id"
|
|
41
|
+
video-button-color-hex="#FF4FD8"
|
|
42
|
+
video-button-color-opacity="0.8"
|
|
43
|
+
></lemon-slice-widget>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Dynamic Control
|
|
47
|
+
|
|
48
|
+
Control the widget dynamically by updating attributes:
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
const widget = document.querySelector('lemon-slice-widget');
|
|
52
|
+
|
|
53
|
+
// Change widget state
|
|
54
|
+
widget.setAttribute('controlled-widget-state', 'active');
|
|
55
|
+
|
|
56
|
+
// Toggle minimize button
|
|
57
|
+
widget.setAttribute('controlled-show-minimize-button', 'false');
|
|
58
|
+
```
|