How to style the widget with custom CSS  COMPANY

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. Since the changes are applied instantly via our servers, 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, you can use the custom_css property in your window.ybug_settings object:

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

Recommended: Using CSS variables

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

: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

While it’s possible to set the font easily directly on the widget customization form, you can also use Custom CSS if your specific font is missing from our list. This is especially useful for matching unique brand typefaces or using specific Google Fonts that are already loaded on your site.

/* 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 might want the Ybug widget to match. You can achieve this by combining a class override for the background with variable updates for the text and buttons:

/* 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

Here is a list of the most common variables you can tweak right now. For the most up-to-date list, you can always inspect the widget code in your browser or reach out to us.

Global colors and branding

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

Typography and forms

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

Feedback-specific elements

• Ratings: Use --rating-stars-active-color or --rating-hearts-active-color.
• NPS: --nps-active-bg-color changes the highlight color of selected scores.
• Tooltips: Adjust --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: The background of the annotation tool.
• --toolbar-button-size: The size of the toolbar icons.
• --toolbar-border-radius: The roundness of the toolbar itself.