The Javascript API allows you to pass data and events from single page applications, without the need to rely on scraping or a data layer. This will allow you to pass data from an app built with a framework such as React, Angular or vue.js (or plain Javascript).

Your app should for example:

Call the pageChange event when the SPA has finished loading.
Call the cartUpdate event when the shopping cart contents change.
Etc...

Learn more about Raising events here.

You can also register for notifications when certain events occur within the Fresh Relevance script. You have the option of cancelling the event (e.g. if you want to block a slot from loading).

Learn more about Consuming events here.

$TB.hooks object

$TB.hooks is the object you need to interact with to manage, monitor, raise and consume events.

_Note: _Please see the following pages for more detail on Raising events and Consuming events.

The following calls and properties are available on the $TB.hooks object:

`$TB.hooks.events`

This property returns all the events, as an array, that have been raised by the current page. This is ideal for validating that the events you are expecting to be raised are happening and contain the correct data.

[
    {
        "eventID": "GUID596D",
        "eventName": "pageChange",
        "data": null,
        "options": {
            "sendBeacon": true
        },
        "eventTime": "2025-08-08T13:41:41.211Z",
        "processed": false
    },
    {
        "eventID": "GUID596E",
        "eventName": "productBrowse",
        "data": {
            "url": "http://www.example.com/example_product",
            "name": "Example Product",
            "image": "http://www.example.com/example_product.jpg",
            "thumbnail": "http://www.example.com/example_product_tn.jpg",
            "description": "Example Product Description",
            "variants": [
                {
                    "url": "http://www.example.com/example_product_blue",
                    "name": "Example Product Blue",
                    "id": "example_product_blue",
                    "stock": 1,
                    "image": "http://www.example.com/example_product_blue.jpg"
                },
                {
                    "url": "http://www.example.com/example_product_red",
                    "name": "Example Product Red",
                    "id": "example_product_red",
                    "stock": 1,
                    "image": "http://www.example.com/example_product_red.jpg"
                }
            ],
            "id": "example_product",
            "sku": "example_product_01",
            "price": 100,
            "sale_price": 89.99,
            "categories": [
                "example products",
                "on sale"
            ],
            "extra_data": {
                "example_data": "example extra data",
                "author": "John Doe",
                "style": "polo",
                "color": "red"
            },
            "language": "ENG",
            "brand": "brand",
            "currency": "GBP",
            "stock": 5
        },
        "options": {
            "sendBeacon": true
        },
        "eventTime": "2025-08-08T13:42:48.555Z",
        "processed": false
    }
]

`$TB.fireEvent(eventName, data, options)`

Parameter	Type	Description
eventName	string	The name of the event that has occurred, for a list of events available see `$TB.hooks.validCallEvents()`
data	object	An object containing the data for the event raised, this could be product information, user details or a cart.
options	object	An object containing any additional parameters for the event, additional parameters detailed with each event here .

This can be called to allow Fresh Relevance to know that an event has occurred on your website such as a product browse or cart update. You are able to pass data along to Fresh Relevance such as the product information for a product browse event or the contents of a cart for a cart update event.

Learn more about Raising events here.

`$TB.registerEvent(eventName, callback)`

Parameter	Type	Description
eventName	string	The name of the event that you wish to attach your callback method to, for a list of events raised by Fresh Relevance see $TB.hooks.validReturnEvents()
callback	object	A callback function you wish to run whenever the event has been raised.

This allows for callback methods to be registered against events raised by Fresh Relevance when capturing information from your website.

Learn more about Consuming events here.

`$TB.validCallEvents()`

No parameters

Returns a list of valid event names that can be raised using $TB.hooks.fireEvent.

[
    "pageChange",
    "productBrowse",
    "productList",
    "cartUpdate",
    "addCartProduct",
    "removeCartProduct",
    "checkout",
    "purchaseComplete",
    "productVariantSelected",
    "userLoggedIn",
    "addCartProduct",
    "removeCartProduct",
    "skipSlotsLoad",
    "searchShown",
    "searchResultsReturned",
    "fullSearchResultsReturned"
]

`$TB.validReturnEvents()`

No parameters

Returns a list of valid event names that can be listened for using $TB.hooks.registerEvent.

[
    "pageChangeCaptured",
    "productCaptured",
    "listCaptured",
    "cartUpdated",
    "checkoutCaptured",
    "purchaseCompleteCaptured",
    "userCaptured",
    "slotPreload",
    "slotPreinsert",
    "slotInserted",
    "personalizationComplete",
    "cartProductAdded",
    "cartProductRemoved",
    "initialSlotsLoadSkipped"
]

`$TB.reloadSlotConfig()`

No parameters

Used to reload the slot configuration on the current page, this will add any slots that have not been added to the page and populate them with their content.

Note: Slots that have been successfully loaded to the page before this call will not be effected.