Customize the feedback client
The DocDuck feedback client accepts isolated CSS variables for its surfaces, text, controls, selection highlight, spacing, and shadow. Changes apply directly to the customer embed. They do not restyle the documentation site or save anything to a deployed installation.
Use the builder to edit light and dark values independently, inspect the live feedback client states, and copy either a complete snippet or the styles alone. Signed-in visitors can include a selected organization ID; generic output uses no account state and must be completed before deployment.
Design tokens
Customize theme
Every variable below maps to a part of the DocDuck feedback client. Edit the light and dark palettes with the controls, then use the live preview to see the result.
Colors
Set the surfaces, type, borders, and feedback accents.
--color-background
Feedback client surface behind the rating controls, textarea, and confirmation message.
#ffffff #18181b --color-foreground
Primary text and icon color used throughout the feedback client.
#18181b #fafafa --color-muted-foreground
Secondary copy and the default rating icon color.
#71717a #a1a1aa --brand-primary
Brand accent used for the feedback client outline, selection pointer, highlight, and submit button.
#facc15 #facc15 --color-selection-highlight
Highlight color applied to the selected text behind the feedback client.
#facc15 #facc15 Radii
Control the softness of the feedback client shell and its controls.
--radius-sm
Base small radius used by buttons and inputs when not overridden.
0.25rem 0.25rem --radius-md
Base medium radius used by the feedback client container.
0.5rem 0.5rem --button-radius
Corner radius for the rating and submit buttons.
var(--radius-sm) var(--radius-sm) --input-radius
Corner radius for the details textarea.
var(--radius-sm) var(--radius-sm) --container-radius
Corner radius for the outer feedback client outline.
var(--radius-md) var(--radius-md) Layout and spacing
Tune the spacing and proportions of the feedback client and its controls.
--selection-gap
Distance between the feedback client outline and its selection pointer.
5px 5px --indicator-pip-height
Height of the triangular pointer below the feedback client.
8px 8px --indicator-pip-half-width
Half-width of the triangular pointer below the feedback client.
8px 8px Effects
Control icon scale and the feedback client depth.
--feedback-icon-size
Size of each thumbs-up, thumbs-down, and question icon.
1.5rem 1.5rem --shadow-widget
Box shadow applied to the feedback client outline.
0 4px 6px -1px #0000001a,
0 2px 4px -2px #0000001a 0 4px 6px -1px #0000001a,
0 2px 4px -2px #0000001a Integration
Copy current config
Sign in to have your org ID included in the copied snippet code.
View generated code
<!-- DocDuck feedback client -->
<docduck-feedback style="color-scheme: light dark;
--color-background: light-dark(#ffffff, #18181b);
--color-foreground: light-dark(#18181b, #fafafa);
--color-muted: light-dark(#f4f4f5, #27272a);
--color-muted-foreground: light-dark(#71717a, #a1a1aa);
--color-border: light-dark(#d4d4d8, #52525b);
--brand-primary: #facc15;
--color-positive: light-dark(#16a34a, #22c55e);
--color-negative: light-dark(#dc2626, #ef4444);
--color-submit-foreground: #422006;
--color-submit-border: #000000;
--color-selection-highlight: #facc15;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--button-radius: var(--radius-sm);
--input-radius: var(--radius-sm);
--container-radius: var(--radius-md);
--selection-gap: 5px;
--indicator-pip-height: 8px;
--indicator-pip-half-width: 8px;
--feedback-icon-size: 1.5rem;
--shadow-widget: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;"></docduck-feedback>Apply and test the output
Place the generated variables directly on <docduck-feedback>. The custom properties inherit into its isolated shadow root without exposing the widget’s internal elements to page styles. If your site supports both color schemes, preserve color-scheme: light dark and test both sets of values.
Before publishing, verify keyboard focus, selected-text highlighting, helpful, unhelpful, and question states, the optional details field, and the confirmation message. Check text and control contrast in both palettes. Return to Get started to verify the themed feedback client on a deployed page.