Articles in this section

See more

Integrate Usabilla with your own feedback button

Avatar
Niall Byrne
Updated
Follow

In some situations, the design of your web page does not lend itself to a feedback button that lays on top of your web page. In those situations, it’s best if you, for example, have a link in a drop-down menu that trigger the Usabilla Feedback form. In this article, we’ll go over the steps for integrating Usabilla with our own feedback button.

For this guide, it’s recommended that you have basic knowledge of Usabilla, HTML, CSS, and JavaScript.

Adding a button or link to the web page

Firstly, you’ll need to make sure that you have an HTML element that you can use for triggering the Usabilla Feedback form. This HTML element will act as an alternative way of initiating the feedback process that you would normally start by clicking on the Usabilla Feedback Button. An example of this can be found below:

2017-05-09_at_14.56.gif

 

There are several types of HTML elements that you can add. For the sake of this guide, we’ll be using a standard <a> link with some text that can be clicked for leaving feedback. Add the HTML, CSS, and JavaScript for the HTML element that you’re going to use to the web page for initiating the feedback process.

<!--integrated feedback button -->
<a href="#" id="usbl-integrated-button">Give Feedback</a>

Using the JavaScript API Commands

When you have Usabilla installed on your web page you automatically have access to a set of JavaScript API commands. These JavaScript API commands can be used for interacting with the Usabilla Tool on your web page. Of those JavaScript API commands, you’ll two for this guide. These are the “hide” command and the “click” command.

The “hide” command is the command we’ll be using for hiding the default Usabilla Button. Because we’re creating our own feedback button we’ll need to hide the default one. Doing so makes sure we’re not adding multiple feedback buttons while we only need one.

The “click” command is the command that we’ll use for initiating the feedback process. The “click” command simulates the event that would normally occur when someone clicks on the feedback button.

To make your life a little bit easier we already made a piece of example code that you can add to your web page straight away to:

  • Add a link for initiating the feedback process.
  • Hide the default feedback button.
  • Enable the added link to initiate the feedback process.
<script>
//Hide Usabilla Default button
window.usabilla_live("hide");

//Find a Link and open the Usabilla Feedback form when the user clicks on the link
document.getElementById("usbl-integrated-button").addEventListener("click",function(){
	window.usabilla_live("click");
});
</script>

When you add this code, you need to make sure that the code with the “hide” and “click”  command is added after the Usabilla code is added to your page. This pre-requisite since the commands are only available if the Usabilla installation code was run.

After you’ve added the code with the commands you’ll be ready to use your integrated feedback button. With the JavaScript API commands, there are countless ways you can integrate Usabilla with your own website. Please go here for more information on our JavaScript API commands. 

Total example

<!--integrated feedback button -->
<a href="#" id="usbl-integrated-button">Give Feedback</a>

<!--ADD USABILLA INSTALLATION SNIPPET HERE -->

<script>
//Hide Usabilla Default button
window.usabilla_live("hide");

//Find a Link and open de Usabilla Feedback form when the user clicks on the link
document.getElementById("usbl-integrated-button").addEventListener("click",function(){
	window.usabilla_live("click");
});
</script>

Related articles