Create your own "Send Feedback" tab

Follow

Normally, when you use BugHerd to collect feedback from your site visitors publicly, we embed a little "Send Feedback" tab. This tab can be completely customised by essentially creating your own and invoking the click action yourself. This article describes how to do this.

Note: if you just want to customise or internationalise the text, this is very straight forward, please follow this link to customise your Send Feedback widget text.

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

<script type="text/javascript">
  
  var BugHerdConfig = {"feedback":{"tab_position":"bottom-left"}};

  (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>

Step 1: hide the built-in tab

Add the following line of code in the BugHerd script tag to stop the normal "Send Feedback" tab from appearing:

<script type="text/javascript">
  
  var BugHerdConfig = {"feedback":{"hide":true}};

  (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>

Step 2: 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:

<a id="my_feedback" onclick="_bugHerd.win.bugherd.applicationView.anonymousbar.toggleOptions()">Send Feedback</a>

Of course you can get as fancy as you like with this.

Step 3: hide your tab when user is logged into BugHerd

This is optional, but your send feedback link will not work if your site visitor is logged in and can see the sidebar. It is assumed that you would want them to use the sidebar in this case so don't show them your own "Send Feedback" widget.

<script type="text/javascript">
  function check_bugherd_login() {
if (typeof(_bugHerd) != 'undefined' && typeof(_bugHerd.win) != 'undefined' && typeof(_bugHerd.win.bugherd) != 'undefined' && typeof(_bugHerd.win.bugherd.applicationModel) != 'undefined') {
if (_bugHerd.win.bugherd.applicationModel.getUser() != null) {
document.getElementById('my_feedback').style.display = 'none';
}
} else {
setTimeout(check_bugherd_login, 1000);
}
}
check_bugherd_login(); </script>

 Please don't hesitate to get in touch with us to get any help with your specific needs!

Have more questions? Submit a request

Comments

Powered by Zendesk