• Projects
  • Blog

Build a user arrangeable email using custom HTML modules in Hubspot

Hubspot's templating language is powerful but you can't use it if you want to arrange your own email templates. Well now you can!

Posted: 20th September 2023

Powerful templating but missing a key feature

Hubspot has an incredibly flexible templating language called HubL (HubSpot Markup Language) which allows email developers to create templates with custom fields, conditional logic and loops - things we’re not used to having with other email platforms!

Unfortunately they’ve haven’t married this with their drag and drop editor so this limits your options if you want a user arrangeable custom coded email template fine tuned for accessibility, dark mode, custom fonts, Outlook compatibility and responsive layout.

Fortunately, HubL’s power gives us an opportunity to build a UI within a UI to get us close to achieving a flexible email builder!

Starting on a DRY foundation

I like to keep my files and templates DRY so I don’t have to repeat my code again and again.

I’ve written an article on how I code Hubspot email templates using a DRY approach which you should have a look at first as it will explain why I’m not showing you a full email template.

The user arrangeable template

This is the main event, the actual template you choose when you create an email in Hubspot.

Extend with main.html file

First we need to give a destination for the output of this template and we do that by extending the main.html file which we created in the previous article.

Define the maximum number of slots available

Next we define a variable called {{sections}} and a range of slots available to the editor to build the email. Here we’re allowing 1-8 slots but we can go higher if need be. When the editor chooses a number, it gets stored in {{sections}}.

List the modules available to choose from

Now we need to create a list of modules that can be picked to populate those slots. The first part creates a variable called {{layout}} followed by a list of the modules that can be chosen (these can be called whatever you want for now).

Build the module chooser UI based on slots chosen

Here we can leverage HubL’s export_to_template_context parameter to write back to the user interface and give us a series of slots based on the editor’s input. The template will show a corresponding number of drop downs, each one populated with the modules that we’ve made available in the layout variable.

Output the modules in the order chosen

The last bit simply loops through a series of IF statements to check which module was chosen for each given slot and shows each module underneath on the left. To edit the content just click on the module name just like you would a standard custom module template!

Refresh the page!

Sadly there isn’t a way to update the page after each choice so you’ll have to remember to refresh the page each time.

User arrangeable template in action

You can view the template UI in action in this YouTube video. Let me know what you think!