// CUSTOMIZATION

Customization

Customize the look and behavior of the widget to match your brand.

Dashboard Settings

Basic widget settings are available in the dashboard on the project page:

Setting	Description
Position	Button position: bottom-right, bottom-left, top-right, top-left
Primary Color	Main color for the button and accents
Text Color	Text color on the button
Button Text	Text on the button (default: Feedback)
Show Screenshot	Show the screenshot option
Show Branding	Show "Powered by Feedbackly" (Pro/Business: can be disabled)

Data Attributes

You can also override settings via data attributes in the script tag:

<script
  src="https://feedbackly.cc/widget.js"
  data-api-key="YOUR_API_KEY"
  data-position="bottom-left"
  data-primary-color="#8B5CF6"
  data-text-color="#FFFFFF"
  data-button-text="Send Feedback"
  data-show-screenshot="true"
  data-show-branding="false"
></script>

// Data attributes take priority over dashboard settings

Position Examples

top-right

top-left

bottom-right (default)

bottom-left

Color Schemes

Popular color combinations:

Green (Default)

#10B981 / #FFFFFF

Purple

#8B5CF6 / #FFFFFF

Blue

#3B82F6 / #FFFFFF

Dark

#18181B / #FFFFFF

CSS Override (Advanced)

For advanced customization, you can override widget styles with CSS:

/* Widget open button */
#feedbackly-button {
  /* your styles */
}

/* Modal window */
#feedbackly-modal {
  /* your styles */
}

/* Form */
#feedbackly-form {
  /* your styles */
}

// CSS overrides may break with widget updates. Use with caution.