@tekibo/feedpulse-sdk 2.0.0 → 2.1.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 +142 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# @tekibo/feedpulse-sdk
|
|
2
|
+
|
|
3
|
+
Developer-first embeddable behavior analytics and feedback SDK for Nuxt and React.
|
|
4
|
+
|
|
5
|
+
- Tracks user interactions from elements tagged with `data-fp-id`
|
|
6
|
+
- Sends event batches to your FeedPulse ingest endpoint
|
|
7
|
+
- Includes ready-to-use feedback widgets for Nuxt and React
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pnpm add @tekibo/feedpulse-sdk
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## What this SDK tracks
|
|
16
|
+
|
|
17
|
+
The SDK automatically tracks:
|
|
18
|
+
|
|
19
|
+
- `click`: when users click an element that has `data-fp-id`
|
|
20
|
+
- `hover`: when users hover an element for more than 500ms
|
|
21
|
+
- `scroll_into_view`: when tagged elements enter viewport
|
|
22
|
+
- `feedback`: explicit rating/message submissions from widget or manual API
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Quick start (Nuxt)
|
|
29
|
+
|
|
30
|
+
Import from `@tekibo/feedpulse-sdk/nuxt` and wrap your app:
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<script setup lang="ts">
|
|
34
|
+
import { FeedPulseProvider, FeedPulseWidget } from "@tekibo/feedpulse-sdk/nuxt";
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<template>
|
|
38
|
+
<FeedPulseProvider api-key="fp_live_your_project_key">
|
|
39
|
+
<NuxtPage />
|
|
40
|
+
<FeedPulseWidget id="global-feedback" position="bottom-right" />
|
|
41
|
+
</FeedPulseProvider>
|
|
42
|
+
</template>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Tag any interactive element with `data-fp-id`:
|
|
46
|
+
|
|
47
|
+
```vue
|
|
48
|
+
<template>
|
|
49
|
+
<UButton data-fp-id="hero-cta">
|
|
50
|
+
Start free trial
|
|
51
|
+
</UButton>
|
|
52
|
+
</template>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Use the composable for manual feedback/event calls:
|
|
56
|
+
|
|
57
|
+
```vue
|
|
58
|
+
<script setup lang="ts">
|
|
59
|
+
import { useFeedPulse } from "@tekibo/feedpulse-sdk/nuxt";
|
|
60
|
+
|
|
61
|
+
const tracker = useFeedPulse();
|
|
62
|
+
|
|
63
|
+
function sendNps() {
|
|
64
|
+
tracker?.trackFeedback("nps-card", 5, "Great onboarding flow");
|
|
65
|
+
}
|
|
66
|
+
</script>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Quick start (React)
|
|
70
|
+
|
|
71
|
+
Import from `@tekibo/feedpulse-sdk/react`:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { FeedPulseProvider, FeedPulseWidget, useFeedPulse } from "@tekibo/feedpulse-sdk/react";
|
|
75
|
+
|
|
76
|
+
function SaveButton() {
|
|
77
|
+
const { tracker } = useFeedPulse();
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<button
|
|
81
|
+
data-fp-id="settings-save"
|
|
82
|
+
onClick={() => tracker?.trackFeedback("settings-save", 5, "Saved successfully")}
|
|
83
|
+
>
|
|
84
|
+
Save
|
|
85
|
+
</button>
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
export default function App() {
|
|
90
|
+
return (
|
|
91
|
+
<FeedPulseProvider apiKey="fp_live_your_project_key">
|
|
92
|
+
<button data-fp-id="hero-cta">Get Started</button>
|
|
93
|
+
<SaveButton />
|
|
94
|
+
<FeedPulseWidget id="global-feedback" position="bottom-right" />
|
|
95
|
+
</FeedPulseProvider>
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Core API
|
|
101
|
+
|
|
102
|
+
Import from `@tekibo/feedpulse-sdk`:
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
import { FeedPulseTracker } from "@tekibo/feedpulse-sdk";
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
`FeedPulseTracker` configuration:
|
|
109
|
+
|
|
110
|
+
- `apiKey: string` required
|
|
111
|
+
- `endpoint?: string` optional, defaults to `https://feedpulse.dev/api/ingest`
|
|
112
|
+
- `batchInterval?: number` optional, defaults to `5000` ms
|
|
113
|
+
|
|
114
|
+
Key methods:
|
|
115
|
+
|
|
116
|
+
- `init()` start listeners and batching
|
|
117
|
+
- `track(eventType, elementId, metadata?)` enqueue an event
|
|
118
|
+
- `trackFeedback(elementId, rating, message)` send feedback immediately
|
|
119
|
+
- `destroy()` stop listeners and flush queue
|
|
120
|
+
|
|
121
|
+
## Widget props
|
|
122
|
+
|
|
123
|
+
Nuxt and React widgets support:
|
|
124
|
+
|
|
125
|
+
- `id?: string` element id used in feedback event
|
|
126
|
+
- `placeholder?: string` prompt text
|
|
127
|
+
- `position?: "bottom-right" | "bottom-left" | "inline"` default is `"bottom-right"`
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
## Integration checklist for your app
|
|
131
|
+
|
|
132
|
+
1. Create a project in FeedPulse dashboard and copy the project API key
|
|
133
|
+
2. Install package and add provider at root layout/app level
|
|
134
|
+
3. Add `data-fp-id` to primary buttons, links, forms, and sections
|
|
135
|
+
4. Optionally mount `FeedPulseWidget` for direct user feedback
|
|
136
|
+
5. Verify data appears in FeedPulse dashboard analytics and feedback pages
|
|
137
|
+
|
|
138
|
+
## Package exports
|
|
139
|
+
|
|
140
|
+
- `@tekibo/feedpulse-sdk` → core types + tracker
|
|
141
|
+
- `@tekibo/feedpulse-sdk/nuxt` → `FeedPulseProvider`, `FeedPulseWidget`, `useFeedPulse`
|
|
142
|
+
- `@tekibo/feedpulse-sdk/react` → `FeedPulseProvider`, `FeedPulseWidget`, `useFeedPulse`
|