Customise the "Send Feedback" tab

  • Last updated on September 6, 2023 at 12:43 AM

You can change the look and position of the Send Feedback  tab that is embedded on your page when you collect public feedback. Change the location of the tab, select a light background colour, or even create your own tab and invoke the click actions yourself.

Most changes can be made by modifying the javascript snippet that installs BugHerd on your website. Find out more about installing the BugHerd script here.

Change the position of the tab

Want the tab on the left hand side of the screen rather than on the right? Modify the BugHerd install code with the following:

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

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

Create your own send feedback tab

Step 1: hide the built-in tab

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

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

</script>

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

If you just want to customise or internationalise the text, please follow this link to customise your Send Feedback widget text (link opens in a new tab).