@fiction/widget 0.1.2
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 +115 -0
- package/dist/widget.css +1 -0
- package/dist/widget.js +3 -0
- package/package.json +62 -0
package/README.md
ADDED
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
# Fiction Widget
|
|
2
|
+
|
|
3
|
+
Zero-config contextual digital self that auto-adapts to any page.
|
|
4
|
+
|
|
5
|
+
## Quick Start
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<!-- Place anywhere in your HTML -->
|
|
9
|
+
<fiction-self handle="your-handle"></fiction-self>
|
|
10
|
+
|
|
11
|
+
<!-- Load widget script -->
|
|
12
|
+
<script src="https://unpkg.com/@fiction/widget"></script>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- **Zero Configuration**: Works out of the box with just a handle
|
|
18
|
+
- **Context Adaptation**: Auto-detects page context and adapts personality
|
|
19
|
+
- **Shadow DOM Isolation**: No CSS conflicts with host page
|
|
20
|
+
- **Lightweight**: < 50KB gzipped
|
|
21
|
+
- **Modern Browser Support**: ES2020+, latest Chrome/Firefox/Safari
|
|
22
|
+
|
|
23
|
+
## Usage Examples
|
|
24
|
+
|
|
25
|
+
### Basic Integration
|
|
26
|
+
```html
|
|
27
|
+
<fiction-self handle="andrew"></fiction-self>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Manual Trigger
|
|
31
|
+
```html
|
|
32
|
+
<fiction-self handle="andrew" trigger="manual"></fiction-self>
|
|
33
|
+
<button onclick="openFictionSelf_andrew()">Chat with Andrew</button>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Context Override
|
|
37
|
+
```html
|
|
38
|
+
<fiction-self handle="andrew" context="sales"></fiction-self>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Custom First Message
|
|
42
|
+
```html
|
|
43
|
+
<fiction-self handle="andrew" first-message="Welcome! How can I help?"></fiction-self>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Attributes
|
|
47
|
+
|
|
48
|
+
| Attribute | Type | Default | Description |
|
|
49
|
+
|-----------|------|---------|-------------|
|
|
50
|
+
| `handle` | string | required | User handle to resolve to agent |
|
|
51
|
+
| `mode` | `slideout` \| `inline` | `slideout` | Display mode |
|
|
52
|
+
| `trigger` | `floating` \| `manual` | `floating` | Trigger type |
|
|
53
|
+
| `context` | string | auto-detected | Override context detection |
|
|
54
|
+
| `first-message` | string | auto-generated | Custom greeting message |
|
|
55
|
+
|
|
56
|
+
## Context Detection
|
|
57
|
+
|
|
58
|
+
The widget automatically detects page context and adapts:
|
|
59
|
+
|
|
60
|
+
- **Pricing pages** → Sales conversation
|
|
61
|
+
- **Careers pages** → Hiring persona
|
|
62
|
+
- **Blog posts** → Technical expert
|
|
63
|
+
- **Contact pages** → Partnership discussion
|
|
64
|
+
- **About pages** → Company story
|
|
65
|
+
- **General pages** → Friendly assistant
|
|
66
|
+
|
|
67
|
+
## Development
|
|
68
|
+
|
|
69
|
+
### Setup
|
|
70
|
+
```bash
|
|
71
|
+
cd src/widget
|
|
72
|
+
pnpm install
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Dev Server
|
|
76
|
+
```bash
|
|
77
|
+
pnpm run dev
|
|
78
|
+
# Opens http://localhost:3001/dev.html
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Build
|
|
82
|
+
```bash
|
|
83
|
+
pnpm run build
|
|
84
|
+
# Outputs to dist/widget.js
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Size Check
|
|
88
|
+
```bash
|
|
89
|
+
pnpm run size
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Architecture
|
|
93
|
+
|
|
94
|
+
```
|
|
95
|
+
FictionWidget.vue # Main widget orchestrator
|
|
96
|
+
├── SelfAgentWrapper.vue # Handle→agentId resolver + context
|
|
97
|
+
├── Shadow DOM mounting # Isolation layer
|
|
98
|
+
└── Custom element registration
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Build Output
|
|
102
|
+
- `dist/widget.js` - IIFE bundle for CDN
|
|
103
|
+
- Includes Vue 3.6+, styles, and all dependencies
|
|
104
|
+
- Optimized for CDN distribution
|
|
105
|
+
|
|
106
|
+
## Browser Support
|
|
107
|
+
|
|
108
|
+
- Chrome 91+
|
|
109
|
+
- Firefox 90+
|
|
110
|
+
- Safari 14+
|
|
111
|
+
- Edge 91+
|
|
112
|
+
|
|
113
|
+
## License
|
|
114
|
+
|
|
115
|
+
MIT - Fiction.com
|