All Collections
Developers
Install Feedbackchimp Feedback Widget
Install Feedbackchimp Feedback Widget

Add a lightweight feedback widget to enable bug reporting and feedback collection without a public interface.

Avatar of Khushhal
Written by Khushhal
Last updated Nov 04, 2024
With FeedbackChimp, you can install both Feedback widgets and Changelog widgets to bug reports and feedback directly within your app, boost new feature adoption and keep your users informed, and much more.

How To Install FeedbackChimp Feedback Widget?

The Feedback widget allows users to submit detailed feedback easily while enabling you to keep the process private. 

Feedback Submission View

The feedback submission view enables users to write detailed feedback with formatting options.

Step 1: Install The Feedback Widget

You can install the Feedback widget easily using our JavaScript SDK.
<script>!function(e,c){let t="feedbackchimp-sdk";function a(){if(!c.getElementById(t)){var a=c.createElement("script");a.id=t,a.src="https://sdk.feedbackchimp.com/sdk.js",a.onload=function(){e.Feedbackchimp.q&&Array.isArray(e.Feedbackchimp.q)&&e.Feedbackchimp.q.forEach(function(c){e.Feedbackchimp.apply(null,c)})},c.getElementsByTagName("script")[0].parentNode.insertBefore(a,c.getElementsByTagName("script")[0])}}"function"!=typeof e.Feedbackchimp&&(e.Feedbackchimp=function(){(e.Feedbackchimp.q=e.Feedbackchimp.q||[]).push(arguments)}),"complete"===c.readyState||"interactive"===c.readyState?a():c.addEventListener("DOMContentLoaded",a)}(window,document);
</script>

<script>
Feedbackchimp("initialize_feedback_widget", {
  organization: "yourorg", // Replace this with your organization name, copy-paste the subdomain part from your Feedbackchimp workspace url (e.g. https://*yourorg*.feedbackchimp.space)
  placement: "right", // optional - remove to hide the floating button
  locale: "en", // Change the language
  color: "#8231d3",  // optional - floating button color
  email: "[email protected]", // optional
  defaultBoard: "yourboardname", // optional - preselect a board
})
</script>
Below is a full explanation on how this code helps you customize different features of the feedback widget.
  • Organization: This displays your organization name, as shown in the subdomain part of your FeedbackChimp workspace URL.
  • Placement: This lets you control where to place your feedback widget on your screen (right, left, top, bottom etc). By default it is placed on the right hand side, but you can also choose to hide the floating button of the feedback widget.
  • Locale: This is important for setting language preferences for you changelog widget.
  • Color: This lets customize the color of the feedback widget's floating button.
  • Email: If this is enabled, users can share their email address when submitting a feedback.
  • Default Board: This is an optional feature that, when enabled, displays a preselected board as the feedback board for users.

Step 2: Setting Up Authentication

If you've set up Single Sign-On (SSO) authentication, users will be automatically authenticated within the widget, ensuring a smooth and secure experience.
Note: Single Sign-On (SSO) is an exclusive feature only available with the Remove Branding addon.

Step 3: Opening The Widget With Custom Button [Optional]

There are two ways you can open the widget. 
You can trigger the Feedback Widget using a custom button by adding the data-feedbackchimp-feedback attribute to any button on your website.
<button data-feedbackchimp-feedback>
  Open Widget
</button>
You can also call the Feedbackchimp instance directly to open the widget.
Feedbackchimp("open_feedback_widget")

Step 4 [Optional]: Opening The Widget With Default Floating Button

If you've configured the placement value during widget initialization, a small "Feedback" button will automatically float on the left or right side of your site. Users can click this button to easily submit feedback.

This is how easily you can install the feedback widget from FeedbackChimp on your site.
For additional assistance or inquiries, please reach out to Customer Support.

Related Articles