In March, Noibu introduced Help Code, a tool for shoppers to generate a code to identify a problematic session. This provides an easy way for customer support reps to connect a shopper complaint to a session recording in Noibu, which takes a lot of the guesswork out of investigating shopper-reported issues.
Since the feature’s deployment, we’ve received feedback from clients that while Help Code is a boon to their support processes, they dislike instructing the shopper to modify the URL to generate the code. Furthermore, some clients use help code so frequently that they’ve built a button to Generate Help Code directly into their eCommerce site’s footer. We think this is a great idea, so we’ve modified the requestHelpCode API function to allow you to request a help code and display it in a div tag.
There are many ways to create a Help Code button, and the best option for you depends on the implementation of you website. Below are two options: a separated HTML/JS method or a method that places the JavaScript in the HTML head. Keep in mind that these are not the only methods, and only control the button’s functionality. You should adjust your CSS files to style the button to fit your site.
Option 1: Separated HTML & JavaScript
Add the code snippets below to your index files.
HTML
<html>
<head>
<script src="index.js" defer></script>
</head>
<body>
<button id="request-help-code">Get a help code</button>
<div id="help-code-result"></div>
</body>
</html>
JavaScript
window.addEventListener("DOMContentLoaded", () => {
let button = document.getElementById("request-help-code");
let label = document.getElementById("help-code-result");
button.addEventListener("click", async () => {
let helpCode = await window.NOIBUJS.requestHelpCode(false); // do not present an alert with a help code
label.innerText = helpCode;
});
});
Option 2: Combined JS/HTML
Rather than configuring the Help Code HTML and Javascript separately, load the JS snippet into the HTML head in a script tag, and configure the button and div in the body of the page.
<html>
<head>
<script>
window.addEventListener("DOMContentLoaded", () => {
let button = document.getElementById("request-help-code");
let label = document.getElementById("help-code-result");
button.addEventListener("click", async () => {
let helpCode = await window.NOIBUJS.requestHelpCode(false); // do not present an alert with a help code
label.innerText = helpCode;
});
});
</script>
</head>
<body>
<button id="request-help-code">Get a help code</button>
<div id="help-code-result"></div>
</body>
</html>
Notes
In the script snippets above, the alertUser boolean parameter is set to false, as seen in window.NoibuJS.reuqesthelpcode(false). This prevents the browser from displaying the standard prompt dialog with the help code. It is up to the developer to determine how to present the code to the end user.
To leave the prompt dialog as it is, omit this parameter.