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!
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.
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!
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.
You can view the template UI in action in this YouTube video. Let me know what you think!