@fluxtrace/embed 3.9.1 → 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 +65 -22
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# @fluxtrace/embed
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@fluxtrace/embed)
|
|
4
|
+
|
|
3
5
|
Embed a FluxTrace dashboard in any web page with a single custom element.
|
|
4
6
|
|
|
5
7
|
## Install
|
|
@@ -8,9 +10,12 @@ Embed a FluxTrace dashboard in any web page with a single custom element.
|
|
|
8
10
|
npm install @fluxtrace/embed
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
|
|
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.
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
## Usage
|
|
14
19
|
|
|
15
20
|
```html
|
|
16
21
|
<script type="module">
|
|
@@ -20,30 +25,68 @@ Load the script, then drop the element where you want the dashboard:
|
|
|
20
25
|
<fluxtrace-dashboard project-id="YOUR_PROJECT_ID"></fluxtrace-dashboard>
|
|
21
26
|
```
|
|
22
27
|
|
|
23
|
-
The package also ships an IIFE bundle that registers a `FluxtraceEmbed`
|
|
24
|
-
global for use via a plain `<script>` tag.
|
|
25
|
-
|
|
26
28
|
On connect, the element requests a short-lived embed token from your
|
|
27
|
-
FluxTrace web app (`POST <host>/api/embed/token
|
|
28
|
-
in a lazy-loaded `iframe`.
|
|
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
|
+
```
|
|
29
66
|
|
|
30
67
|
## Attributes
|
|
31
68
|
|
|
32
|
-
| Attribute | Required | Default
|
|
33
|
-
| ------------ | -------- |
|
|
34
|
-
| `project-id` | yes | —
|
|
35
|
-
| `host` | no | current origin
|
|
36
|
-
| `origin` | no | current origin
|
|
37
|
-
| `height` | no | `720px`
|
|
38
|
-
| `user-id` | no | —
|
|
39
|
-
| `from` | no | —
|
|
40
|
-
| `to` | no | —
|
|
41
|
-
| `paths` | no | —
|
|
42
|
-
| `ttl` | no | —
|
|
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 |
|
|
43
80
|
|
|
44
81
|
## Notes
|
|
45
82
|
|
|
46
|
-
- The element registers itself as `fluxtrace-dashboard` exactly once;
|
|
47
|
-
the package multiple times is safe.
|
|
48
|
-
-
|
|
49
|
-
|
|
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.
|