This document describes details of how to implement Usabilla for Websites on your site.
Quick start guide for Installing Usabilla for Websites
The Usabilla for Websites installation entails the pasting of a small code snippet into your pages. The code allows the Usabilla code to run from the Usabilla on your website by using an <iframe>.
To implement Usabilla on your website:
Avoiding common pitfalls
When implementing Usabilla for Websites, keep the following in mind:
- Make sure to load the Usabilla code just before the closing </body> tag.
- Make sure that your resources, like the CSS and images, are available for the Usabilla server.
- Make sure you do not load any additional content after the Usabilla button has loaded.
- Make sure your page markup is valid.
- Make sure that the content on your page doesn’t have a z-index that exceeds the z-index of the Usabilla button container.
Validating your web page
When a user leaves feedback on your page using the Usabilla feedback button a screenshot will be generated which will be attached to the feedback item. The screenshot is generated by using the HTML of your page. To make sure that the screenshot is generated correctly it’s important that you make sure that your pages are valid.
Note: Web pages are written in a markup language (e.g. HMTL) and like any other language your markup language has certain rules to which it should comply. You can check this compliance by doing markup validation. We can define "markup validation" as the process of checking a Web document against the grammar (generally a DTD) it claims to be using.
You can do a markup validation by using the Markup Validation Service of W3C. https://validator.w3.org/ . Common issues that could cause issues are:
- Not having a DOCTYPE declared.
- Not having the Character Encoding declared.
- Having invalid characters in your tags (i.e.; instead of, in your meta tag).
Consideration for websites in a closed or local environment
When you have Usabilla for websites installed on a page that is located on a local server or a page that is located on a server in a closed environment you will need to account for any the possible obstructions that could limit the functionality of the Usabilla software.
Usabilla will not work when your page is implemented using files that are retrieved from within one’s own computer, for example, a page using the File URI scheme. The reason being that the Usabilla code mirrors the scheme and protocol that is used for the page on which it is installed.
When you have a page that is being hosted locally, for example, a staging environment or an intranet website, you will notice that the screenshot feature will not work correctly. In most cases, this is a result of our server not being able to access the resources that are needed by our server to create the screenshots.
You can resolve this issue by either allowlisting the IP-addresses of the Usabilla server or use resources that are publicly available for both your web page as well as the Usabilla server. More info about the allowlisting and making available of your resources can be found here.
In some cases, you’ll want to combine Usabilla with other software, i.e. Google Tag Manager, to get the most out of your customer feedback. We’ve gathered a list of tools that we think could be helpful when troubleshooting or testing:
- EditThisCookie (Chrome plugin)
- Web Developer (Chrome plugin)
- DataLayer Inspector (Chrome plugin)
- Firebugz (Firefox Plugin)
- Google Tag Assistant (Chrome plugin)