Saltar al contenido

Documentación

Instalación

Agrega el widget con una etiqueta script o con el paquete npm, identifica a tus usuarios y verifica que funciona.

Necesitas dos datos de tu proyecto, que encuentras en el dashboard en Proyectos e instalación:

  • Project key (pk_…): es pública y puede ir en el código del navegador.
  • Endpoint: la URL de la API donde se envían los reportes.

El dashboard muestra el snippet con ambos valores ya puestos. En esta guía usamos pk_tu_key y https://api.wutbug.dev como ejemplo.

Opción A: etiqueta script

Pega esto en el <head> de tu plantilla base. No necesitas build ni bundler.

HTML
<script type="module" src="https://cdn.wutbug.dev/v0/wutbug.js"
  data-project-key="pk_tu_key"
  data-endpoint="https://api.wutbug.dev"></script>

Con data-project-key el SDK se inicializa solo. Puedes configurar lo básico con atributos:

AtributoEquivale aValores
data-project-keyprojectKeyObligatorio. Tu key pk_….
data-endpointendpointURL de la API.
data-releasereleaseVersión de tu app, por ejemplo el SHA del commit.
data-localelocaleen o es. Sin el atributo: idioma del navegador.
data-positionpositionbottom-right, bottom-left, top-right o top-left.
data-accenttheme.accentColor en hex, por ejemplo #ea580c.
data-launcherlauncherfalse oculta el botón flotante.
data-launcher-labellauncherLabelTexto del botón.
data-debugdebugPresente = registra el funcionamiento interno en la consola.

Para opciones que no tienen atributo (privacidad, beforeSend, ignoreUrls…), quita data-project-key y llama a wutbug.init({...}) tú mismo.

Llamadas antes de que cargue el script

El script es un módulo y carga de forma diferida. Si quieres llamar a wutbug.setUser() o wutbug.init() antes de que termine de cargar, agrega este fragmento antes del script. Las llamadas quedan en cola y se ejecutan al cargar:

HTML
<script>
  window.wutbug = window.wutbug || { q: [] };
  ['init', 'setUser', 'setMetadata', 'open', 'close'].forEach(function (m) {
    window.wutbug[m] = window.wutbug[m] || function () { window.wutbug.q.push([m, arguments]); };
  });
</script>
<script type="module" src="https://cdn.wutbug.dev/v0/wutbug.js"></script>
<script>
  wutbug.init({ projectKey: 'pk_tu_key', endpoint: 'https://api.wutbug.dev', locale: 'es' });
</script>

Si en la cola hay un init, el SDK no se autoinicializa con los atributos data-*.

Opción B: paquete npm

Terminal
npm install @wutbug/sdk
# o: pnpm add @wutbug/sdk · yarn add @wutbug/sdk · bun add @wutbug/sdk
TypeScript
import wutbug from '@wutbug/sdk';

wutbug.init({
  projectKey: 'pk_tu_key',
  endpoint: 'https://api.wutbug.dev',
  release: '2026.11.3', // opcional, necesario para source maps
});

init() debe ejecutarse solo en el navegador y una vez. Si tu framework renderiza en el servidor (Next.js, Nuxt, SvelteKit…), llámalo desde código que solo corre en el cliente. Las guías por framework muestran dónde.

Identifica al usuario

Llama a setUser donde tu app ya conoce la sesión, y pásale null al cerrar sesión. Así sabes quién reportó y puedes avisarle cuando se resuelva.

TypeScript
wutbug.setUser({ id: 'u_42', email: 'ana@acme.com', name: 'Ana' });

// al cerrar sesión
wutbug.setUser(null);

Opcionalmente, agrega contexto útil para depurar:

TypeScript
wutbug.setMetadata({ plan: 'pro', tenant: 'acme', featureFlags: ['nuevo-checkout'] });

Restringe los orígenes

En el dashboard, en la configuración del proyecto, lista los dominios desde los que se aceptan reportes (por ejemplo https://app.acme.com). La API rechaza reportes de otros orígenes. La project key es pública, así que esto evita que alguien la use desde otro sitio.

Verifica la instalación

  1. Abre tu app: debe aparecer el botón Reportar un problema abajo a la derecha, y la consola no debe mostrar errores de [wutbug].
  2. Envía un reporte que diga "Prueba de instalación".
  3. Ábrelo en el dashboard. Si no llega, activa debug: true (o data-debug) y revisa la consola.
← AnteriorIntroducciónSiguiente →Guías por framework