@thunderphone/widget 0.2.1 → 0.2.3
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 +37 -48
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,40 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Embed a ThunderPhone voice AI agent on any website. Users can talk to your agent directly from your site using their browser microphone.
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
### Option 1: Script Tag (CDN)
|
|
8
|
-
|
|
9
|
-
No build tools required. Add two tags to your HTML:
|
|
10
|
-
|
|
11
|
-
```html
|
|
12
|
-
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
|
|
13
|
-
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
|
|
14
|
-
|
|
15
|
-
<div id="thunderphone"></div>
|
|
16
|
-
|
|
17
|
-
<script>
|
|
18
|
-
ThunderPhone.mount({
|
|
19
|
-
element: '#thunderphone',
|
|
20
|
-
apiKey: 'pk_live_your_publishable_key',
|
|
21
|
-
agentId: 123,
|
|
22
|
-
})
|
|
23
|
-
</script>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
Pin to a specific version for production:
|
|
27
|
-
|
|
28
|
-
```html
|
|
29
|
-
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v0.1.0/style.css" />
|
|
30
|
-
<script src="https://cdn.thunderphone.com/widget/v0.1.0/widget.js"></script>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
### Option 2: npm (React)
|
|
5
|
+
## Installation
|
|
34
6
|
|
|
35
7
|
```bash
|
|
36
8
|
npm install @thunderphone/widget
|
|
37
9
|
```
|
|
38
10
|
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
39
13
|
```tsx
|
|
40
14
|
import { ThunderPhoneWidget } from '@thunderphone/widget'
|
|
41
15
|
import '@thunderphone/widget/style.css'
|
|
@@ -57,7 +31,7 @@ function App() {
|
|
|
57
31
|
3. Enable the **Embeddable Widget** toggle on the agent you want to expose
|
|
58
32
|
4. Use the agent's ID and your publishable key in the widget code above
|
|
59
33
|
|
|
60
|
-
## Props
|
|
34
|
+
## Props
|
|
61
35
|
|
|
62
36
|
| Prop | Type | Required | Description |
|
|
63
37
|
|------|------|----------|-------------|
|
|
@@ -69,8 +43,6 @@ function App() {
|
|
|
69
43
|
| `onError` | `(error) => void` | No | Called on errors. Error has `error` (code) and `message` fields |
|
|
70
44
|
| `className` | `string` | No | Additional CSS class for the widget container |
|
|
71
45
|
|
|
72
|
-
For the script tag version, pass these as properties on the options object to `ThunderPhone.mount()`, plus an `element` property (CSS selector or DOM element) for where to render.
|
|
73
|
-
|
|
74
46
|
## Styling
|
|
75
47
|
|
|
76
48
|
The widget uses plain CSS with `tp-` prefixed classes, so it won't conflict with your styles. You can override any of these classes:
|
|
@@ -97,29 +69,46 @@ Example — custom colors:
|
|
|
97
69
|
}
|
|
98
70
|
```
|
|
99
71
|
|
|
100
|
-
##
|
|
72
|
+
## Domain Restrictions
|
|
101
73
|
|
|
102
|
-
|
|
74
|
+
Your publishable key can be restricted to specific domains in the Developers settings page. Requests from unlisted domains will be rejected. `localhost` is always allowed for development.
|
|
103
75
|
|
|
104
|
-
|
|
105
|
-
const widget = ThunderPhone.mount({
|
|
106
|
-
element: '#thunderphone',
|
|
107
|
-
apiKey: 'pk_live_...',
|
|
108
|
-
agentId: 123,
|
|
109
|
-
onConnect: () => console.log('Connected'),
|
|
110
|
-
onDisconnect: () => console.log('Disconnected'),
|
|
111
|
-
onError: (err) => console.error(err.message),
|
|
112
|
-
})
|
|
76
|
+
Wildcard subdomains are supported: `*.example.com` matches `app.example.com`, `docs.example.com`, etc.
|
|
113
77
|
|
|
114
|
-
|
|
115
|
-
|
|
78
|
+
## CDN / Script Tag
|
|
79
|
+
|
|
80
|
+
If you're not using a bundler, you can load the widget via script tag. This version bundles React internally so no dependencies are needed.
|
|
81
|
+
|
|
82
|
+
```html
|
|
83
|
+
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v0.2.1/style.css" />
|
|
84
|
+
<script src="https://cdn.thunderphone.com/widget/v0.2.1/widget.js"></script>
|
|
85
|
+
|
|
86
|
+
<div id="thunderphone"></div>
|
|
87
|
+
|
|
88
|
+
<script>
|
|
89
|
+
ThunderPhone.mount({
|
|
90
|
+
element: '#thunderphone',
|
|
91
|
+
apiKey: 'pk_live_your_publishable_key',
|
|
92
|
+
agentId: 123,
|
|
93
|
+
})
|
|
94
|
+
</script>
|
|
116
95
|
```
|
|
117
96
|
|
|
118
|
-
|
|
97
|
+
Use `latest` instead of a version number for the most recent release (cached for 5 minutes):
|
|
119
98
|
|
|
120
|
-
|
|
99
|
+
```
|
|
100
|
+
https://cdn.thunderphone.com/widget/latest/widget.js
|
|
101
|
+
https://cdn.thunderphone.com/widget/latest/style.css
|
|
102
|
+
```
|
|
121
103
|
|
|
122
|
-
|
|
104
|
+
`ThunderPhone.mount()` accepts the same options as the React component props above, plus `element` (CSS selector or DOM element). It returns a handle for cleanup:
|
|
105
|
+
|
|
106
|
+
```js
|
|
107
|
+
const widget = ThunderPhone.mount({ element: '#thunderphone', apiKey: '...', agentId: 123 })
|
|
108
|
+
|
|
109
|
+
// Later, to remove the widget:
|
|
110
|
+
widget.unmount()
|
|
111
|
+
```
|
|
123
112
|
|
|
124
113
|
## License
|
|
125
114
|
|