I have created several modules for the CMS and want to do the same for email. I know email HTML and CSS has different requirements so I’m prepared to inline my CSS and use table syntax. I have not found any up-to-date documentation on email modules, and all email dev docs and forum threads refer to the outdated drag and drop area editor.
Ideally, I would be able to code a module using the Module component that contains editable fields. The module component will appear in the Email drag and drop editor. Then, content editors will be able to use these components for their emails.
I’m wondering if this is possible and where are the updated docs for developing email modules and templates.
Hi @EdCupaioli
While it seems like the custom email templates fell out of favor once the improved drag and drop experience was introduced due to how easy it is to create emails, there are still some use cases for custom modules (such as programmable emails) and creating them is still possible.
When setting up a module in the Design Manager, you will need to select “Emails” to make it available for email templates
You will notice a warning that CSS and JavaScript will be unavailable, so the module will only accept HTML, HubL or in-line CSS (with one possible exception, below).
There used to be a trick you could use to in order to automatically apply inline styles to your elements without having to copy/paste it for each one.
Not sure how well it works still and whether it would clash with other elements in the email, but as an example from that article, adding the below style rule would make all your <td> elements have the Arial font-family:
<style type="text/css" data-hse-inline-css="true">
td {
font-family: Arial, sans-serif;
}
</style>
If the results are not great, then obviously inline styles will be the way to go. Sounds like you are already prepared to utilize the table syntax as well.
Besides that, everything else works the same as a web page module - you can add individual fields, group them, add repeaters, etc. Once the email module is published, it will be available to pull in when creating/editing emails in the “More” selection:
Hope this helps!
Thanks for this info. I’ll play around with it and test the limits. I was going to use Maizzle to create emails but I’m trying to fully embrace the hubspot CMS which has been pretty great.
I had seen the docs on programmable email and the inlining of CSS but was unsure how it all came together in the module. Turns out I just needed to check the box for email so thank you for that nudge in the right direction. I’m still unclear on what makes an email “programmable” other than being able to use HubL and from what you said and I have observed, hubspot seems to want you to use the drag and drop editor for simple, compatible emails. I’m of that same mindset too but clients want the fancy stuff so I want to be prepared with bespoke modules based on whatever the designer throws my way.
It used to be that the extent of “programmability” was limited to personalization tokens in emails. In short, programmable emails allow using HubDB and Custom Objects, which can help in creating highly customized emails (i.e. sending real estate listings for someone living in a specific zip code).
I’d say if clients want bespoke modules, then give them bespoke modules - nothing wrong with that and it can even help in some situations when a module has guardrails.
Lastly, if you were not aware, there is an email client testing feature that’s not really needed for the default drag and drop modules, but highly suggest using this for testing custom templates/modules - you can even preview it as a contact in case there is some logic applied:
Default selections are a bit outdated but there is a large selection of email clients to choose from.
