While HelpCode™ can be manually generated by appending #helpcode to the URL of any page on which Noibu’s script is deployed, there are also programmatic ways to automatically generate HelpCode™ for customers via the requestHelpCode API function. This API function can be used to automatically request and display a HelpCode™ directly on a page for every session, or to request a HelpCode™via a button and display it in a div tag.

Automatically Generating HelpCode™

Separated HTML & JavaScript

Add the code snippets below to your index files.

HTML

<div id="help-code-field"></div>

JavaScript

window.addEventListener("noibuSDKReady", async () => {

    const helpCode = await window.NOIBUJS.requestHelpCode(false);

    const helpCodeField = document.getElementById("help-code-field");

    helpCodeField.innerText = helpCode;

});

Combined HTML & JavaScript

Rather than configuring the HelpCode™ HTML and JavaScript separately, load the JS snippet into the HTML head in a script tag, and configure the div in the body of the page.

<div id="help-code-field"></div>

<script>
  window.addEventListener("noibuSDKReady", async function () {
    const helpCode = await window.NOIBUJS.requestHelpCode(false);
    const helpCodeField = document.getElementById("help-code-field");

    helpCodeField.innerText = helpCode;
  });
</script>

___

Generating HelpCode™ With a Button

Separated HTML & JavaScript

Add the code snippets below to your index files.

HTML

<button id="request-help-code">Get a help code</button>

<div id="help-code-result"></div>

JavaScript

window.addEventListener("noibuSDKReady", () => {

    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;

    });

});

Combined HTML & JavaScript

Rather than configuring the HelpCode™ 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.

<button id="request-help-code">Get a help code</button>

<div id="help-code-result"></div>

<script>
  window.addEventListener("noibuSDKReady", function () {
    const button = document.getElementById("request-help-code");
    const result = document.getElementById("help-code-result");

    button.addEventListener("click", async function () {
      const helpCode = await window.NOIBUJS.requestHelpCode(false);
      result.innerText = helpCode;
    });
  });
</script>

Notes

The boolean argument passed to requestHelpCode() determines whether the browser displays a confirmation prompt with the 6-digit HelpCode™. In the script snippets above, this parameter is set to false, as seen in window.NOIBUJS.requesthelpcode(false), which suppresses the browser prompt, and the snippet displays the returned HelpCode™ on the page instead

However, if you intend to use HelpCode™ for live co-browsing, the boolean argument passed to requestHelpCode() parameter must be set to true — to prompt the customer with a HelpCode™ before initializing a live co-browsing session.