In this article, we will focus on Usabilla In-Page. We will talk about what they are, how you can set them up and how you can implement them on your website.
In this guide we’ll go over:
What is Usabilla In-Page?
With Usabilla In-Page, you can integrate our feedback widget right in the middle of the content of your website. This allows you to gather very specific element- or content-related feedback.
An In-Page widget looks like this:
After clicking on ‘YES’ (or ‘NO’), your visitor will be asked to explain his or her answer in an open text field:
But mind you: there are a lot more options than just ‘Yes’ and ‘No’ and a simple follow-up question! More on that below under ‘Setting up In-Page’.
Setting up In-Page
In-Page actually consists of 2 elements: a widget and a script. The widget is the actual piece of software your visitors will get to see. The script simply makes sure the widget can be shown on a website.
- First, go to your Usabilla account and click on ‘Setup’ under ‘In-Page widget’ and ‘Websites’. Please see below:
If you don’t have access to In-Page, please contact your Customer Success Manager.
- Click on ‘New widget'
- Give it a name
- You’ll be asked to select an existing script to install the widget on or add a new script. But what is a script? As said, you’ll use the script to make sure your widget can be shown on your website. But scripts also allow you to group multiple widgets according to your organisational needs. You could, for example, use a different scripts for each of your websites or different scripts for each of your departments. Please see below:
- After this, you’ll be presented with all of the In-Page options we offer. There are quite a lot of options, so take your time to familiarize yourself with the product. You could, for example, only ask ‘Did you find this useful’ and then use the ending page or add different follow-up questions. Please see below:
Tip: If you have a custom theme from Usabilla for Websites (for Forms or Campaigns) these can be selected under ‘Advanced’. The In-Page widget will automatically have your colors and style. If you don’t have a custom theme request one here.
Implementing your In-Page widget
Now that you have a shiny, new In-Page widget, you’ll want to use it of course. To implement the widget, you'll have to add two pieces of code to your web page. We will start by adding the Javascript code and finish with the code for the widget itself.
- To see the two pieces of code, click the install icon next to the name of your widget:
(If you’ve just finished creating a new widget, you’ll be automatically directed to this page.)
- Select the code under ‘Script snippet’ and copy it:
- Paste the code into the bottom of every page you want the widget to appear, just before the closing body tag (</body>)
- Select the code under ‘Widget code’ and copy it:
- Paste the code in the section of the HTML where the widget should appear. You will have to do this on every page you want the widget to appear.
Make sure that the HTML container for the widget is defined before you execute the script. If you're using a Tag Management system then make sure that the firing rules is set correctly. First execute the HTML container, then execute the script.
Tip: when you are using a CMS make sure the Script snippet is installed in your main page template. Be consistent when implementing the scripts. So if you use GTM to implement your feedback button make sure you use GTM as well for the Script snippet.