@indesad/feedback-widget 1.1.0 → 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.
Files changed (4) hide show
  1. package/README.md +95 -93
  2. package/dist/index.js +1 -1
  3. package/dist/widget.d.ts +1 -1
  4. 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.0.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.0.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.0
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
- | Opción | Por defecto | Qué hace |
65
- |---|---|---|
66
- | `apiUrl`, `sourceToken` | — | Obligatorias. |
67
- | `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. |
68
- | `locale` | `'auto'` | `es-419`, `en`, `pt-BR` o `auto`. También define el idioma de los correos al reportante. |
69
- | `theme`, `themeSelector` | `'auto'` | `light`, `dark` o `auto`. `themeSelector` (por ejemplo `'[data-mode="night"]'`) indica cuándo la app está en oscuro. |
70
- | `colors` | tokens `--if-*` | `accent`, `accentContrast`, `background`, `surface`, `text`, `muted`, `border`, `danger`, `success`, `radius`, `font`. |
71
- | `brandLabel`, `title` | los de la fuente | Nombre de la app arriba del panel y título. |
72
- | `position`, `offset` | `bottom-right`, 20 px | Lugar del botón; `offset` para no tapar otros botones flotantes. |
73
- | `launcher` | `'bubble'` | `'none'` oculta el botón: abre el panel con `open()` desde tu menú. |
74
- | `launcherLabel`, `launcherIcon`, `launcherIconType` | «Opiniones» | Texto e icono (`emoji`, `image`, `svg`). |
75
- | `kinds` | los de la fuente | Subconjunto de `bug`, `improvement`, `question`, `praise`. |
76
- | `supportUrl`, `supportLabel` | — | Enlace «Necesito ayuda» hacia tu soporte. |
77
- | `screenshot` | `true` | Permite adjuntar hasta 5 imágenes PNG, JPG o WebP de hasta 5 MB cada una (también pegadas con Ctrl+V). |
78
- | `context`, `appVersion`, `collectRoute` | — / — / `true` | Datos fijos del envío (máx. 20 claves, sin secretos), versión y ruta actual (sin parámetros). |
79
- | `zIndex`, `showPoweredBy` | `2147483000`, `true` | Capa y pie «Con tecnología de IndeFlow». |
80
- | `onSubmitted`, `onError` | — | Callbacks con `{ folio, trackingUrl }` o `{ code, message }`. |
81
-
82
- Controlador: `open(kind?)`, `close()`, `toggle()`, `setUser(user)`, `setContext(ctx)`, `update(config)`, `destroy()` y `ready` (promesa: `false` si quedó desactivado).
83
-
84
- ## Qué se envía
85
-
86
- 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.
87
-
88
- ## Desarrollo
89
-
90
- ```bash
91
- cd packages/web/feedback-widget && npm test # jsdom + fetch simulado
92
- node scripts/build-feedback-widget.mjs # genera las descargas en frontend/IndeFlow.Admin/public/downloads/sdk
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.0";
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.0";
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.0",
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",