Articles in this section

See more

Integrate GetFeedback Digital 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 GetFeedback Digital Feedback form. In this article, we’ll go over the steps for integrating GetFeedback Digital with our own feedback button.

For this guide, it’s recommended that you have basic knowledge of GetFeedback Digital, 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 GetFeedback Digital 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 GetFeedback Digital 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 GetFeedback Digital 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 GetFeedback Digital 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 GetFeedback Digital 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 GetFeedback Digital Default button
window.usabilla_live("hide");

//Find a Link and open the GetFeedback Digital 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 GetFeedback Digital code is added to your page. This pre-requisite since the commands are only available if the GetFeedback Digital 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 GetFeedback Digital 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 GETFEEDBACK DIGITAL INSTALLATION SNIPPET HERE -->

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

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

Related articles