Matching a feedback widget to your brand and dark mode

Set the accent color with data-color

The accent color is the one setting that carries your brand into the widget. Set it with the data-color attribute on the script tag. The value can be any CSS color, such as a hex code, an rgb() value or a named color:

<script src="https://escutaproduto.com/widget.js" data-key="pk_your_product_key" data-color="#0f766e" defer></script>

If you leave it out, the widget uses an indigo default. The color goes to the floating button, the selected feedback type, the focus ring on the text box and the send button. The star ratings use a fixed amber, and the thank you check uses your accent. Pick one color and check it in every state, not only on the closed button.

Keep one thing in mind. The hosted feedback page uses the accent color from the product settings, while the widget uses data-color. If you want the same color in both places, set it in both. They do not sync.

Check contrast on the floating button

The button text is white, and the send button text is white too. White text on a light accent fails contrast, and the widget does not check the color for you. Aim for at least 4.5 to 1 for normal text, which is the WCAG AA level for body text. A bright orange, a yellow or a pale pastel usually fails. A deep blue, a deep teal or a deep purple usually passes.

Test the actual color, not the swatch in your design file. Paste the hex code into a contrast checker against white, then look at the button on a real phone in daylight. A color that passes on a monitor can look washed out outdoors.

Why the panel stays light on dark sites

The panel is always white with dark text, and the widget does not follow the visitor's dark mode setting. Its border radius, shadow and text colors are fixed, and the only color you control is the accent. On a dark site this creates a bright rectangle in the corner, which some teams find jarring.

A white panel keeps the form readable no matter what the page behind it looks like, but it is still a trade-off. If your brand is dark, you have three options:

1. Choose an accent color that stands out on your dark background but keeps white text readable on the button.
2. Move the floating button to the side that suits your layout with data-position, so the bright button does not sit beside a dark control.
3. Hide the floating button with data-trigger="none" and open the panel from a button in your own dark header or menu, styled to match.

The panel itself stays white in all three cases. That is a known limit of the widget, and it is worth stating in your own internal style guide so the next designer does not try to fix it with a stylesheet.

Position, overlap and the trigger

The floating button sits 20 pixels from the bottom and the chosen side. Set data-position="left" if the right side already holds a chat launcher, a cookie banner or a navigation control. The widget has no offset option, so placement is a choice between two corners, not a fine adjustment.

If neither corner works, the cleanest answer is to remove the floating button and build your own trigger. Use data-trigger="none" and give any element the data-escuta-open attribute. The element can be a text link in your footer, a menu item or a styled button. Keyboard focus returns to that element when the panel closes, so the flow still works.

Restyle the button with ::part

The floating button has part="button", so you can adjust it from your own stylesheet without touching the widget. Outer styles that target ::part win over the widget's built-in rules for normal declarations. A small example:

[data-escuta-produto]::part(button) {
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

Use this to match corner radius, weight and shadow to your buttons. Keep the change small, and keep the text readable. Only the floating button has a part, so you cannot restyle the panel, the stars or the form this way.

Keep the copy consistent

The widget's copy is fixed. The title reads "Send us feedback", the subtitle reads "What's on your mind? We read every message." and the footer shows the brand name "Escuta Produto". You cannot change those strings or remove the footer with an attribute. For Portuguese pages, set the locale and the widget switches to its Portuguese copy.

If the widget's voice does not match your brand, the honest fix is to replace the trigger and build your own form on the REST API. That keeps the copy and the layout yours, and the feedback still lands in the same inbox. Until then, choose the color and position carefully, and keep the surrounding copy friendly so the two voices sit well together. For the words on the trigger itself, read what a feedback button should say.

Brand the Escuta Produto widget step by step

Work through the widget in this order. First, pick the accent color and set it with data-color. Second, check the contrast of white text on that color. Third, load the site in a dark mode browser setting and look at the panel next to your page. Fourth, decide between the left and right corners, or hide the button. Fifth, if you want a finer style, add the ::part rule above. Then set the same accent in the product settings for the hosted page, so your links and widget match. For every attribute, see the widget docs. For how the widget stays isolated from your styles, read why embeddable widgets use Shadow DOM.