Styles

Two approaches for customizing the feedback widget styles:

CSS custom properties: Override colors, fonts, spacing, and sizing.
CSS parts (advanced): Target specific elements inside the Shadow DOM and override any CSS property.

CSS custom properties

The feedback widget exposes CSS custom properties for colors, fonts, border radius, and more. Override them to match your site's design.

Usage

To customize these properties, define them in your website's CSS using the :root selector for global changes or a specific selector to target particular areas:

:root {
    --feedback-primary-color: #00D68F;
    ...
}

For example, to give the thumbs up and thumbs down buttons distinct colors so users get a visual hint of the feedback they are about to leave:

:root {
    --feedback-modal-rating-button-positive-selected-color: #16a34a;
    --feedback-modal-rating-button-positive-selected-border-color: #16a34a;
    --feedback-modal-rating-button-negative-selected-color: #dc2626;
    --feedback-modal-rating-button-negative-selected-border-color: #dc2626;
}

Properties

The tables below lists all the available properties you can override:

Global properties

:root {
    /* Base Colors */
    --feedback-color-white: #ffffff;
    --feedback-color-black: #191919;
    --feedback-color-gray-100: #f1f3f4;
    --feedback-color-gray-300: #d1d5db;
    --feedback-color-gray-400: #9ca3af;
    --feedback-color-gray-500: #999999;
    --feedback-color-gray-600: #5f6368;
    --feedback-color-gray-700: #363636;
    --feedback-color-gray-800: #2a2a2a;
    --feedback-color-blue-500: #3b82f6;
    --feedback-color-blue-600: #0070F4;
    --feedback-color-orange: #ffb422;
    --feedback-color-light: #ccc;

    /* Colors */
    --feedback-primary-color: var(--feedback-color-blue-600);
    --feedback-secondary-color: var(--feedback-color-gray-100);
    --feedback-light-color: var(--feedback-color-light);
    --feedback-dark-color: var(--feedback-color-black);
    --feedback-text-color: var(--feedback-color-gray-600);
    --feedback-white-color: var(--feedback-color-white);
    --feedback-highlight-color: var(--feedback-color-orange);
       
    /* Fonts */
    --feedback-font-family: "Inter", "Tahoma", "sans-serif";
    --feedback-heading-font-size: 20px;
    --feedback-text-font-size: 14px;
}

Feedback button properties

:root {
    /* Feedback button*/
    --feedback-button-border-radius: 20px;
    --feedback-button-dark-bg-color: var(--feedback-primary-color);
    --feedback-button-dark-text-color: var(--feedback-white-color);
    --feedback-button-dark-icon-color: var(--feedback-white-color);
    --feedback-button-light-bg-color: var(--feedback-white-color);
    --feedback-button-light-text-color: var(--feedback-primary-color);
    --feedback-button-light-icon-color: var(--feedback-primary-color);
    --feedback-button-text-font-size: var(--feedback-text-font-size);
    --feedback-button-text-font-weight: 600;
    --feedback-button-z-index: 300;
}

