Reference: Uberflip Hub events for JavaScript


A reference guide to the various Uberflip-specific HTML events that you can use with Custom Code.


Before you begin

  • This article describes Uberflip Hub events that you can hook into when writing JavaScript Custom Code, along with the correct method to use them. To learn more about Custom Code and how to use it on your Hub, see this article.


This article describes how to use Hub events in legacy Front End V1 Hubs. The same Hub events are available in Front End V2 Hubs, but their usage is different. As a result, the information provided in this article is not applicable if you are working with a Front End V2 Hub.

For documentation on how to use Hub events in Front End V2 Hubs, see the Hub events reference guide on Uberflip Developers.


Hub events method and usage

You can use Uberflip-specific HTML events, called Hub events, as triggers for your JavaScript Custom Code. To create event handlers for Hub events, use the following method:

Hubs.Events.on('eventName', myFunction)

For eventName, substitute the Hub event to be used (see table below).

For myFunction, substitute your JS function. This must be a function declaration, not a function call. For example:

Acceptable (declaration):

function myFunction() {/*Do action*/}

Not acceptable (call):



Available Hub events

This table lists the Hub events that you can use:

  • eventName lists the eventName to be used in the event handler
  • Parameters lists any parameters for which arguments will be passed to the handler function
eventName Description Parameters Notes
When major Hub elements are loaded None  
When browser window finishes changing size None Debounced version of default browser event, i.e. won't fire as soon as or during a size change, only after
When a user finishes a scroll movement None Debounced version of default browser event, i.e. won't fire as soon as or while a user scrolls, only after
When a user clicks on a Form CTA, and the CTA enters the "Focus" state
  • ctaId
Any changes aimed at Form CTAs must be on this event
When a user submits a Form CTA, and the CTA enters the "Success" state
  • ctaId
  • ctaData
  • ctaName

When more Items in a Stream load, either when a user reaches the bottom of the page and more Items load automatically, or when the user clicks the "Load More" button

  • itemIds
  • selector
  • Fires when the additional Items have finished loading, not as soon as they begin to load
  • itemIds provides an array of the Items that were loaded
  • selector can be used to get all the elements, e.g with jQuery:

When Items served by the Content Recommendations feature finish loading

  • Depending on setup and user screen size, target Items may load in any of the recommendation panel, More Content carousel, or Next Item flyout



  • Hub events can be chained like other jQuery functions, e.g.
    .on('eventName', myFunction)
    .on('eventName', myFunction)
  • Event listeners can be turned off, e.g.'scroll')
7 out of 7 found this helpful