Add Custom Code to Your Hub

Follow

Learn how to use the Custom Code feature to customize nearly any aspect of your Hub's appearance and functionality.


 

Before You Begin

  • To use Custom Code, you need to be an Account Admin or Content Manager.
  • The Custom Code feature is very powerful, and choosing to use it comes with certain caveats and limitations. Before you proceed, please carefully read the notes below to decide if using the Custom Code feature is right for you.
  • If you do not feel comfortable using Custom Code yourself, but want to take advantage of the customization options it offers, our OnBrand Team can help. For more information, please contact your Customer Success Manager or Uberflip Support.

IMPORTANT: Using Custom Code in your Hub

  • If you choose to use Custom Code in your Hub, you do so at your own discretion. We are not able to provide development assistance, and troubleshooting support may be limited depending on the nature of the problem.
  • The current Uberflip code structure that your Custom Code is built on (such as CSS selectors, JavaScript events, etc.) may change at any time and without prior notice. It is your responsibility to maintain your Custom Code to adjust for such changes.
  • If you experience problems with Custom Code and need help from our Support Team, you may need to disable your Custom Code.
  • We don't provide a comprehensive reference of all element IDs, classes, etc. To target specific hub elements for customization with Custom Code, you will need to use your browser's Developer Tools to inspect your Hub and identify the relevant elements.

 

What Does Custom Code Do?

Uberflip comes with a variety of built-in options for customizing the look and feel of your Hub. But what if you have a vision for your Hub that you can't achieve with these tools? If you're comfortable with writing code, you can use the Custom Code feature to go beyond the standard customization options and change your Hub's appearance and functionality in all kinds of ways.

With Custom Code, you can create your own snippets of code in HTML, CSS, JavaScript, or any combination of these languages. You can then add these snippets to your Hub, and run them on top of the code that runs the Hub.

Here are just a few of the things you can do with Custom Code:

  • Customize your Hub's design elements, including menus, text, images, and more
  • Modify the behaviour of different Hub elements, such as Item Tiles and CTAs
  • Import and use custom fonts
  • Add tracking pixels and other third-party scripts and plugins to your Hub

Need a little inspiration? Check out our Hub Hacks to see a variety of prebuilt code snippets.

 

How Do I Use Custom Code?

To use Custom Code in your Hub, you create Custom Code blocks. These blocks contain your code snippets along with metadata about the block, such as its name and a brief description of the code functionality.

Organizing into blocks makes it easy to manage your Custom Code. You can see at a glance what you've added to your Hub, and can quickly enable or disable specific code snippets by toggling their respective blocks on and off.

Within a block, you can create code snippets with any combination of HTML, CSS and JavaScript, and define the placement of the snippet within the larger Hub code.

Lastly, if you use Custom Code to implement tracking pixels or other functionality with privacy implications, you can assign specific blocks to Privacy Groups. These are tied to settings that visitors to your site can use to opt into or opt out of tracking scripts, which is a GDPR compliance requirement. You can find more information about Privacy Groups and how to use them in this article.

 

Step 1: Create a Custom Code Block

If you want to deploy Custom Code on your Hub, the first thing you need to do is create a new Custom Code block to contain the code.

  1. Log in to your Uberflip account and navigate to the Hub where you want to add the Custom Code block.
  2. In the sidebar menu on the left, click on Appearance, then click on Custom Code.
    Hubs___Custom_Code_-_Uberflip.png
  3. The Custom Code menu will appear on the right. In the grey bar below the heading, click on the +Add Code button.
    Hubs___Appearance_-_Custom_Code_-_Uberflip.png
  4. The Add New Code window will appear. Here, type in a Name and a Description for the block into the corresponding fields. These will help you to identify the block and its purpose/functionality later. When you're ready to proceed, click on Add Code.
    Hubs___Appearance_-_Custom_Code_-_Uberflip.png
  5. Your Custom Code block will be created, and you'll be taken to the Edit block page, where you can enter your code.

Item-Level Custom Code Blocks

By default, Custom Code blocks are added at the Hub level, and the code they contain is inserted into every page on your Hub. As this is the way Custom Code is most commonly used, the instructions in this article assume that you are creating Hub-level Custom Code blocks.

Alternatively, you can also create Custom Code blocks at the Item level. The code contained within these blocks will be inserted into only that Item's page, not the rest of the Hub.

