Hooks

Nobi’s frontend hooks allow you to inject custom JavaScript logic into Nobi to control the display and behavior of products in the Nobi assistant. This enables fine-grained control over your product presentation without requiring code changes to Nobi itself.

How It Works

Nobi looks for custom hook functions on the global window.NobiFeatureHooks object. When Nobi encounters a hook point, it calls the corresponding function if it exists, passing relevant data as parameters. If the hook doesn't exist or encounters an error, Nobi falls back to its default behavior.

Setting Up Hooks

Add a global NobiFeatureHooks object to your site before Nobi loads:


window.NobiFeatureHooks = {
	hookName: function(param1, param2, etc) {
		// Your custom logic here
	}
};

Available Hooks

Show a badge or extra message for product variants

Hook name: shouldShowProductVariantMessage

Controls whether to display the product variant message (which can be either the product's message-to-shopper field or a headline from product tags).

Parameters:

productVariant - The product variant object being rendered

Default Value: true

Returns:

boolean - true to show the message, false to hide it

Example:


window.NobiFeatureHooks = {
	shouldShowProductVariantMessage: function(productVariant) {
		// Use external method to show message
		return myMerchantConfig.showBadges;
}

Update the cart after quick add

Hook name: onCartAdd
Called after a shopper adds an item to their cart via the Quick Add overlay. Use this to refresh your cart drawer, update the cart count badge, or trigger any other cart UI updates. The Quick Add overlay will only appear on your store if you have registered this hook (or if your store uses Alpine.js).


window.NobiFeatureHooks = {
    onCartAdd: function(cartResponse) {
        // cartResponse is the JSON from Shopify cart/add.js
        // Refresh your cart drawer, update count badge, etc.
    }
};

Transform product names

Hook name: transformProductName
Called when Nobi displays a product name on a product card. Use this to apply custom formatting to product names. Nobi already applies built-in transforms (stripping :: suffixes, converting all-caps to title case), and this hook runs after those. Return the transformed name.


window.NobiFeatureHooks = {
    transformProductName: function(name) {
        // name has already been cleaned by Nobi
        // (:: suffixes stripped, all-caps converted to title case)
        // Apply any additional formatting here
        return name;
    }
};

Error Handling

If your hook function throws an error, Nobi will:

Log a warning to the browser console

Fall back to the default behavior for that hook point

This ensures errors in your custom logic won't break the Nobi assistant.

Hooks How It Works Setting Up Hooks Available Hooks Show a badge or extra message for product variants Update the cart after quick add Transform product names Error Handling