Table of Contents

• The addCustomAttribute Function
• The addError Function
• The requestHelpCode Function

The Noibu SDK (software development kit) allows you to interact with captured session data by creating custom attributes. Many customers use the SDK to pass data that allows them to pinpoint sessions related to specific campaigns, orders, A/B tests, and more.

The NoibuJS SDK is accessible from the global window object. The NOIBUJS attribute is set on the window object as soon as the Noibu script loads. Before using the SDK, check if the attribute is defined by running the function below:

async function checkSDKExistanceAndAddCustomAttribute() {
  if (!window.NOIBUJS) {
    await new Promise(resolve => {
      window.addEventListener('noibuSDKReady', resolve);
    });
  }
  window.NOIBUJS.addCustomAttribute('name', 'id');
}
checkSDKExistanceAndAddCustomAttribute();

This function checks if the window object has the NOIBUJS attribute. If the attribute is not available, it subscribes to the custom "noibuSDKReady" event, which is fired when the SDK is ready to use.

The addCustomAttribute Function

The addCustomAttribute function adds a custom attribute to the session you are working on, which helps you isolate it on the Noibu platform for later use. The attribute can be used to search Noibu sessions in a Session Search, and you can search by either the name or attribute value.

Noibu's addCustomAttribute() function:

Common uses for the addCustomAttribute function include: 

window.NOIBUJS.addCustomAttribute('customerID', '934739856')

window.NOIBUJS.addCustomAttribute('campaign', 'BlackFridayCampaign')

window.NOIBUJS.addCustomAttribute('variant', 'A')

window.NOIBUJS.addCustomAttribute('isLoggedIn', 'True')

When filtering sessions by Custom Attributes, filtering on the name value returns all sessions where an id with that name appears. Searching by value only returns sessions where the value matches the value searched. If you want to match the name and value, then use both filters in a session search.

Using the JS SDK to add custom attributes:

Code example:

Note that you cannot add multiple custom attributes with the same attribute name. For example:

window.NOIBUJS.addCustomAttribute('customerID', 'ABC')
window.NOIBUJS.addCustomAttribute('customerID', 'DEF')

Will only result in the first custom attribute value ('ABC') being captured in Noibu. 

Parameters 

• name: String type (max 1024 characters) - The name of the attribute
• value: String type (max 1024 characters) - The value of the attribute

Limitations

• Once you add an attribute, you cannot edit the value of it. You can only add additional attributes.
• You can add a maximum of 10 attributes per page. Every time the user causes the page to reload counts as a new page. For example, if a user visits 10 pages, then you can have 100 attributes in that session.
• You cannot also use an object or number as a parameter; the function only takes strings.

The addError Function

The addError function allows you to manually log custom errors through the NoibuJS SDK. If you observe an issue occurring within a session, this function can be used to flag the error location and type directly from your frontend code.

By reviewing multiple sessions where the same error occurs, you can better understand its business impact, including the potential revenue loss tied to that issue.

Basic structure as follows:

window.NOIBUJS.addError(new Error(Error message));

Note: The function requires a valid JavaScript Error object as its argument. Passing a plain string or other data type will not work.

Using addError for Conditional Checks

The addError function can be used to detect and report specific UI or functional conditions that indicate something is wrong on your site, for example - missing elements, incorrect visibility, or unexpected values. Below are a few examples of how you might use conditional check logic to automatically flag errors.

Example: Detecting Unexpected Price Values

The following snippet demonstrates how to use addError() to detect and report a potential issue; In this case, unusually low product prices on a page.

// Select all elements on the page that match the class or attribute for price text
const prices = document.querySelectorAll("class or attribute that corresponds to price text");

// Loop through each price element found
for (const price of prices) {
   // Get the text content of the element (e.g., "£5.00")
   const priceText = price.innerText;

   // Extract the numeric portion by splitting on the '£' symbol and parsing as a float
   const priceNum = parseFloat(priceText.split('£')[1]);

   // Check if the price is less than or equal to 2
   if (priceNum <= 2) {
      // If NoibuJS is available and addError() exists, log a custom error
      if (window.NOIBUJS.addError) {
         window.NOIBUJS.addError(new Error('low_price_alert'));
      }
   }
}

In this example:

This example identifies any products priced at £2 or less — which may indicate a data, currency, or display issue — and sends a "low_price_alert" error through Noibu. Reviewing sessions where this error appears can help you identify whether it affects checkout rates or conversion metrics.

Example: Detecting Hidden or Collapsed Payment IFrames

This script checks for embedded Stripe iframes that may be visually hidden or collapsed, then reports the issue as a custom error.

// Select all Stripe payment iframes whose names contain "privateStripeFrame"
const iframes = document.querySelectorAll('iframe[name*="privateStripeFrame"]');

for (const iframe of iframes) {
   // Retrieve computed CSS styles for the iframe
   const computedStyle = window.getComputedStyle(iframe);

   // Extract the height and opacity values from the computed styles
   const height = parseFloat(computedStyle.height);
   const opacity = parseFloat(computedStyle.opacity);

   // If the iframe is too small or fully transparent, log an error
   if (height < 10 || opacity === 0) {
      if (window.NOIBUJS?.addError) {
         window.NOIBUJS.addError(new Error("iframe missing"));
      }
   }
}

In this example:

In this scenario, if a payment iframe has a height under 10 pixels or is fully transparent (opacity: 0), it may not be rendering correctly — potentially blocking users from completing checkout.
Logging a custom "iframe missing" error helps you track when and where this issue occurs, so you can assess its impact across user sessions.

Once an error is captured, Noibu automatically associates it with affected sessions. By reviewing those sessions, you can determine whether the low prices stem from a display bug, currency mismatch, or another issue impacting behavior or revenue.

Example: Logging a Custom Error When a Specific Element Appears

This example demonstrates how to use addError to create a custom error when a specific element or message appears on the page, for example, a customer service notice or a backend error message that isn't automatically captured by Noibu.

This is useful when certain issues occur server-side (e.g., failed API responses or shipping errors) and you want to flag them in Noibu based on what appears in the DOM.

// Check for the existence of a targeted CSS class (replace with your own selector)
const targetedElement = document.querySelector('.your-css-class-here');
// If the targeted element exists, log a custom error to Noibu
if (targetedElement !== null) {
 // Verify that NoibuJS is available before calling addError()
 if (window.NOIBUJS?.addError) {
   window.NOIBUJS.addError(new Error('Checkout::Customer_Service_Shipping_Message'));
 }
}

In this example:

The script looks for a specific CSS class on the page that corresponds to an error message or condition you want to monitor. If that element is present, it triggers a custom error in Noibu using the addError method. This allows you to surface backend or non-visible issues directly within Noibu, even when no front-end JavaScript error occurs.

The requestHelpCode Function

Through the requestHelpCode function, you can programmatically request a Help Code through the SDK. A help code identifies a shopper's unique session and allows support reps to associate a customer complaint to a session recording in the Noibu console. 

The structure of this command is as follows:

window.NOIBUJS.requestHelpCode()

Use Cases

• A shopper can Generate a Help Code independently, but if a problem occurs you can use this API to access the help code.
• Several shoppers have requested a method of generating a help code without asking the shopper to modify their URL. With the requestHelpCode function, you can create a link or button that a shopper can click to generate the code. We recommend putting this link in your site's footer.
  • Note: To allow for clean filtering in the Sessions table, it's crucial that all help codes are generated deliberately, and creating a button may result in mis-clicks or bot activity generating erroneous help codes. To avoid this problem, we recommend assigning an unusual action to the help code button–right clicking or clicking four times, for example–to ensure that only shoppers instructed by CS can generate a help code.

Programmatic HelpCode Generation

If you desire to generate a helpcode without having to use the native browser's alert system you can use the Noibu SDK to generate the helpcode programmatically. 

Use Cases

• Embedding the helpcode directly in the contact us page upon a user navigating to that page. 
• Automatic generation of the helpcode as soon as a customer engages in a support chat.