Documentación
API de JavaScript
Las funciones que exporta el SDK, cómo abrir el formulario desde tu propia interfaz y los atributos HTML disponibles.
El paquete exporta las funciones sueltas y un objeto por defecto con las mismas funciones. Con la etiqueta script, todas quedan en window.wutbug.
import wutbug from '@wutbug/sdk';
// o: import { init, setUser, setMetadata, open, close, destroy, getClient } from '@wutbug/sdk';| Función | Descripción |
|---|---|
init(options) | Empieza a capturar y muestra el widget. Llamarla de nuevo reemplaza la instancia anterior. Devuelve el cliente. |
setUser(user | null) | Asocia la persona que usa la app a los próximos reportes. null al cerrar sesión. |
setMetadata(obj) | Agrega pares clave/valor (plan, tenant, feature flags…) a los próximos reportes. Se combina con lo anterior. |
open(options?) | Abre el formulario. { description } lo deja prellenado. |
close() | Cierra el formulario. |
destroy() | Quita el widget, detiene la captura y restaura console, fetch y XMLHttpRequest. |
getClient() | Devuelve la instancia activa (o null). Uso avanzado. |
Todas, salvo init, son seguras de llamar antes de inicializar: simplemente no hacen nada.
init(options)
wutbug.init({ projectKey: 'pk_tu_key', endpoint: 'https://api.wutbug.dev' });Lanza un error si se llama fuera del navegador o sin projectKey. Todas las opciones están en Configuración.
setUser(user)
wutbug.setUser({ id: 'u_42', email: 'ana@acme.com', name: 'Ana', plan: 'pro' });id, email y name son opcionales, y puedes agregar otros campos con valores JSON. Si el usuario no escribe un email en el formulario, se usa user.email como email de contacto del reporte (para avisarle cuando se resuelva y para la conversación con el equipo).
setMetadata(metadata)
wutbug.setMetadata({ tenant: 'acme', flags: { nuevoCheckout: true } });
wutbug.setMetadata({ carrito: 3 }); // se agrega a lo anteriorLos valores deben ser serializables a JSON. No pongas secretos aquí: la metadata se guarda tal cual.
open(options) y close()
// Desde un menú "Ayuda → Reportar un problema"
wutbug.open();
// Desde un error boundary, con la descripción prellenada
wutbug.open({ description: 'Error al cargar el carrito' });Si la interfaz del widget aún no termina de cargar, open() queda pendiente y el formulario se abre en cuanto esté lista.
Atributos HTML
Sin escribir JavaScript, cualquier elemento con data-wutbug-open abre el formulario al hacer clic. data-wutbug-description lo prellena.
<button data-wutbug-open>Reportar un problema</button>
<a href="#" data-wutbug-open data-wutbug-description="El PDF de la factura no descarga">
¿Problemas con la factura?
</a>Combínalo con launcher: false (o data-launcher="false") para usar solo tu propio botón.
| Atributo | Dónde | Efecto |
|---|---|---|
data-wutbug-open | Cualquier elemento | Abre el formulario al hacer clic. |
data-wutbug-description | Junto a data-wutbug-open | Prellena la descripción. |
class="wutbug-mask" o data-wutbug-mask | Cualquier elemento | Enmascara su texto en el replay y la captura. |
class="wutbug-block" o data-wutbug-block | Cualquier elemento | Lo oculta por completo (se ve como un bloque gris). |
destroy()
wutbug.destroy();Úsalo si la persona revoca su consentimiento, al desmontar en desarrollo o en tests. Restaura los métodos originales de console, fetch y XMLHttpRequest, detiene el replay y vacía los buffers en memoria.
Tipos de TypeScript
El paquete incluye tipos. Los más útiles:
import type { WutbugOptions, ReportPayload, ReportUser, PrivacyConfig, OpenOptions } from '@wutbug/sdk';
import { MASK_CLASS, BLOCK_CLASS, SDK_VERSION } from '@wutbug/sdk'; // 'wutbug-mask', 'wutbug-block'