Customising Widgets with the HireHop API

HireHop is completely customisable. Using the JavaScript injection method, you can write custom scripts to modify UI elements, build bespoke functionality, or add custom fields directly into your HireHop instance.

When viewing the page source of any HireHop page, look for the <!-- PLUGINS --> comment tag. All custom JavaScript injected via your plugin settings will be inserted directly after this point.

Understanding the NoHTML Framework

HireHop is built on a custom, lightweight framework called NoHTML. It amalgamates standard web technologies to create an ultra-fast, extendable client-side rendering experience:

• Uncompressed Source Files: All standard HireHop JS files are compressed for performance. To inspect readable, uncompressed source code during development, append .MAX to the file path (e.g., /js/notes.MAX.js).

• Client-Side Rendering: Apart from the core page shell, most UI components are built dynamically on the client’s machine using custom JavaScript and jQuery UI widgets (similar to React and JSX, but lightweight and using standard jQuery).

• Asynchronous Data Transfer: Pages load empty <div> targets (e.g., <div id="notes_tab"></div>). When a user interacts with a tab, an AJAX call fetches lightweight JSON data from the server, and a jQuery UI widget (like $.custom.notes in /js/notes.js) builds the interface on the fly.

Injecting Custom JavaScript

To load your custom scripts into HireHop:

1. Navigate to Settings > Company Settings.
2. Locate the Plugins field.
3. Enter the full URL of your hosted JavaScript file (must be hosted on a secure https:// domain).
4. Optional: To load multiple scripts, separate the URLs with a semicolon ;.

Note: For security reasons, custom plugins will not load on the Settings page, and require an active paid subscription.

Extending a Widget

Because HireHop relies on standard jQuery UI Widgets, you can use object-oriented inheritance to override, extend, or add functions to existing components.

Below is a complete example of a custom plugin that injects a <span> containing the word “Hello” directly after the Refresh button on the Notes widget.

JavaScript Implementation

Create a JS file on your HTTPS server (or inspect our live demo at [https://s.myhirehop.com/plugins/demo.js](https://s.myhirehop.com/plugins/demo.js)):

$(document).ready(function(){
   // Check if the notes widget exists (if user is defined a user is logged in, and if doc_type is defined, you are in a HireHop page)
   if(typeof($.custom.notes)!==”undefined” && typeof(user)!==”undefined” && typeof(doc_type)!==”undefined” && hh_api_version<=1.3) {
      // Redefine notes widget
      $.widget(“custom.notes“, $.custom.notes, {
         _init_main: function() {
            // Call the old _init_main
            this._super(arguments);
            // Add a hello after the refresh button
            $(“<span>“,{ html:” Hello” }).insertAfter(this.btnRefresh);
         },
         // Even add your own new functions into the widget if you want
         new_function_name: function() { }
      });
   }
});

Code Breakdown

Line / Code Snippet	Purpose & Best Practices
$(document).ready(…)	Waits for the DOM to load before executing.
if(typeof($.custom.notes) !== “undefined” …)	Validates that the widget, active user session, and compatible HireHop API version exist before attempting to overwrite.
$.widget(“custom.notes”, $.custom.notes, {…})	Merges your new custom methods directly into the existing widget object.
_init_main: function() { … }	Overrides the default initialisation method.
this._super(arguments);	Executes the original parent function before applying your customisations.
$(“”, …).insertAfter(this.btnRefresh);	Inserts the new element. Always reference internal element variables (like this.btnRefresh) rather than dynamic element IDs, which change per instance.
new_function_name: function() { }	Demonstrates how to append brand new helper functions to the existing widget scope.

Cache Management & Versioning

Because the NoHTML framework heavily caches JavaScript files for maximum speed, browsers will not automatically fetch updated plugin files when you push changes.

To force client browsers to clear their cache and download your latest script, append a versioning query parameter to your plugin URL in Company Settings:

• Initial Version: [https://www.mywebsite.com/plugin.js?v=1](https://www.mywebsite.com/plugin.js?v=1)

• Updated Version: [https://www.mywebsite.com/plugin.js?v=2](https://www.mywebsite.com/plugin.js?v=2)

Working Demo

To see a live plugin in action, add the following URL to your plugin settings: [https://myhirehop.com/plugins/title_bar.js](https://myhirehop.com/plugins/title_bar.js)

This script adds a quick-access header widget on Job pages that allows authorized users to switch depots via a dropdown menu. Inspect the source file to see how it structures UI additions.