Learn about the practical aspects of implementing customizations on a hub front end
How to implement customizations
To implement customizations in an Uberflip hub, you create and configure custom code blocks in the hub backend. To do this, you simply:
- Create a custom code block
- Specify where on the page the code should be injected (the placement)
- Activate the custom code block
As soon as a custom code block is activated, the code it contains will be injected into all pages in the corresponding hub front end on load.
You can find detailed instructions on how to use custom code blocks in Uberflip in this article from the Uberflip knowledge base.
Uberflip Apps also have the ability to inject code into hubs in the same way as backend custom code blocks. As a result, you also have the option of "productizing" your customizations by developing them as apps for the Uberflip Marketplace. To learn more, see the guide to building Uberflip apps.
Guidelines for using custom code blocks
The custom code block functionality was originally intended for minor code tweaks, such as injecting pre-packaged code snippets like tracking pixels. While you could use custom code blocks to host all of your customization code, we do not recommend doing this.
Custom code blocks were not designed to host extensive or complex code, and lack important functionality as a result. Specifically:
- Custom code blocks do not have version control. When you host code directly in a custom code block, older versions are not retained when you or another developer makes a change, so it is not possible to roll back changes. It is also not possible to see who made a change, when it happened, or what was changed.
For developers who are making extensive changes to a hub front end, we suggest following these guidelines:
Use a version control system and host your code outside of Uberflip. Services like GitHub generally offer both of these capabilities.
Use external stylesheets. Host your stylesheet on a publicly accessible URL and use
<link> to point to it in Uberflip custom code blocks, e.g.:
<link rel="stylesheet" type="text/css" href="https://www.mywebsite.com/mystylesheet.css">
For the custom code block, use the placement Head to inject it into the
<head> of the document.
Use external scripts. Host your script on a publicly accessible URL and use the
src attribute to point to it in Uberflip custom code blocks, e.g.:
For the custom code block, use the placement Body Bottom to inject it just before the
</body> tag of the document.
You may use jQuery and other libraries, however they are not included in the Uberflip hub front end by default, so you must bring them into a hub from a CDN.
Testing and deployment
When you enable a custom code block, the code it contains becomes active immediately: on the next load of any hub front end page, this code will be injected in the specified location. As a result, there is no special procedure required to deploy or begin testing changes on the Uberflip side.
Because custom code block changes take effect immediately, you should not publish a hub (or allow it to be indexed by search engines) until development and testing is complete.
Updated almost 2 years ago
Next, see the reference guide for hub front end pages for in-depth information about the various parts of the hub front end, and how to target them for customization: