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 withuberflip.
Event: load
loadDescription
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
itemsLoadedDescription
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
resizeDescription
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
scrollDescription
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
ctaActivateDescription
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
ctaFormSubmitSuccessDescription
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 CTActaData: 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
recoItemsLoadedDescription
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.
Updated almost 3 years ago