@indesad/feedback-widget 1.1.1 → 1.1.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 +95 -93
- package/dist/index.js +1 -1
- package/dist/widget.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,93 +1,95 @@
|
|
|
1
|
-
# @indesad/feedback-widget
|
|
2
|
-
|
|
3
|
-
Botón de **opiniones de producto** para cualquier aplicación web: la persona reporta un problema, sugiere una mejora, hace una pregunta o felicita, y la opinión llega a la bandeja **Opiniones** de IndeFlow con folio, seguimiento y respuesta por correo en su idioma.
|
|
4
|
-
|
|
5
|
-
- Sin dependencias. Vive en un Shadow DOM: no hereda ni rompe los estilos de la app.
|
|
6
|
-
- Claro y oscuro: en los productos Indesad toma los tokens `--if-*` de la app (y su modo oscuro `html.dark`); en otras apps usa su paleta y sigue `data-theme`, la clase `dark` o `prefers-color-scheme`.
|
|
7
|
-
- Español, inglés y portugués (`locale: 'auto'` usa el del navegador).
|
|
8
|
-
- Si IndeFlow no responde, el botón no aparece y la app sigue igual.
|
|
9
|
-
- Una opinión **no es un caso de soporte**: si la app tiene soporte, `supportUrl` agrega el enlace «Necesito ayuda».
|
|
10
|
-
|
|
11
|
-
## 1. Activar opiniones en IndeFlow
|
|
12
|
-
|
|
13
|
-
Proyecto → Observabilidad → fuente de la app → pestaña **Opiniones**: activar, agregar los orígenes desde los que se usará (por ejemplo `https://app.cliente.cl`) y copiar el código. La clave es el mismo token de la fuente (`if_obs_...`); al activar opiniones recibe el permiso `ingest:feedback`. Es pública por naturaleza (va en el navegador): solo sirve para enviar opiniones desde los orígenes permitidos.
|
|
14
|
-
|
|
15
|
-
## 2a. Script listo para pegar (cualquier web)
|
|
16
|
-
|
|
17
|
-
```html
|
|
18
|
-
<script src="https://admin.indeflow.app/downloads/sdk/indeflow-feedback-1.1.
|
|
19
|
-
data-api="https://api.indeflow.app/api"
|
|
20
|
-
data-token="if_obs_prod_..."
|
|
21
|
-
data-locale="auto"></script>
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
Con la persona que ya inició sesión en tu app (recomendado):
|
|
25
|
-
|
|
26
|
-
```html
|
|
27
|
-
<script src="https://admin.indeflow.app/downloads/sdk/indeflow-feedback-1.1.
|
|
28
|
-
<script>
|
|
29
|
-
const feedback = IndeFlowFeedback.init({
|
|
30
|
-
apiUrl: 'https://api.indeflow.app/api',
|
|
31
|
-
sourceToken: 'if_obs_prod_...',
|
|
32
|
-
user: { name: 'Ana Pérez', email: 'ana@cliente.cl', company: 'Cliente S.A.', externalUserId: '42' },
|
|
33
|
-
locale: 'auto', theme: 'auto', supportUrl: '/soporte'
|
|
34
|
-
});
|
|
35
|
-
// Al cerrar sesión: feedback.setUser(null)
|
|
36
|
-
</script>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
## 2b. Angular (o React, Vue…)
|
|
40
|
-
|
|
41
|
-
```bash
|
|
42
|
-
npm install @indesad/feedback-widget@1.1.
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
```ts
|
|
46
|
-
import { createIndeFlowFeedback, IndeFlowFeedbackController } from '@indesad/feedback-widget';
|
|
47
|
-
|
|
48
|
-
@Injectable({ providedIn: 'root' })
|
|
49
|
-
export class FeedbackWidgetService {
|
|
50
|
-
private widget?: IndeFlowFeedbackController;
|
|
51
|
-
start(user: { name: string; email: string; company?: string; id: string }) {
|
|
52
|
-
this.widget ??= createIndeFlowFeedback({
|
|
53
|
-
apiUrl: environment.indeflowApi, sourceToken: environment.indeflowFeedbackToken,
|
|
54
|
-
user: { name: user.name, email: user.email, company: user.company, externalUserId: user.id },
|
|
55
|
-
locale: 'auto', theme: 'auto', brandLabel: 'InDeLedger'
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
stop() { this.widget?.destroy(); this.widget = undefined; }
|
|
59
|
-
}
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## Configuración
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
|
67
|
-
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
78
|
-
| `
|
|
79
|
-
| `
|
|
80
|
-
| `
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
1
|
+
# @indesad/feedback-widget
|
|
2
|
+
|
|
3
|
+
Botón de **opiniones de producto** para cualquier aplicación web: la persona reporta un problema, sugiere una mejora, hace una pregunta o felicita, y la opinión llega a la bandeja **Opiniones** de IndeFlow con folio, seguimiento y respuesta por correo en su idioma.
|
|
4
|
+
|
|
5
|
+
- Sin dependencias. Vive en un Shadow DOM: no hereda ni rompe los estilos de la app.
|
|
6
|
+
- Claro y oscuro: en los productos Indesad toma los tokens `--if-*` de la app (y su modo oscuro `html.dark`); en otras apps usa su paleta y sigue `data-theme`, la clase `dark` o `prefers-color-scheme`.
|
|
7
|
+
- Español, inglés y portugués (`locale: 'auto'` usa el del navegador).
|
|
8
|
+
- Si IndeFlow no responde, el botón no aparece y la app sigue igual.
|
|
9
|
+
- Una opinión **no es un caso de soporte**: si la app tiene soporte, `supportUrl` agrega el enlace «Necesito ayuda».
|
|
10
|
+
|
|
11
|
+
## 1. Activar opiniones en IndeFlow
|
|
12
|
+
|
|
13
|
+
Proyecto → Observabilidad → fuente de la app → pestaña **Opiniones**: activar, agregar los orígenes desde los que se usará (por ejemplo `https://app.cliente.cl`) y copiar el código. La clave es el mismo token de la fuente (`if_obs_...`); al activar opiniones recibe el permiso `ingest:feedback`. Es pública por naturaleza (va en el navegador): solo sirve para enviar opiniones desde los orígenes permitidos.
|
|
14
|
+
|
|
15
|
+
## 2a. Script listo para pegar (cualquier web)
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<script src="https://admin.indeflow.app/downloads/sdk/indeflow-feedback-1.1.2.js"
|
|
19
|
+
data-api="https://api.indeflow.app/api"
|
|
20
|
+
data-token="if_obs_prod_..."
|
|
21
|
+
data-locale="auto"></script>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Con la persona que ya inició sesión en tu app (recomendado):
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<script src="https://admin.indeflow.app/downloads/sdk/indeflow-feedback-1.1.2.js"></script>
|
|
28
|
+
<script>
|
|
29
|
+
const feedback = IndeFlowFeedback.init({
|
|
30
|
+
apiUrl: 'https://api.indeflow.app/api',
|
|
31
|
+
sourceToken: 'if_obs_prod_...',
|
|
32
|
+
user: { name: 'Ana Pérez', email: 'ana@cliente.cl', company: 'Cliente S.A.', externalUserId: '42' },
|
|
33
|
+
locale: 'auto', theme: 'auto', supportUrl: '/soporte'
|
|
34
|
+
});
|
|
35
|
+
// Al cerrar sesión: feedback.setUser(null)
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 2b. Angular (o React, Vue…)
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm install @indesad/feedback-widget@1.1.2
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { createIndeFlowFeedback, IndeFlowFeedbackController } from '@indesad/feedback-widget';
|
|
47
|
+
|
|
48
|
+
@Injectable({ providedIn: 'root' })
|
|
49
|
+
export class FeedbackWidgetService {
|
|
50
|
+
private widget?: IndeFlowFeedbackController;
|
|
51
|
+
start(user: { name: string; email: string; company?: string; id: string }) {
|
|
52
|
+
this.widget ??= createIndeFlowFeedback({
|
|
53
|
+
apiUrl: environment.indeflowApi, sourceToken: environment.indeflowFeedbackToken,
|
|
54
|
+
user: { name: user.name, email: user.email, company: user.company, externalUserId: user.id },
|
|
55
|
+
locale: 'auto', theme: 'auto', brandLabel: 'InDeLedger'
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
stop() { this.widget?.destroy(); this.widget = undefined; }
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Configuración
|
|
63
|
+
|
|
64
|
+
El widget tiene versiones independientes de los SDK de observabilidad. Publicar una versión nueva no cambia una aplicación ya desplegada: actualiza su dependencia o la URL del script cuando quieras adoptarla. Las URLs anteriores se conservan.
|
|
65
|
+
|
|
66
|
+
| Opción | Por defecto | Qué hace |
|
|
67
|
+
|---|---|---|
|
|
68
|
+
| `apiUrl`, `sourceToken` | — | Obligatorias. |
|
|
69
|
+
| `user` | — | `{ name, email, company, externalUserId }` de la sesión. Sin `user`, el formulario pide nombre y correo (si la fuente admite anónimos). La identidad la declara la app; IndeFlow no la verifica. |
|
|
70
|
+
| `locale` | `'auto'` | `es-419`, `en`, `pt-BR` o `auto`. También define el idioma de los correos al reportante. |
|
|
71
|
+
| `theme`, `themeSelector` | `'auto'` | `light`, `dark` o `auto`. `themeSelector` (por ejemplo `'[data-mode="night"]'`) indica cuándo la app está en oscuro. |
|
|
72
|
+
| `colors` | tokens `--if-*` | `accent`, `accentContrast`, `background`, `surface`, `text`, `muted`, `border`, `danger`, `success`, `radius`, `font`. |
|
|
73
|
+
| `brandLabel`, `title` | los de la fuente | Nombre de la app arriba del panel y título. |
|
|
74
|
+
| `position`, `offset` | `bottom-right`, 20 px | Lugar del botón; `offset` para no tapar otros botones flotantes. |
|
|
75
|
+
| `launcher` | `'bubble'` | `'none'` oculta el botón: abre el panel con `open()` desde tu menú. |
|
|
76
|
+
| `launcherLabel`, `launcherIcon`, `launcherIconType` | «Opiniones» | Texto e icono (`emoji`, `image`, `svg`). |
|
|
77
|
+
| `kinds` | los de la fuente | Subconjunto de `bug`, `improvement`, `question`, `praise`. |
|
|
78
|
+
| `supportUrl`, `supportLabel` | — | Enlace «Necesito ayuda» hacia tu soporte. |
|
|
79
|
+
| `screenshot` | `true` | Permite adjuntar hasta 5 imágenes PNG, JPG o WebP de hasta 5 MB cada una (también pegadas con Ctrl+V). |
|
|
80
|
+
| `context`, `appVersion`, `collectRoute` | — / — / `true` | Datos fijos del envío (máx. 20 claves, sin secretos), versión y ruta actual (sin parámetros). |
|
|
81
|
+
| `zIndex`, `showPoweredBy` | `2147483000`, `true` | Capa y pie «Con tecnología de IndeFlow». |
|
|
82
|
+
| `onSubmitted`, `onError` | — | Callbacks con `{ folio, trackingUrl }` o `{ code, message }`. |
|
|
83
|
+
|
|
84
|
+
Controlador: `open(kind?)`, `close()`, `toggle()`, `setUser(user)`, `setContext(ctx)`, `update(config)`, `destroy()` y `ready` (promesa: `false` si quedó desactivado).
|
|
85
|
+
|
|
86
|
+
## Qué se envía
|
|
87
|
+
|
|
88
|
+
Tipo, mensaje, idioma, la identidad declarada, la URL **sin parámetros ni fragmento**, la ruta, versión, navegador, tamaño de pantalla, tema y el `context` que pongas. El servidor descarta claves de `context` que parezcan secretos (`token`, `password`, `apiKey`…), guarda la IP solo como huella y exige un desafío anti-robots por envío. Nunca se leen cookies, almacenamiento ni el contenido de la página.
|
|
89
|
+
|
|
90
|
+
## Desarrollo
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
cd packages/web/feedback-widget && npm test # jsdom + fetch simulado
|
|
94
|
+
node scripts/build-feedback-widget.mjs # genera las descargas en frontend/IndeFlow.Admin/public/downloads/sdk
|
|
95
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -408,7 +408,7 @@ label.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
|
|
408
408
|
`;
|
|
409
409
|
|
|
410
410
|
// packages/web/feedback-widget/src/widget.ts
|
|
411
|
-
var VERSION = "1.1.
|
|
411
|
+
var VERSION = "1.1.2";
|
|
412
412
|
var KINDS = ["bug", "improvement", "question", "praise"];
|
|
413
413
|
var MAX_ATTACHMENT = 5 * 1024 * 1024;
|
|
414
414
|
var MAX_ATTACHMENTS = 5;
|
package/dist/widget.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FeedbackKind, FeedbackUser, IndeFlowFeedbackConfig, IndeFlowFeedbackController } from './types';
|
|
2
|
-
export declare const VERSION = "1.1.
|
|
2
|
+
export declare const VERSION = "1.1.2";
|
|
3
3
|
export declare class IndeFlowFeedbackWidget implements IndeFlowFeedbackController {
|
|
4
4
|
private config;
|
|
5
5
|
private remote;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@indesad/feedback-widget",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Widget de opiniones de producto de IndeFlow: reportar problemas, sugerir mejoras, preguntar y felicitar desde cualquier app web. Sin dependencias, Shadow DOM, claro/oscuro, es/en/pt.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|