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).