@fluxtrace/embed 3.9.0 → 3.10.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 +92 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# @fluxtrace/embed
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@fluxtrace/embed)
|
|
4
|
+
|
|
5
|
+
Embed a FluxTrace dashboard in any web page with a single custom element.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @fluxtrace/embed
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
- Package: <https://www.npmjs.com/package/@fluxtrace/embed>
|
|
14
|
+
- Ships ESM (`dist/index.mjs`) plus an IIFE bundle exposing a
|
|
15
|
+
`FluxtraceEmbed` global for plain `<script>` tags. TypeScript types included.
|
|
16
|
+
- Requires a browser with custom-elements support. Nothing renders server-side.
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<script type="module">
|
|
22
|
+
import "@fluxtrace/embed";
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<fluxtrace-dashboard project-id="YOUR_PROJECT_ID"></fluxtrace-dashboard>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
On connect, the element requests a short-lived embed token from your
|
|
29
|
+
FluxTrace web app (`POST <host>/api/embed/token`, session cookies included)
|
|
30
|
+
and renders the dashboard in a lazy-loaded `iframe`.
|
|
31
|
+
|
|
32
|
+
### React / Next.js
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import "@fluxtrace/embed";
|
|
36
|
+
|
|
37
|
+
export function Dashboard() {
|
|
38
|
+
return <fluxtrace-dashboard project-id="YOUR_PROJECT_ID" height="800px" />;
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Filtered, time-bounded embed
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<fluxtrace-dashboard
|
|
46
|
+
project-id="YOUR_PROJECT_ID"
|
|
47
|
+
host="https://app.example.com"
|
|
48
|
+
height="800px"
|
|
49
|
+
user-id="user-123"
|
|
50
|
+
from="2026-09-01"
|
|
51
|
+
to="2026-10-01"
|
|
52
|
+
paths="/pricing,/checkout"
|
|
53
|
+
ttl="3600"
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Setting attributes dynamically
|
|
58
|
+
|
|
59
|
+
```js
|
|
60
|
+
const el = document.querySelector("fluxtrace-dashboard");
|
|
61
|
+
el.setAttribute("paths", "/pricing,/checkout");
|
|
62
|
+
// Re-connect the element to reload with new options:
|
|
63
|
+
el.remove();
|
|
64
|
+
document.body.appendChild(el);
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Attributes
|
|
68
|
+
|
|
69
|
+
| Attribute | Required | Default | Description |
|
|
70
|
+
| ------------ | -------- | -------------- | ---------------------------------------------------- |
|
|
71
|
+
| `project-id` | yes | — | Project to display. Shows an error note without it. |
|
|
72
|
+
| `host` | no | current origin | FluxTrace web app origin serving `/api/embed/token` |
|
|
73
|
+
| `origin` | no | current origin | Origin sent with the token request |
|
|
74
|
+
| `height` | no | `720px` | Iframe height |
|
|
75
|
+
| `user-id` | no | — | End user the embed is scoped to |
|
|
76
|
+
| `from` | no | — | Start of the displayed range |
|
|
77
|
+
| `to` | no | — | End of the displayed range |
|
|
78
|
+
| `paths` | no | — | Comma-separated page paths to filter by |
|
|
79
|
+
| `ttl` | no | — | Token lifetime in seconds |
|
|
80
|
+
|
|
81
|
+
## Notes
|
|
82
|
+
|
|
83
|
+
- The element registers itself as `fluxtrace-dashboard` exactly once;
|
|
84
|
+
importing the package multiple times is safe.
|
|
85
|
+
- Token requests send session cookies, so viewers must be signed in to the
|
|
86
|
+
FluxTrace web app at `host`, and `host` must allow the page `origin`.
|
|
87
|
+
|
|
88
|
+
## Changelog
|
|
89
|
+
|
|
90
|
+
### 3.9.0
|
|
91
|
+
|
|
92
|
+
- Initial public release.
|