While Help Codes 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 Help Codes for customers via the requestHelpCode API function. This API function can be used to automatically request and display a Help Code directly on a page for every session, or to request a Help Code via a button and display it in a div tag.

Automatically Generating Help Codes

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 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.

<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 Help Codes 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 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.

<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 alertUser boolean parameter determines whether the browser displays a confirmation prompt with the 6-digit help code. In the script snippets above, this parameter is set to false, as seen in window.NoibuJS.requesthelpcode(false), which prevents the prompt because the Help Code will be displayed automatically.

However, if you intend to use Help Codes for live co-browsing, the alertUser parameter must be set to True — to prompt the customer with a Help Code before initializing a live co-browsing session.