Widget Customization

Make the SimpleCommenter widget match your brand with colors, text, and styling options.

Color Customization

Primary Color

Set your brand color using the data-color attribute:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-domain="your-domain.com"
  data-color="#10B981"
  defer
></script>

This color is applied to:

The feedback button background
Primary action buttons
Active states and highlights
Links within the widget

Color Examples

Brand	Hex Code	Preview
Blue (default)	#3B82F6	Primary button color
Green	#10B981	Eco-friendly brands
Purple	#8B5CF6	Creative agencies
Orange	#F97316	Energetic products
Pink	#EC4899	Lifestyle brands

Text Customization

Button Text

Change the text on the feedback button:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-domain="your-domain.com"
  data-button-text="Send Feedback"
  defer
></script>

Popular alternatives:

"Feedback"
"Help"
"Report Bug"
"Suggestions"
"Contact Us"

Placeholder Text

Customize placeholder text via the dashboard under Settings > Widget:

Comment placeholder
Email placeholder
Name placeholder

Position Options

Control where the widget button appears:

<!-- Bottom right (default) -->
<script data-position="bottom-right" ...></script>

<!-- Bottom left -->
<script data-position="bottom-left" ...></script>

<!-- Top right -->
<script data-position="top-right" ...></script>

<!-- Top left -->
<script data-position="top-left" ...></script>

The position only affects the button. The feedback panel always opens in a user-friendly location.

Advanced Styling

CSS Custom Properties

For deeper customization, override CSS custom properties:

:root {
  --simple-commenter-primary: #3b82f6;
  --simple-commenter-radius: 8px;
  --simple-commenter-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --simple-commenter-font: "Inter", sans-serif;
}

Hide Default Button

When using a custom trigger, hide the default button:

<script
  src="https://simplecommenter.com/js/comments.min.js"
  data-domain="your-domain.com"
  data-hide-button="true"
  defer
></script>

<button class="my-custom-button" onclick="window.SimpleCommenter.open()">
  💬 Feedback
</button>

When hiding the default button, ensure your custom trigger is accessible and visible to users.

Dashboard Settings

Additional customization is available in your dashboard:

Go to Projects > Your Project > Settings
Navigate to the Widget tab
Configure:
- Logo upload
- Thank you message
- Required fields
- Screenshot settings
- Form fields

Dark Mode

The widget automatically detects system dark mode preferences. You can also force a theme:

<!-- Force light mode -->
<script data-theme="light" ...></script>

<!-- Force dark mode -->
<script data-theme="dark" ...></script>

<!-- Auto (default) - follows system preference -->
<script data-theme="auto" ...></script>