Using the Custom Code section you can achieve just about anything you want within your Hub. Probably the most flexibility (and the most responsibility) comes with the power of JavaScript.

Since Hubs are built on an AJAX framework, getting your script to execute at the right time needs some explanation.

The "this" pointer within these Event Handlers has been bound to the Instance of the Hubs App, therefore you have full access to your Hub's internal code via "this".

We've exposed the following events for you to hook into:

1. onLoad - this will execute whenever your Hub loads for the first time - whether on the home, or a particular Stream or Item.
    
2. onResize - this will execute whenever the window is scaled. It will also fire when a mobile device is re-oriented from landscape to portrait or vice-versa.
    
3. onPageChange - this will execute after a new page is rendered (from an AJAX call) within the Hub - e.g. after a user clicks on a tile, the URL is updated and content is replaced, at which point this event will execute.
    
4. onScroll -  the scroll event is debounced, meaning it will only fire once the user stops scrolling. This prevents executing a lot of heavy work in the scroll event, and ultimately slowing down the browser and user-experience.
    
5. onItemsLoaded - this will execute every time a fresh set of Items are loaded on the Home or Stream of a Hub. Whether infinite scroll is enabled, or the user must click "load more", as soon as newly rendered Items are displayed on the page, this event will execute.
    
6. onCtaFormSubmitSuccess - this will execute when a Form CTA is submitted successfully. The data submitted will be available as a variable. See Example 4 below.
   
    

Code Examples

Example 1: onPageChange

Hubs.onPageChange = function() {       
     console.log('Page Type: ' + this.pageType);       
     console.log('Item Type: ' + this.itemType);
};

Example 2: onItemsLoaded

Hubs.onItemsLoaded = function(itemIds, itemsSelector) {
    // "this" pointer still points to Hubs App
    console.log('Page Type: ' + this.pageType);
    console.log('Item Type: ' + this.itemType);

    // First Parameter; [Array] Item IDs
    console.log('Item IDs: ', itemIds);

    // Second Parameter; [String] An Element Selector for 
    // Querying the DOM for the Loaded Tiles.
    console.log('Items Selector: ' + itemsSelector);

    // Example to get the Tiles that were just Loaded
    var $loadedTiles = $(itemsSelector);
};

Example 3: execute code on the Home, particular Stream, or Item

First to make life easier, create a function that's called either when Hubs.onLoad or Hubs.onPageChange happens. We can use this to hold any functions that should be called regardless of when the page is loaded, which will likely reduce a lot of duplication.

Hubs.onLoad = function(){
    onLoadOrChange(this);
}
Hubs.onPageChange = function(){
   onLoadOrChange(this);
}

function onLoadOrChange($this){
     console.log("**** see what *this* has to offer ***");
     console.log($this);
}

Next, explore the this object (which when passed to this shared function is passed in as variable $this) to reveal many available attributes.

Two of these attributes are :

currentCollectionId
this is the Stream ID (Streams used to be known as Collections) and will either have a value of "recent" when you're at the Hub's Home or the Stream's ID (whether on the Stream page or an Item within that Stream)

currentItemId
this is the Item ID and will either have a value of 0 when you're not in an Item (i.e. The Hub's Home or a Stream page) or the Item's ID.

Finally, it's easy to use those 2 values to achieve a variety of objectives:

function onLoadOrChange($this){

   var myCollectionId = 1234; //my stream
   var myItemId = 8765; //my item

   if($this.currentCollectionId == myCollectionId && $this.currentItemId == 0){
     alert("I'm in my favorite Stream, looking at Tiles");
   }

   if($this.currentCollectionId == "recent"){
      alert("I'm on the home of my Hub!");
   }

   if($this.currentItemId == myItemId){
      alert("i'm on my favorite Item, within Stream ID " + $this.currentCollectionId);
   }

}

Example 4: execute code on Successful CTA submission

Hubs.onCtaFormSubmitSuccess = function(ctaId, ctaData, ctaName){
    console.log("The CTA ID is " + ctaId);
    console.log("The data supplied is ", ctaData);
    console.log("The CTA name is " + ctaName);
    // the field data corresponds to your integration, so field names will vary 
    var msg = ctaData["FNAME"] + ", thanks for filling out " + ctaName + "!";
    alert(msg);

}

Looking for a specific example to help with your project?
Let me know in the comments below!