Appearance

Styling the widget with custom CSS COMPANY ​

We've modernized and simplified the Ybug Feedback Widget styles to make them as flexible as possible. On a paid plan, you can fully customize the look and feel of the widget to match your branding perfectly.

You can achieve your desired look by overriding our pre-defined CSS variables (the easiest and most stable way) or by targeting specific CSS classes for deeper, pixel-perfect control.

How to apply your styles ​

Depending on your workflow, you can add your custom styles in one of two places.

Option A: using the Ybug dashboard (no-code friendly) ​

The simplest way to style your widget is to paste your CSS directly into the Custom CSS field on your widget customization page in the Ybug dashboard. The changes are applied instantly via our servers, so you don't need to touch your website's code or redeploy your app. This is perfect for designers or project managers who want to tweak the look without involving a developer.

Option B: using the installation snippet ​

If you prefer to keep your configuration version-controlled or within your own codebase, use the custom_css property in your window.ybug_settings object:

javascript
window.ybug_settings = {
    /* ... your other settings ... */
    custom_css: `:root {
        --primary-color: #ff0000;
        --heading-color: #0000ff;
        --input-border-radius: 12px;
    }`,
};

Even if we change the widget's internal structure later, these variables remain stable. To use them, redefine the variables within the :root selector:

css
:root {
    --primary-color: #4338ca;       /* Main button color */
    --heading-color: #111827;       /* Heading text color */
    --input-border-radius: 8px;     /* Input field roundness */
}

Matching your website's typography ​

You can set the font directly on the widget customization form, but Custom CSS is useful when your specific font is missing from our list — for example to match unique brand typefaces or use Google Fonts already loaded on your site.

css
/* 1. Import the font from Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* 2. Apply it to the Ybug container */
body {
    font-family: 'Inter', sans-serif !important;
}

Example: creating a "dark mode" theme ​

If your website has a dark theme, you can match the widget by combining a class override for the background with variable updates for the text and buttons:

css
/* Change the widget background */
.page {
    background: #333333;
}
/* Change the button colors */
.button--outline {
    color: white !important;
    border-color: white !important;
}

/* Update text and UI colors */
:root {
    --primary-color: #3b82f6;       /* A bright blue for visibility */
    --heading-color: #ffffff;
    --text-color: #dddddd;
    --link-color: #ffffff;
    --input-border-radius: 12px;
}

Available variables ​

The most common variables you can tweak today. For the most up-to-date list, inspect the widget code in your browser or reach out to us.

Global colors and branding ​

  • --primary-color — main color used for buttons and primary elements.
  • --secondary-color — used for secondary UI accents.
  • --alert-color — color for errors or alerts (defaults to red).
  • --success-color — color for success messages (defaults to green).

Typography and forms ​

  • --heading-color — color of the main headings in the widget.
  • --text-color — default body text color.
  • --input-bg — background color for text fields and inputs.
  • --input-border-radius — controls the roundness of input fields.

Feedback-specific elements ​

  • Ratings: --rating-stars-active-color or --rating-hearts-active-color.
  • NPS: --nps-active-bg-color changes the highlight color of selected scores.
  • Tooltips: --tooltip-bg-color and --tooltip-text-color.

Annotation toolbar ​

Control the appearance of the tools your users see when marking up screenshots:

  • --toolbar-bg-color — background of the annotation tool.
  • --toolbar-button-size — size of the toolbar icons.
  • --toolbar-border-radius — roundness of the toolbar itself.

Need help with a specific look?

If you're trying to style a part of the widget and aren't sure which class or variable to use, just reach out. We're happy to help you get the styling exactly right.