Hub events

A reference guide to Uberflip-specific hub front end HTML events

This reference guide describes Hub events, the custom HTML events built into the Uberflip Hub front end. Using JavaScript, you can leverage these events to manipulate the Hub front end DOM and enable custom functionality.

Usage

Use this guide to understand which custom events are available in the Hub front end, how they are used, and how to implement them.

Method

Create event handlers for Hub events using the addEventListener() method:

window.addEventListener('uberflip.eventName', () => {});
  • For eventName, substitute the Hub event you would like to use. The event name must always be prepended with uberflip.

Event: load

Description

When major page components are loaded.

Parameters

None

Use case

A function that should run on page load, e.g., appending a new DOM element.

Event: itemsLoaded

Description

When more tiles load on any page with the Tile Grid component. By default, this happens when clicking on the "Load More" button. If the Load content by "See more" button option is turned off (under Hubs > Hub Options > Advanced), this happens when new items load automatically upon scrolling to the bottom of the page.

This event fires when the additional Items have finished loading, not as soon as they begin to load.

Parameters

  • itemIds: Array of IDs for the loaded items.
  • selector: Can be used to get all the items.

Use case

A function that should run when new items are loaded, e.g., adding content tags to new items.

Event: resize

Description

When browser window finishes changing size.

This event is a debounced version of the native browser event, i.e. it won't fire immediately on or during a size change, only after.

Parameters

None

Use case

A function that should run on window resize, e.g., resizing a carousel component's width to be 50% of its parent container.

Event: scroll

Description

When a user finishes a scroll movement.

This event is a debounced version of the native browser event, i.e. it won't fire as soon as or while a user scrolls, only after.

Parameters

None

Use case

A function that should only run on scroll, e.g., modifying a page component's position based on scroll depth.

Event: ctaActivate

Description

When clicking on a Form CTA tile's dummy field, causing the tile to enter the Focus state. Any changes aimed at Form CTA tiles must be on this event.

Parameters

  • ctaId: String of the ID of the Form CTA that was activated.

Use case

A function that should only run when a Form CTA tile is activated, e.g., adding a hidden field to the form.

Event: ctaFormSubmitSuccess

Description

When clicking on a Form CTA tile's "Submit" button in the Focus state, causing the tile to enter the Success state.

Parameters

  • ctaId: String of the ID of the submitted Form CTA
  • ctaData: Object of the submitted data.
  • ctaName: String of the submitted CTA's name.

Use case

A function that should only run when a Form CTA has been submitted, e.g., setting a cookie based on the submitted form.

Notes

The parameters for this Hub event are returned as part of the event.detail object. To use, destructure the object and assign the values of the three parameters, for example:

window.addEventListener('uberflip.ctaFormSubmitSuccess', (event) => { const { ctaId, ctaData, ctaName } = event.detail; 
    console.log(ctaId); 
    console.log(ctaData); // object containing form submission data
    console.log(ctaName); 
});

Event: recoItemsLoaded

Description

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 Recommendations Panel, Items Carousel, or Next Item Flyout.

Parameters

None

Use case

A function that should only run when recommended content has been loaded, e.g. adding tags to recommended items.