Skip to main content

Programmatic Methods for Generating Help Codes

  • Updated

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

<html>
<head>
    <script src="index.js" defer></script>
    <script src="https://cdn.noibu.com/collect-core.js" defer></script>
</head>
<body>
    <div id="help-code-field"></div>
</body>
</html>

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.

<html>
<head>
    <script>
        window.addEventListener("noibuSDKReady", async () => {
            const helpCode = await window.NOIBUJS.requestHelpCode(false);
            const helpCodeField = document.getElementById("help-code-field");
            helpCodeField.innerText = helpCode;
        });
    </script>
    <script src="https://cdn.noibu.com/collect-core.js" defer></script>
</head>
<body>
    <div id="help-code-field"></div>
</body>
</html>

___

Generating Help Codes With a Button

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

<html>
    <head>
    <script>
    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;
        });
    });
    </script>
    </head>
    <body>
        <button id="request-help-code">Get a help code</button>
        <div id="help-code-result"></div>
    </body>
</html>

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.

Articles in this section