
In this article, we are adding a site-wide responsive benefits bar with JavaScript.
Our hypothetical case for this chapter is about adding benefits to a website. UX research from CXL showed that adding benefits underneath the header can be an effective way of communicating your unique selling points (USPs) to a visitor.
Business case: Adding a site-wide benefits bar.
In this hypothetical scenario, we arrive at the following hypothesis:
“Because we saw that research showed that you need to communicate your benefits, we expect that adding a site-wide benefits bar will cause an increase in sales. We’ll measure this using conversion-rate”.
To test this hypothesis, we’re going to apply the changes below:

Code
Now for the fun part!
To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!
//variables
var parentElement = document.querySelector("article");
var usps = [
["Fast delivery", "fas fa-truck", "/"],
["Free shipping", "fa fa-ship", "/"],
["4000 likes", "fab fa-facebook-square", "/"]
];
//functions
function createBenefitsheader(usps) {
var containerElement = document.createElement("div");
for (var i = 0; i < usps.length; i++) {
containerElement.appendChild(createUsp(usps[i]));
}
containerElement.style.display = "flex";
containerElement.style.flexWrap = "wrap";
containerElement.style.justifyContent = "center";
containerElement.style.padding = "15px";
containerElement.style.overflow = "hidden";
containerElement.style.height = "81px";
parentElement.prepend(containerElement);
}
function createUsp(usps) {
var anchorElement = document.createElement("a");
var iconElement = document.createElement("i");
var textElement = document.createTextNode(usps[0]);
iconElement.style.paddingRight = "5px";
anchorElement.style.padding = "15px";
anchorElement.style.whiteSpace = "nowrap";
iconElement.setAttribute("class", usps[1]);
anchorElement.setAttribute("href", usps[2]);
anchorElement.appendChild(iconElement);
anchorElement.appendChild(textElement);
return anchorElement;
}
//function calls
createBenefitsheader(usps);
Logic
//variables
We start by creating a comment section for the variables.
var parentElement = document.querySelector("article");
Then we assign the element where the site-wide bar will be prepended.
var usps = [
["Fast delivery", "fas fa-truck", "/"],
["Free shipping", "fa fa-ship", "/"],
["4000 likes", "fab fa-facebook-square", "/"]
];
After that, we create a data structure of arrays containing the information needed for our benefits. The first item in the array is a string that contains the text that will be displayed.
[text, iconclass, url]
The second item is a string that contains the name of the class for the icon. This icon will be added with the font-awesome library. Learn how to set up font-awesome here.
[text, iconclass, url]
The third item is also a string that contains the URL of the benefit. I will just point this to the homepage for now. You could link this to the terms of service for example.
[text, iconclass, url]
We do this three times and close the array.
//functions
Then we create a comment section for the functions.
function createBenefitsheader(usps) {
This function will handle the creation of the benefits bar. It takes an array of arrays as the argument.
var containerElement = document.createElement("div");
We start by creating a container element.
for (var i = 0; i < usps.length; i++) {
We need to loop through the length of the array of arrays. This will be 3 times in this example.
containerElement.appendChild(createUsp(usps[i]));
Every loop we call a function that creates a unique selling point with the data structure and appends this to our container element.
}
Then we close the loop.
containerElement.style.display = "flex";
We set the container element to a flex state. This is used to make things responsive.
containerElement.style.flexWrap = "wrap";
This line makes sure the element in the container wraps to the next line.
containerElement.style.justifyContent = "center";
Then we center our the benefits in our container element.
containerElement.style.padding = "15px";
This line creates some extra white space within the container.
containerElement.style.overflow = "hidden";
When a benefit wraps to the next line it will be hidden. This way we don’t have an enormous benefit bar on mobile.
containerElement.style.height = "81px";
The overflow needs a height to work.
parentElement.prepend(containerElement);
Then we prepend our benefits bar on the website.
}
We close the function.
function createUsp(usps) {
This function handles the creation of unique selling points. It takes an array as the argument.
var anchorElement = document.createElement("a");
We start by creating an anchor element.
var iconElement = document.createElement("i");
We also need an Idiomatic Text element. This will be our icon.
var textElement = document.createTextNode(usps[0]);
Then we create a text element with the first item in the array.
iconElement.style.paddingRight = "5px";
We add some padding on the right of the icon to give it some white space.
anchorElement.style.padding = "15px";
Then we add even more padding around the anchor itself. This ensures that the clickable area is big enough.
anchorElement.style.whiteSpace = "nowrap";
This line makes sure that the icon and text stay on the same line.
iconElement.setAttribute("class", usps[1]);
We add the class element to our iconElement variable. Font-awesome will convert this element to an icon. The function will use the second item in the array as the input.
anchorElement.setAttribute("href", usps[2]);
Then we add our link to the anchor element using the third element in the array.
anchorElement.appendChild(iconElement);
We append the icon to our anchor element.
anchorElement.appendChild(textElement);
We append the text to our anchor element.
return anchorElement;
We return the finished anchor element so it can be used in our other function.
}
We close the function and finish the script.