When you’re running a website that is content heavy Usabilla In-Page can provide valuable feedback that is directly related to the content on the page. Content on your website can come in a wide variety of formats like blog posts, articles, customer support page. More specifically, we’ve found that adding Usabilla In-Page to your FAQ page can help gather feedback on your content and identify improvements.
Many FAQ web pages will use expandable content for hiding and showing the answers to the questions. This means that the answer to each question is hidden for the user until they expand the content. By doing so you provide your users with an overview of all questions. While you could add a single Usabilla In-Page widget to your FAQ web page, you could also add multiple Usabilla In-Page widgets. If you add a Usabilla In-Page widget to each FAQ question you can gather feedback for each individual question.
Reading Time: 12min
Difficulty Level: Advanced
Note: Most of the code examples down below are hosted using Github Gists. If you do not see the code examples please make sure you allow for third-party content to be shown.
First, we’ll need to make sure that you have you a basic idea of where you want to place your Usabilla In-Page widget. One of the possible placements would be within the expandable content of your FAQ page. For the sake of this guide, we’ll use the Bootstrap V4 collapse element to show you where you would place the In-Page widget. The first image shows you what the default expandable looks like without an In-Page widget, the second image shows you where we would like to place the In-Page widget, and the third image shows you what the implementation would look like.
As soon as you’ve figured out where you want to place you In-Page widgets you’ll need to create your In-Page widget so that you can get the Widget ID from the install page. You can reach the install page by going to the setup page followed up by clicking on the “install” icon for your widget.
If you have your In-Page widget ID ready, keep it nearby as we move on to adding the coding part.
The "classname" refers to the name of the class that should be used by the function for appending the In-Page widgets. Use the class that you use for the content within the expandable content.
The "widgetid" refers to the ID of the Usabilla In-Page widget that you just created. The widget ID looks something like this “585276d3876927434b237e89”.
The first function automatically creates multiple Usabilla In-Page Widget codes and adds them to your web page. It does so by counting the number of HTML elements that have the specified classname. Using the number of elements, the function creates a matching number of widgets and appends them to each element with the "classname".
We recommend that you use the class that contains, for example, the question used for the content within the expandable content.
In the HTML code below you see that the expandable content is located in the div with the class “card-block”. This is the class that we’ll use for location of the In-Page widget. When we look again at the HTML we can see that the text of the clickable title used for expanding the content is a <a> with the class “faq-title”. This is the class that we’ll use for setting the custom variable to make sure you get the right context for feedback.
- Page is loaded
- Run usblInPageAppendToClassMulti()
- Run usblInPageAddCustomVarMulti()
- Run Usabilla In-Page Script snippet (not included in the script example).
As soon as you run the script above you’ll be able to see the In-Page widgets in the HTML when you inspect the page. To illustrate, we’ll take a look at the HTML of our example. In the example, you can see that an In-Page widget has been added to each card-block div element and that each In-Page widget has a custom variable that corresponds to the adjacent title.
After the In-Page widgets have been added you can run the Usabilla Script Snippet to load the In-Page widgets. As soon as you run the script you’ll see the In-Page widget load and you can start collecting feedback.
Tip: Don’t go overboard with the number of widgets using this implementation. While the loading a single In-Page widget in itself is fairly quick, loading a multitude of In-Page widgets can slow down the loading of the Widgets. A good rule of thumb here is to limit the amount of In-Page widget per web page to 10.
If you’re a Usabilla for Websites customer but not yet have a Usabilla In-Page license yet, you’ll need to get in touch with your Customer Success Manager at Usabilla. Your Customer Success Manager can provide you with more information, a demo, and a training to get you started with Usabilla In-Page. Not a Usabilla customer yet? Request a demo from one of our Sales Managers.
Requirements & Disclaimer
While this implementation of Usabilla In-Page offer great scalability and ease of use it does have some requirements. In order to have the function work properly, you need t make sure that the elements that you use for appending and for the custom variable data have a unique class that does not conflict. In addition, it requires that the number of elements that are used for appending is equal to the number of elements used for setting the custom variables. Additionally, try to avoid special characters in the custom variables.