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 customer's 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 give a slightly different call to action, 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"
}
};
</script>
<script
type="text/javascript"
src="https://www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE"
async="true"
></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.",
}
};

Attach the event to your own element

In your site's HTML, you can add the event that makes the bug reporting options to appear to any DOM element. Of course you can get as fancy as you like with this:

<script type="text/javascript">

var BugHerdConfig = {"feedback":{"custom_feedback_id": "YOUR-ELEMENT-ID"}};

</script>

<script
type="text/javascript"
async="true"
src="https://www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE"
></script>

Move the TAB to the left. If you'd like to simply have the tab on the left hand side of the screen rather than on the right, you just add this line:

<script type="text/javascript"> var BugHerdConfig = {"feedback":{"tab_position":"bottom-left"}}; </script> <scripttype="text/javascript"async="true"src="https://www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE"></script>Select a light coloured background

The Send Feedback tab defaults to a dark background. Change it to light by modifying the BugHerd install code with the following:<script type="text/javascript">

var BugHerdConfig = {"feedback":{"use_light_background": true}};

</script>
<script
type="text/javascript"
src="https://www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE"
async="true"
></script>

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">
async="true"
src="https://www.bugherd.com/sidebarv2.js?apikey=YOUR-API-KEY-HERE"
></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.If you need help with any of the commands above, please feel free to get in touch!