Everything you always wanted to know about our feedback widget... but were afraid to ask.

We're noticing more and more people using the BugHerd feedback widget on their sites, and with good reason too! It's not only a great way to get feedback from users, but it's also a great way to find out more about them. There's a few great ways to get use out of this widget. The most obvious one is to put it on your public website and use it to collect support and feedback issues from your end users. However, you can also use it internally with your staff to collect feedback without having to invite users, or even with a select group of beta testers or priority support customers. The choice is yours!

To get the most out of the feedback tool there two great features that you really need to know about: 1. Widget customization 2. Metadata population

Widget customization.

You can now specify your own text to display in the BugHerd public feedback widget! Of course it's very useful for translating the text into your customers' language, but it can also be handy to direct your users about what you'd like them to do more specifically, such as "report a problem" instead of the default "send feedback".

Example

If you'd like to just modify the label on the tab, for example, to:

append this code just in between the script tag and where the bugherd embed script begins, like this:

<script type="text/javascript">
  var BugHerdConfig = {
    feedback: {
      tab_text: "Report a problem"
    }
  };

  (function (d, t) {
    var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
    bh.type = 'text/javascript';
    bh.src = '//www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE';
    s.parentNode.insertBefore(bh, s);
   })(document, 'script');
</script>

Translation

If you would like to use this functionality to translate all the English text into your website users' language, use this as a template:

var BugHerdConfig = {
  feedback: {
    tab_text: "Send feedback",
    option_title_text: "Choose an option",
    option_pin_text: "I have feedback regarding a specific part of this page.",
    option_site_text: "I have feedback regarding this page or site as a whole.",
    feedback_entry_placeholder: "write a comment or describe a problem",
    feedback_email_placeholder: "your email address",
    feedback_submit_text: "send feedback",
    confirm_success_text: "Your feedback was sent.",
    confirm_loading_text: "Sending feedback.",
    confirm_close_text: "close",
    confirm_error_text: "Sending feedback was unsuccessful.",
    confirm_retry_text: "Try again",
    confirm_extension_text: "Did you know you can send a screenshot with your bug reports?",
    confirm_extension_link_text: "Find out how.",
  }
};

Metadata population

The BugHerd sidebar can also be configured to override some of its default behaviour as well as display extra information in any tasks that you pass in from a configuration object called BugHerdConfig.

When setting up BugHerd for the first time, you probably already know you need to add the following code to your site:

  <script type="text/javascript">
    (function (d, t) {
      var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
      bh.type = 'text/javascript';
      bh.src = '//www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE';
      s.parentNode.insertBefore(bh, s);
      })(document, 'script');
  </script>

The BugHerdConfig object is added to the initilisation script as shown below:

  <script type="text/javascript">
    var BugHerdConfig = {
      // META DATA
      metadata: {
        username: "foobar",
        version: "1.0",
        foo: "bar",
        logged_in: "true"
      }
    };

    // BUGHERD INITIALISATION
    (function (d, t) {
      var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
      bh.type = 'text/javascript';
      bh.src = '//www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE';
      s.parentNode.insertBefore(bh, s);
      })(document, 'script');
  </script>

Config options

metadata: object

Adding custom meta data to the "Additional Info" area for tasks created on your site is just a matter of adding an object called metadata to the BugHerdConfig object within the initialisation script.

The metadata object is comprised of simple key/value pairs.

  var BugHerdConfig = {
    // META DATA
    metadata: {
      username: "foobar",
      version: "1.0",
      foo: "bar",
      logged_in: "true"
    }
  };

Note: the values are strings. If you want to pass in true as above, send it as the string "true".

You can use this to track all sorts of things, from user data to session data, or in our case the UserId and Rails controller/action. Anything you need to help you better diagnose and fix problems! Anything you add will appear under "additional info" in the task details.

pre-populate requester email

If users are logged in on your site, there is no point having them enter their email address again in your feedback widget. You can pre-set it if known.

  var BugHerdConfig = {
    reporter: {
      email: "someone@example.com",
      required: "true"
    }
  };

The value for "required" specifies whether you would like to make the email field mandatory or not. If "required" is set to "false" (default) the email address field can be left blank by your site visitors. You need to explicitly set the value for "required" to "true" if you'd like to make the field mandatory.

As always, if you need a hand setting this up or if you have any problems, please create a support ticket and we'll walk you through it.