:root {
    --feedback-modal-button-bg-color: var(--feedback-white-color);
    --feedback-modal-button-bg-color-active: var(--feedback-white-color);
    --feedback-modal-button-border-color: var(--feedback-light-color);
    --feedback-modal-button-border-color-active: var(--feedback-primary-color);
    --feedback-modal-button-border-radius: 4px;
    --feedback-modal-button-font-size: var(--feedback-text-font-size);
    --feedback-modal-button-icon-color: var(--feedback-dark-color);
    --feedback-modal-button-icon-color-active: var(--feedback-primary-color);
    --feedback-modal-button-submit-bg-color: var(--feedback-primary-color);
    --feedback-modal-button-submit-bg-color-hover: var(--feedback-primary-color);
    --feedback-modal-button-submit-border-color-hover: var(--feedback-primary-color);
    --feedback-modal-button-submit-text-color: var(--feedback-white-color);
    --feedback-modal-button-submit-text-color-hover: var(--feedback-white-color);
    --feedback-modal-button-text-color: var(--feedback-dark-color);
    --feedback-modal-button-text-color-active: var(--feedback-primary-color);
    --feedback-modal-close-bg-color: var(--feedback-white-color);
    --feedback-modal-close-color: var(--feedback-dark-color);
    --feedback-modal-content-max-width: 600px;
    --feedback-modal-content-sidebar-max-width: 300px;
    --feedback-modal-content-bg-color: var(--feedback-white-color);
    --feedback-modal-content-border-color: var(--feedback-light-color);
    --feedback-modal-content-border-radius: 8px;
    --feedback-modal-content-position-bottom: 10px;
    --feedback-modal-content-position-left: 10px;
    --feedback-modal-content-position-right: 10px;
    --feedback-modal-content-position-top: 10px;
    --feedback-modal-content-text-color: var(--feedback-text-color);
    --feedback-modal-content-z-index: 300;
    --feedback-modal-element-hover-border-color: var(--feedback-primary-color);
    --feedback-modal-element-selected-border-color: var(--feedback-primary-color);
    --feedback-modal-footer-link: var(--feedback-dark-color);
    --feedback-modal-header-font-size: var(--feedback-heading-font-size);
    --feedback-modal-header-font-weight: 500;
    --feedback-modal-header-text-color: var(--feedback-dark-color);
    --feedback-modal-input-bg-color: var(--feedback-color-white);
    --feedback-modal-input-border-color: rgba(0, 0, 0, 0.12);
    --feedback-modal-input-border-color-hover: rgba(0, 0, 0, 0.24);
    --feedback-modal-input-border-color-focused: var(--feedback-primary-color);
    --feedback-modal-input-border-radius: 4px;
    --feedback-modal-input-font-size: var(--feedback-text-font-size);
    --feedback-modal-input-text-color: var(--feedback-text-color);
    --feedback-modal-message-font-size: var(--feedback-text-font-size);
    --feedback-modal-modal-wrapper-z-index: 300;
    --feedback-modal-rating-button-color: var(--feedback-text-color);
    --feedback-modal-rating-button-selected-color: var(--feedback-primary-color);
    --feedback-modal-rating-button-positive-color: var(--feedback-modal-rating-button-color);
    --feedback-modal-rating-button-positive-bg-color: transparent;
    --feedback-modal-rating-button-positive-border-color: var(--feedback-modal-button-border-color);
    --feedback-modal-rating-button-positive-selected-color: var(--feedback-modal-rating-button-selected-color);
    --feedback-modal-rating-button-positive-selected-bg-color: var(--feedback-modal-button-bg-color-active);
    --feedback-modal-rating-button-positive-selected-border-color: var(--feedback-modal-button-border-color-active);
    --feedback-modal-rating-button-negative-color: var(--feedback-modal-rating-button-color);
    --feedback-modal-rating-button-negative-bg-color: transparent;
    --feedback-modal-rating-button-negative-border-color: var(--feedback-modal-button-border-color);
    --feedback-modal-rating-button-negative-selected-color: var(--feedback-modal-rating-button-selected-color);
    --feedback-modal-rating-button-negative-selected-bg-color: var(--feedback-modal-button-bg-color-active);
    --feedback-modal-rating-button-negative-selected-border-color: var(--feedback-modal-button-border-color-active);
    --feedback-modal-rating-button-stars-selected-color: var(--feedback-highlight-color);
}

Screenshot editor properties

:root {
    --feedback-canvas-editor-bg-color: var(--feedback-white-color);
    --feedback-canvas-editor-border-color: var(--feedback-light-color);
    --feedback-canvas-editor-header-bg-color: var(--feedback-secondary-color);
    --feedback-canvas-editor-tool-bg-color: var(--feedback-white-color);
    --feedback-canvas-editor-tool-bg-hover: var(--feedback-secondary-color);
    --feedback-canvas-editor-tool-bg-active: var(--feedback-primary-color);
    --feedback-canvas-editor-tool-text-color: var(--feedback-text-color);
    --feedback-canvas-editor-tool-text-active: var(--feedback-white-color);
    --feedback-canvas-editor-action-primary-bg: var(--feedback-primary-color);
    --feedback-canvas-editor-action-primary-text: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-bg: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-text: var(--feedback-text-color);
    --feedback-canvas-editor-action-secondary-border: var(--feedback-light-color);
    --feedback-canvas-editor-divider-color: var(--feedback-light-color);
    --feedback-canvas-editor-content-bg: var(--feedback-secondary-color);
    --feedback-canvas-editor-resize-handle-color: var(--feedback-primary-color);
    --feedback-canvas-editor-slider-track: var(--feedback-light-color);
}

Dark mode properties