To create a Custom Code block on a specific Item, navigate to the Item (under Content > Items tab) and then click on Edit Item. Here, click on the Custom Code tab:

Hubs___Edit_Article_-_Uberflip.png

The process for creating and working with Item-level blocks is otherwise identical to Hub-level blocks, so the instructions in this article are directly applicable.

 

Step 2: Choose a Placement

With the block created, you now need to choose where the code will be placed within the HTML of your Hub. In general, the placement of your code will determine where it is loaded as each page of your Hub loads. The available placements, and the order in which they're loaded, are:

1. Head
Code is placed immediately before the </head> tag, i.e. at the very end of the Head section.
2. Body Top
Code is placed immediately after the <body> tag, i.e. at the very beginning of the Body section.
3. Below Footer
Code is placed immediately after the </footer> tag, i.e. right after the end of the Footer section.
4. Body Bottom
Code is placed immediately before the </body> tag, i.e. at the very end of the Body section.

For example, all the code in the Head section will be loaded before any code in the Body Top section, and so on.

Within the HTML document, the placements look like this (standard Hub code refers to Uberflip's own code that runs the Hub):

<html>
<head>
<!-- Standard Hub code goes here -->
<!-- Custom code in Head goes here -->
</head>
<body>
<!-- Custom code in Body Top goes here -->
<!-- Standard Hub code goes here -->
<footer>
<!-- Standard Hub code goes here -->
</footer>
<!-- Custom code in Below Footer goes here -->
<!-- Standard Hub code goes here -->
<!-- Custom code in Body Bottom goes here -->
</body>
</html>

Below are some general guidelines for choosing a placement:

Type Placement Reason
All CSS Head Loads the CSS before the rest of the page, ensuring that the page loads fully styled.
All JavaScript

Body Bottom

JavaScript can take a long time to load; loading it last avoids slow loading of the rest of the page.
Tracking Scripts

Body Bottom (jQuery)

Head (non-jQuery)

Tracking scripts that use jQuery must be placed in Body Bottom (otherwise an error will be thrown).

All others can be placed in Head.

For more information about using jQuery, see the note below.

Corporate header Body Top Places your corporate website's header above all visual elements belonging to the Hub.
Corporate footer Below footer Places your corporate website's footer below all visual elements belonging to the Hub.

To choose the placement of your block, click on the Code tab on the Edit block page:

Hubs___Custom_Code_-_Uberflip.png

Then, use the dropdown menu under Placement to choose the placement you want to use.

Hubs___Custom_Code_-_Uberflip.png

Warning

This dropdown will immediately change the placement of the Custom Code block!

In other applications, you may have encountered similar dropdowns which are used to browse and view the code in different parts of an HTML document. This dropdown does not work the same way!

The Placement dropdown only specifies the placement of the Custom Code displayed below it, so changing the selection will change the placement of the code. This can have unexpected negative effects on your Hub's appearance and functionality, so please use caution when using it.

 

Step 3: Enter Code

Once you've chosen where to place it, you can add the actual code to your block. This can be HTML, CSS, JavaScript, or any combination. Simply type your code directly into the box provided on the Code tab of the Edit Block page:

Hubs___Custom_Code_-_Uberflip.png

The placement you chose will determine the tags shown above and below the code box, i.e. if you chose Head, then you would see <head> and </head> tags above and below the code box, respectively.

Keep the following in mind when entering your code:

  • Simply type HTML directly into the field
  • To include CSS, enclose the CSS code within <style> tags
  • To include JavaScript, enclose the JavaScript code within <script> tags
    • You can find a reference to Uberflip JavaScript Hub events that you can hook into in this article.

Important

Uberflip loads the jQuery 3.3.1 library into all Hub code by default. To use jQuery in your custom code, simply write jQuery within <script> tags, using the Body Bottom placement.

Please do NOT link the jQuery library from jQuery's public CDN in your code. Doing so can cause conflicting versions of jQuery to be loaded, which can break key functionality in your Hub.

You can  expand the code box to fullscreen by clicking on the Expand button in the top right:

Hubs___Custom_Code_-_Uberflip.png

To save your code at any time, click on the Save button in the lower right corner:

Hubs___Custom_Code_-_Uberflip.png

Changes to the code you enter aren't saved automatically, so remember to save your work regularly!

 

Step 4: Enable the Custom Code Block

The last step is enabling your block, which makes the code it contains take effect. To do that, simply toggle the switch under Enable Custom Code to the on (green) position:

Hubs___Custom_Code_-_Uberflip.png

This switch is accessible on the Edit block menu, regardless of whether you are on the Code Info or Code tabs.

Enabling a Custom Code block will cause all the code it contains to be used as part of your Hub. This change will take effect immediately.

At this point, you can also optionally choose to assign the block to a Privacy Group. For details about what Privacy Groups are, and how to set them up and use them, see this article.

 

Manage Custom Code

Whenever you create a Custom Code block, it is added to the Custom Code table in your Hub (Appearance > Custom Code):

Hubs___Appearance_-_Custom_Code_-_Uberflip.png

This table lists every existing Custom Code block in your Hub. For each block, you can see:

  • Order: The order in which the block is loaded, relative to other blocks with the same placement
  • Name: The name that was given to the block
  • Description: The description that was entered for the block
  • Placement: The block's placement
  • Privacy Group: The Privacy Group that the block is assigned to, if any
  • Enabled Status: Whether or not the block is currently enabled

From here, you can enable/disable blocks, edit/delete blocks and change the block order.

Enable or Disable Blocks

You can quickly enable or disable any block directly from Custom Code table. Simply use the toggle switch to the right of the block you want to enable or disable:

Hubs___Appearance_-_Custom_Code_-_Uberflip.png

Your change will take effect immediately.

 

Edit or Delete Blocks

You can make changes to an existing block, or delete it, at any time. To do that, hover your mouse over the block in the Custom Code table, and the Edit and Delete buttons will appear:

Fullscreen_2019-01-07__12_46_PM.png

Click on the Edit (pencil) button to enter the Edit block menu, or on the Delete (trash) button to permanently delete the block.

 

Change Block Order

The order in which Custom Code blocks are inserted into the Hub code is determined by their placement. As a result, we generally recommend grouping related functionality into the same block, i.e. placing all CSS in a single block, etc. Within a single block, code is executed from top to bottom as normal, so you can determine the order in which functionality loads by structuring the code accordingly.

Sometimes, you may need to break out different functionality into separate blocks, for example if you need to be able to turn on and off specific tracking scripts independently of one another. If you have multiple separate blocks that all use the same placement, the order in which they will be loaded is the order shown in the Custom Code table:

Hubs___Appearance_-_Custom_Code_-_Uberflip.png

If needed, you can modify this order by assigning a specific place in the order to any given block. To do so, click on the block's order number under the Order column, which will make it editable:

Hubs___Appearance_-_Custom_Code_-_Uberflip.png

Now, simply type in the number in the order where you want the block to appear (or use the arrow buttons), and press Enter. The block will be moved to the specified position in the order:

Hubs___Appearance_-_Custom_Code_-_Uberflip.png

All other blocks affected by this change (i.e. any blocks below the new position of the block that was moved) will automatically be pushed down in the order by one position.

Keep in mind that all blocks will still be loaded based on placement first. For example, a block with a Head placement will always be loaded before a block with a Below Footer placement, regardless of their places in the order.

 

Notes

  • If you have OnBrand customizations in your Hub, keep in mind that these are also added as Custom Code blocks. While you are still able to add your own Custom Code, be careful not to accidentally disable the OnBrand blocks, or to modify the existing code inside them.
  • As a best practice, you should put all JavaScript in one block if possible. If you also have OnBrand customizations, this means placing your own JavaScript code in the same block as the OnBrand JavaScript code. In this case, your code should go above the OnBrand code.
  • All JavaScript must be ES5; ES6 is not supported.
  • When creating blocks, keep dependencies in mind: in some cases, a section of code might require other code that lives in a separate block to be executed first. The execution order is determined by placement and block order, so be sure to account for any dependencies when choosing your placements and/or order.
4 out of 4 found this helpful

Comments

2 comments
  • Is there no way to add custom code to a single stream? I'm trying to show the friendly timestamp on a single stream (it's removed by default for onBrand)

  • Hi Joshua! Unfortunately, it's not possible to limit a block of Custom Code to just a single Stream at this time — blocks can be Hub-level or Item-level. But Stream-level blocks are on our roadmap, so it will be possible in the future.

Please sign in to leave a comment.