usercase 0.0.0-stage → 1.0.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 +160 -3
- package/dist/npm/index.cjs +1 -0
- package/dist/npm/index.d.ts +18 -0
- package/dist/npm/index.mjs +1 -0
- package/package.json +59 -6
package/README.md
CHANGED
|
@@ -1,3 +1,160 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
# Usercase
|
|
2
|
+
|
|
3
|
+
Usercase is a web plugin for embedding user research widgets into your website.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
### npm
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install usercase
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### yarn
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add usercase
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### ES Module
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
import Usercase from 'usercase';
|
|
25
|
+
|
|
26
|
+
Usercase.init({
|
|
27
|
+
project: 'YOUR_PROJECT_ID'
|
|
28
|
+
});
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### CommonJS
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
const Usercase = require('usercase');
|
|
35
|
+
|
|
36
|
+
Usercase.init({
|
|
37
|
+
project: 'YOUR_PROJECT_ID'
|
|
38
|
+
});
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Script Tag
|
|
42
|
+
|
|
43
|
+
You can also use Usercase without npm by adding a script tag directly:
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<script>
|
|
47
|
+
(function () {
|
|
48
|
+
var w = window;
|
|
49
|
+
if (!w.Usercase) { w.Usercase = {}; }
|
|
50
|
+
w.Usercase.project = "YOUR_PROJECT_ID";
|
|
51
|
+
function l() {
|
|
52
|
+
if (w.UsercaseInitialized) { return; }
|
|
53
|
+
w.UsercaseInitialized = true;
|
|
54
|
+
var s = document.createElement("script");
|
|
55
|
+
s.type = "text/javascript";
|
|
56
|
+
s.async = true;
|
|
57
|
+
s.src = "https://app.usercase.io/plugin/1.0.1/eb-plugin-web.js";
|
|
58
|
+
var x = document.getElementsByTagName("head")[0];
|
|
59
|
+
if (x) { x.appendChild(s); }
|
|
60
|
+
}
|
|
61
|
+
if (document.readyState === "complete") { l(); }
|
|
62
|
+
else { w.addEventListener("DOMContentLoaded", l); w.addEventListener("load", l); }
|
|
63
|
+
})();
|
|
64
|
+
</script>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Framework Examples
|
|
68
|
+
|
|
69
|
+
### React
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
import { useEffect } from 'react';
|
|
73
|
+
import Usercase from 'usercase';
|
|
74
|
+
|
|
75
|
+
function App() {
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
Usercase.init({ project: 'YOUR_PROJECT_ID' });
|
|
78
|
+
}, []);
|
|
79
|
+
|
|
80
|
+
return <div>My App</div>;
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Next.js
|
|
85
|
+
|
|
86
|
+
```jsx
|
|
87
|
+
'use client';
|
|
88
|
+
|
|
89
|
+
import { useEffect } from 'react';
|
|
90
|
+
import Usercase from 'usercase';
|
|
91
|
+
|
|
92
|
+
export default function UsercaseProvider({ children }) {
|
|
93
|
+
useEffect(() => {
|
|
94
|
+
Usercase.init({ project: 'YOUR_PROJECT_ID' });
|
|
95
|
+
}, []);
|
|
96
|
+
|
|
97
|
+
return <>{children}</>;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Vue
|
|
102
|
+
|
|
103
|
+
```vue
|
|
104
|
+
<script setup>
|
|
105
|
+
import { onMounted } from 'vue';
|
|
106
|
+
import Usercase from 'usercase';
|
|
107
|
+
|
|
108
|
+
onMounted(() => {
|
|
109
|
+
Usercase.init({ project: 'YOUR_PROJECT_ID' });
|
|
110
|
+
});
|
|
111
|
+
</script>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## API
|
|
115
|
+
|
|
116
|
+
### `Usercase.init(options)`
|
|
117
|
+
|
|
118
|
+
| Option | Type | Required | Description |
|
|
119
|
+
|--------|------|----------|-------------|
|
|
120
|
+
| `project` | `string` | Yes | Your Usercase project ID |
|
|
121
|
+
| `requireConsent` | `boolean` | No | Wait for `Usercase.consent(true)` before starting. See [Consent](#consent). |
|
|
122
|
+
|
|
123
|
+
### `Usercase.consent(granted)`
|
|
124
|
+
|
|
125
|
+
Tell Usercase whether the visitor agreed to it. Call it from your consent banner (CMP) on every page load.
|
|
126
|
+
|
|
127
|
+
- `Usercase.consent(true)` starts Usercase if it is waiting for consent.
|
|
128
|
+
- `Usercase.consent(false)` stops Usercase on this page and removes its cookies (`eb_sid_*`, `eb_mic_label`) and browser storage (`Usercase*` keys). Your site's own cookies and storage are not touched.
|
|
129
|
+
|
|
130
|
+
Consent is not remembered by Usercase. Your consent banner remembers it and calls `consent()` again on each page.
|
|
131
|
+
|
|
132
|
+
## Consent
|
|
133
|
+
|
|
134
|
+
By default, Usercase starts as soon as the script loads. If your visitors must agree first (for example, visitors from the EU, UK, or Switzerland), turn on `requireConsent`. Until `Usercase.consent(true)` is called, Usercase does not load, set cookies, write to browser storage, or collect anything.
|
|
135
|
+
|
|
136
|
+
### Script Tag
|
|
137
|
+
|
|
138
|
+
Add these two lines to the install code, after `w.Usercase.project`:
|
|
139
|
+
|
|
140
|
+
```js
|
|
141
|
+
w.Usercase.requireConsent = true;
|
|
142
|
+
w.Usercase.consent = w.Usercase.consent || function (g) { w.Usercase.consented = g !== false; };
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Then call `window.Usercase.consent(true)` or `window.Usercase.consent(false)` from your consent banner. It is safe to call before the Usercase script has finished loading.
|
|
146
|
+
|
|
147
|
+
### npm
|
|
148
|
+
|
|
149
|
+
```js
|
|
150
|
+
import Usercase from 'usercase';
|
|
151
|
+
|
|
152
|
+
Usercase.init({ project: 'YOUR_PROJECT_ID', requireConsent: true });
|
|
153
|
+
|
|
154
|
+
// in your consent banner callback
|
|
155
|
+
Usercase.consent(true); // or Usercase.consent(false)
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## License
|
|
159
|
+
|
|
160
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const e={init(e){if("undefined"==typeof window)return void console.warn("Usercase: this package only works in the browser.");const s=window;if(s.Usercase=s.Usercase||{},s.Usercase.project=e.project,e.requireConsent&&(s.Usercase.requireConsent=!0),s.UsercaseInitialized)return;s.UsercaseInitialized=!0;const n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://app.usercase.io/plugin/1.0.1/eb-plugin-web.js";const t=document.getElementsByTagName("head")[0];t&&t.appendChild(n)},consent(e=!0){if("undefined"==typeof window)return;const s=window;s.Usercase=s.Usercase||{},"function"==typeof s.Usercase.consent?s.Usercase.consent(e):s.Usercase.consented=!1!==e}};module.exports=e;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface UsercaseOptions {
|
|
2
|
+
/** Your Usercase project ID */
|
|
3
|
+
project: string;
|
|
4
|
+
/** Wait for `Usercase.consent(true)` before starting. No cookies, storage, or collection until then. */
|
|
5
|
+
requireConsent?: boolean;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
interface Usercase {
|
|
9
|
+
init(options: UsercaseOptions): void;
|
|
10
|
+
/**
|
|
11
|
+
* Tell Usercase whether the visitor agreed. Call it from your consent banner on every page load.
|
|
12
|
+
* `true` starts Usercase; `false` stops it and removes its cookies and browser storage.
|
|
13
|
+
*/
|
|
14
|
+
consent(granted?: boolean): void;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
declare const Usercase: Usercase;
|
|
18
|
+
export default Usercase;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const e={init(e){if("undefined"==typeof window)return void console.warn("Usercase: this package only works in the browser.");const s=window;if(s.Usercase=s.Usercase||{},s.Usercase.project=e.project,e.requireConsent&&(s.Usercase.requireConsent=!0),s.UsercaseInitialized)return;s.UsercaseInitialized=!0;const n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src="https://app.usercase.io/plugin/1.0.1/eb-plugin-web.js";const t=document.getElementsByTagName("head")[0];t&&t.appendChild(n)},consent(e=!0){if("undefined"==typeof window)return;const s=window;s.Usercase=s.Usercase||{},"function"==typeof s.Usercase.consent?s.Usercase.consent(e):s.Usercase.consented=!1!==e}};export{e as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,59 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "usercase",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "usercase",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Usercase web plugin for user research",
|
|
5
|
+
"main": "dist/npm/index.cjs",
|
|
6
|
+
"module": "dist/npm/index.mjs",
|
|
7
|
+
"types": "dist/npm/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/npm/index.mjs",
|
|
11
|
+
"require": "./dist/npm/index.cjs",
|
|
12
|
+
"types": "./dist/npm/index.d.ts"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist/npm",
|
|
17
|
+
"README.md"
|
|
18
|
+
],
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"scripts": {
|
|
21
|
+
"start": "node server.js",
|
|
22
|
+
"build": "node create-index.js && cross-env NODE_ENV=production rollup -c",
|
|
23
|
+
"build:dev": "node create-index.js && cross-env NODE_ENV=development rollup -c",
|
|
24
|
+
"build:npm": "cross-env BUILD=npm rollup -c",
|
|
25
|
+
"build:extension": "npm run build && node scripts/build-extension.js",
|
|
26
|
+
"build:extension-dev": "npm run build:dev && node scripts/build-extension.js",
|
|
27
|
+
"zip:extension": "cd extension && powershell -Command \"Compress-Archive -Path * -DestinationPath ../earningbirds-extension.zip -Force\"",
|
|
28
|
+
"prepublishOnly": "npm run build:npm",
|
|
29
|
+
"dev-earningbirds": "cd ../earningbirds && npm run dev",
|
|
30
|
+
"dev-web": "cd ../bluetags && npm run dev",
|
|
31
|
+
"dev-server": "cd ../earningbirds-server && npm run dev",
|
|
32
|
+
"dev-only": "cross-env NODE_ENV=development rollup -c -w",
|
|
33
|
+
"dev": "start npm run dev-web && start npm run dev-server && start node server.js && cross-env NODE_ENV=development rollup -c -w"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@google/genai": "^1.50.1",
|
|
37
|
+
"@rollup/plugin-commonjs": "^29.0.2",
|
|
38
|
+
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
39
|
+
"@rollup/plugin-replace": "^6.0.2",
|
|
40
|
+
"@rollup/plugin-terser": "^1.0.0",
|
|
41
|
+
"@rollup/plugin-typescript": "^12.1.2",
|
|
42
|
+
"@types/express": "^4.17.21",
|
|
43
|
+
"@types/node": "^20.17.28",
|
|
44
|
+
"@types/pako": "^2.0.4",
|
|
45
|
+
"cross-env": "^7.0.3",
|
|
46
|
+
"express": "^4.18.2",
|
|
47
|
+
"playwright": "^1.58.2",
|
|
48
|
+
"rollup": "^4.38.0",
|
|
49
|
+
"rollup-plugin-import-css": "^4.2.1",
|
|
50
|
+
"ts-node": "^10.9.2",
|
|
51
|
+
"tslib": "^2.8.1",
|
|
52
|
+
"typescript": "^5.3.3"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"html2canvas-pro": "^2.0.2",
|
|
56
|
+
"pako": "^2.1.0",
|
|
57
|
+
"rrweb": "^2.0.0-alpha.20"
|
|
58
|
+
}
|
|
59
|
+
}
|