You might find yourself in a situation where you need to add custom Javascript to the Bloxby page builder or one or more of the other pages within the application.

As of version 1.1.0, this process has been simplified by the introduction of customization modules. In the /assets/js folder, you’ll find a folder named “custom”. Within this folder, you’ll find a Javascript file for each section of the Bloxby application. To include your custom code, simply edit the correct file, add your code and run Webpack. By default, the file contents will look something like this:

/*
	Use this module to load custom JS in the block_editor page
*/

(function () {
    "use strict";

}());

You would add your custom Javascript code inside the function statement, something like this:

/*
	Use this module to load custom JS in the block_editor page
*/

(function () {
    "use strict";

    console.log('Hello world!');

}());

This would result in the console output “Hello world!” being shown in the block editor page.

Please note that after making changes to the Javascript files, you will need to run Webpack for the changes to be included in your application’s front-end bundles.

The custom module files

Below we’ll go through the available files and specify to which section of Bloxby they belong:

• block_editor.js – this file belongs to the block source code editor
• builder.js – this file belongs to the Bloxby page builder
• elements_blocks.js – this file belongs to the Blocks panel
• elements_browser.js – this file belongs to the Elements File Browser
• elements_components.js – this file belongs to the Components panel
• images.js – this file belongs to the Images panel
• inblock.js – this file gets loaded inside each block iframe on the canvas
• login.js – this file belongs to the login page
• packages.js – this file belongs to the Packages panel
• register.js – this file belongs to the Registration page
• sent.js – this file belongs to the confirmation page shown after a form has been submitted
• settings.js – this file belongs to the Settings panel
• sites.js – this file belongs to the Sites panel
• templates.js – this file belongs to the Templates section
• users.js – this file belongs to the Users panel