[data-theme='dark'] {
    --feedback-text-color: var(--feedback-color-gray-400);
    --feedback-light-color: var(--feedback-color-gray-700);
    --feedback-modal-button-bg-color-active: transparent;
    --feedback-modal-button-icon-color: var(--feedback-color-gray-300);
    --feedback-modal-button-text-color: var(--feedback-color-gray-300);
    --feedback-modal-close-bg-color: transparent;
    --feedback-modal-close-color: var(--feedback-color-gray-300);
    --feedback-modal-content-bg-color: var(--feedback-dark-color);
    --feedback-modal-content-text-color: var(--feedback-color-gray-400);
    --feedback-modal-footer-link: var(--feedback-color-gray-400);
    --feedback-modal-header-text-color: var(--feedback-white-color);
    --feedback-modal-input-bg-color: var(--feedback-color-gray-800);
    --feedback-modal-input-border-color: rgba(255, 255, 255, 0.1);
    --feedback-modal-input-border-color-hover: rgba(255, 255, 255, 0.2);
    --feedback-modal-input-border-color-focused: var(--feedback-primary-color);
    --feedback-modal-input-text-color: var(--feedback-color-gray-300);
    --feedback-modal-rating-button-color: var(--feedback-color-gray-300);
    --feedback-modal-screenshot-close-color: var(--feedback-white-color);
    --feedback-modal-screenshot-header-bg-color: var(--feedback-dark-color);
    --feedback-modal-screenshot-header-text-color: var(--feedback-white-color);
    --feedback-canvas-editor-bg-color: var(--feedback-dark-color);
    --feedback-canvas-editor-border-color: var(--feedback-light-color);
    --feedback-canvas-editor-header-bg-color: var(--feedback-light-color);
    --feedback-canvas-editor-tool-bg-color: var(--feedback-light-color);
    --feedback-canvas-editor-tool-bg-hover: #4a4a4a;
    --feedback-canvas-editor-tool-text-color: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-bg: var(--feedback-light-color);
    --feedback-canvas-editor-action-secondary-text: var(--feedback-white-color);
    --feedback-canvas-editor-action-secondary-border: var(--feedback-light-color);
    --feedback-canvas-editor-content-bg: var(--feedback-light-color);
    --feedback-canvas-editor-divider-color: #4a4a4a;
    --feedback-canvas-editor-slider-track: #4a4a4a;
}

Example

CSS parts

For fine-grained control, the widget exposes CSS parts that let you style elements inside the Shadow DOM using the ::part() pseudo-element. Unlike CSS custom properties, CSS parts let you override any CSS property of the exposed elements.

Syntax:

component-name::part(part-name) {
  /* your styles */
}

Available parts

Feedback button

Part	Description
`button`	The feedback button.
`icon`	The icon inside the button.

Part	Description
`wrapper`	The outer wrapper of the modal.
`overlay`	The background overlay behind the modal.
`modal`	The modal container.
`header`	The modal header.
`title`	The modal title.
`powered-by`	The "Powered by PushFeedback" label.
`close-button`	The close button.
`body`	The modal body.
`form`	The feedback form.
`rating`	The rating section.
`rating-title`	The rating question text.
`rating-buttons`	The container of the rating buttons.
`rating-button`	Each rating button (thumbs or stars).
`rating-button-positive`	The thumbs up button.
`rating-button-negative`	The thumbs down button.
`message-input`	The message textarea.
`email-input`	The email input.
`privacy`	The privacy policy checkbox row.
`buttons`	The container of the action buttons.
`screenshot-button`	The screenshot button.
`submit-button`	The send button.
`success-message`	The success message.
`error-message`	The error message.
`footer`	The modal footer.

Screenshot editor

The screenshot editor renders inside the feedback modal, so target its parts through the feedback-modal element using the canvas-editor- prefix.

Part	Description
`canvas-editor-overlay`	The background overlay behind the editor.
`canvas-editor-modal`	The editor container.
`canvas-editor-header`	The editor header.
`canvas-editor-title`	The editor title.
`canvas-editor-toolbar`	The toolbar with the annotation tools.
`canvas-editor-tool-button`	Each annotation tool button.
`canvas-editor-cancel-button`	The cancel button.
`canvas-editor-save-button`	The save button.
`canvas-editor-content`	The canvas area.
`canvas-editor-canvas`	The annotation canvas.

Finding available parts

Right-click the widget and select Inspect.
Expand the #shadow-root inside the component tag.
Look for elements with part="..." attributes.

Examples

Custom feedback button

/* Square button with custom color */
feedback-button::part(button) {
  border-radius: 8px;
  background-color: #ff5722;
  color: white;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
  transition: all 0.2s ease;
}

/* Hover effect */
feedback-button::part(button):hover {
  background-color: #f4511e;
  transform: translateY(-2px);
}

/* Rounded modal with a custom shadow */
feedback-modal::part(modal) {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Uppercase title */
feedback-modal::part(title) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pill-shaped send button */
feedback-modal::part(submit-button) {
  border-radius: 50px;
  padding: 10px 24px;
}

Custom screenshot editor styling

/* Rounded editor with custom toolbar buttons */
feedback-modal::part(canvas-editor-modal) {
  border-radius: 16px;
}

feedback-modal::part(canvas-editor-tool-button) {
  border-radius: 50%;
}

CSS custom properties​

Usage​

Properties​

Global properties​

Feedback button properties​

Feedback modal properties​

Screenshot editor properties​

Dark mode properties​

Example​

CSS parts​

Available parts​

Feedback button​

Feedback modal​

Screenshot editor​

Finding available parts​

Examples​

Custom feedback button​

Custom modal styling​

Custom screenshot editor styling​