HomeGuidesAPI Reference

Implementing customizations

Learn about the practical aspects of implementing customizations on a hub front end

Suggest Edits

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:

  1. Create a custom code block
  2. Enter HTML, CSS, or JavaScript code into the block
  3. Specify where on the page the code should be injected (the placement)
  4. 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

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.
  • Custom code blocks have technical limitations. They only accept standard CSS and JavaScript ES5, so hosting code directly in custom code blocks means you are not able to use a CSS preprocessor (like Sass/LESS) or more modern versions of JavaScript.

For developers who are making extensive changes to a hub front end, we suggest following these guidelines:

General

Use a version control system and host your code outside of Uberflip. Services like GitHub generally offer both of these capabilities.

HTML

The HTML of hub front end pages is fixed, and can't be edited directly. In addition to the reasons mentioned above, we do not recommend writing HTML directly into custom code blocks as you can't precisely control placement. Instead, use JavaScript to manipulate the DOM: write HTML directly into your JavaScript to dynamically and precisely insert it into the hub front end.

CSS

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.

JavaScript

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.:

<script src="https://www.mywebsite.com/myscript.js"></script>

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.

❗️

Caution

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 3 years ago

What’s Next

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:

x