Appearance

You can adjust the widget's appearance in two ways. Use whichever suits you, or both.

#From the dashboard (no deploy)

Under Projects → Widget appearance you get a preview of the real widget. Whatever you save there reaches your users without redeploying: the SDK downloads it on load (GET /v1/widget-config) and caches it for 5 minutes per tab.

You can choose:

• Color with a preset or your own hex, plus its dark-mode variant.
• Mode: automatic (follows the system), light or dark.
• Corners: sharp, default or rounded.
• Font: the system font or your page's font.
• Floating button: visible or hidden, and its text.
• Position: any of the four corners.
• Language: automatic, Spanish or English.

#Color presets

#From code

init() options always win over the dashboard. Use them if you want to pin the appearance in your repository.

wutbug.init({
  projectKey: 'pk_your_key',
  endpoint: 'https://api.wutbug.dev',
  position: 'bottom-left',
  launcherLabel: 'Something not working?',
  locale: 'en',
  theme: {
    accent: '#ea580c',
    accentDark: '#fb7a3c',
    mode: 'auto',
    radius: 'round',
    font: 'inherit',
  },
});

If you set theme.accent in code without accentDark, the same color is used in both modes (the dashboard's dark variant is not inherited). To ignore the dashboard configuration entirely, use remoteConfig: false.

With the script tag you have data-accent, data-position, data-locale, data-launcher and data-launcher-label.

#Your own button

Hide the floating button and open the form from your own UI:

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

<button data-wutbug-open>Report a bug</button>

Or with JavaScript: wutbug.open(). See JavaScript API.

#Style isolation

The widget lives in a Shadow DOM: your styles don't affect it and its styles don't affect your page. With font: 'inherit' it takes your page's font.