Customizing Nobi

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;
}

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 Error Handling