Apariencia

Puedes ajustar la apariencia del widget de dos formas. Usa la que más te acomode, o ambas.

#Desde el dashboard (sin desplegar)

En Proyectos e instalación → Apariencia del widget tienes una vista previa del widget real. Lo que guardes ahí llega a tus usuarios sin volver a desplegar: el SDK lo descarga al cargar (GET /v1/widget-config) y lo guarda 5 minutos por pestaña.

Puedes elegir:

• Color con un preset o un hex propio, y su variante para modo oscuro.
• Modo: automático (según el sistema), claro u oscuro.
• Bordes: rectos, normales o redondeados.
• Fuente: la del sistema o la de tu página.
• Botón flotante: visible u oculto, y su texto.
• Posición: cualquiera de las cuatro esquinas.
• Idioma: automático, español o inglés.

#Presets de color

#Desde el código

Las opciones de init() siempre ganan sobre el dashboard. Úsalas si quieres fijar la apariencia en el repositorio.

wutbug.init({
  projectKey: 'pk_tu_key',
  endpoint: 'https://api.wutbug.dev',
  position: 'bottom-left',
  launcherLabel: '¿Algo no funciona?',
  locale: 'es',
  theme: {
    accent: '#ea580c',
    accentDark: '#fb7a3c',
    mode: 'auto',
    radius: 'round',
    font: 'inherit',
  },
});

Si defines theme.accent en código sin accentDark, se usa el mismo color en ambos modos (no se hereda la variante oscura del dashboard). Para ignorar por completo la configuración del dashboard, usa remoteConfig: false.

Con la etiqueta script tienes data-accent, data-position, data-locale, data-launcher y data-launcher-label.

#Tu propio botón

Oculta el botón flotante y abre el formulario desde tu interfaz:

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

<button data-wutbug-open>Reportar un problema</button>

O con JavaScript: wutbug.open(). Ver API de JavaScript.

#Aislamiento de estilos

El widget vive en un Shadow DOM: tus estilos no lo afectan y los suyos no afectan tu página. Con font: 'inherit' toma la fuente de tu página.