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.
In this article, we explain step-by-step how you can automatically add multiple Usabilla In-Page widgets to a single page and how you can automatically add contextual custom variables to each Usabilla In-Page widget on your web page. For this step-by-step guide, it’s advised that you’re familiar with Usabilla In-Page, HTML, CSS, JavaScript, and Tag Management.
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.
Setup
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.
Tip: We advise that you also think of how to deploy the JavaScript. Ideally, you would add the JavaScript to your website using a Tag Manager. Doing so makes it easy to change and implement the code on multiple pages.
The Code
In order to make the implementation a whole lot easier for you, we’ve made two JavaScript functions that you can add to your website. The two JavaScript functions both serve a specific purpose and should be used in a specific order.
The first JavaScript function, usblInPageAddCustomVarMulti(), requires 2 arguments, being the "classname"* and the "widgetid".
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".
The second JavaScript function also requires 2 parameters, being the "classnamedata" and the "propertyname". The "classnamedata" refers to the name of the class that should be used by the function for retrieving the text that will be used as a custom variable for the In-Page widgets.
We recommend that you use the class that contains, for example, the question used for the content within the expandable content.
Example
To give you a basic idea of how the implementation would look like, we’ll be using the HTML code from collapse element found in Bootstrap 4. In this example, we’ll be adding 3 Usabilla In-Page widgets within the expandable section and we’ll add the text of the clickable title as a custom variable to each Usabilla In-Page widget. While in the example we’ll be adding 3 In-Page widgets, the example applies to any amount. This is because of the JavaScript that we’ll be using that dynamically adds the In-Page widgets.
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.
Based on the HTML that we see above we’ll be using the JavaScript functions to add the In-Page widgets and the custom variables. It’s important that you follow this exact sequence of running the JavaScript. The sequence is as follows:
- 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.
The JavaScript mentioned in this article does not fall under the official Usabilla Product support and is therefore provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the author be liable for any claim, damages or other liability,  whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings.