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: 

Use Case

Sample Code

Create a custom attribute for Customer ID

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

Create a custom attribute for a marketing campaign

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

Create a custom attribute for an A/B test

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

Create a custom attribute for logged in status

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 

Limitations

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

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