Reusing default theme modules for emails

[danxshap]

Hey all, our company is new to HubSpot and we’re going through the initial setup process right now, primarily for marketing emails.

I’m a developer helping our marketing team, and so far they’ve been able to design emails to their satisfication with the default theme using the drag-and-drop email editor.

We’re building a lot of automated emails sent via workflows, and at the bottom of every email we’ve been adding a section (1-column layout) that inclues the Social module, an image, and then the Footer module.

Is there any way we can create a custom module for this whole lower section so that we can manage it globally in one place?

A few example use cases would be:

- We want to add a new social link to the bottom of every email

- We want to conditionally display or not display some new text at the bottom of every email depending on a contact property value (e.g. for a week-long promo)

- We want to change the background color of the lower section for every email

Ideally we could just make these changes in the module, and then all of the automated emails that use this module would reflect the changes.

I’ve figured out how to create a custom module and use it in programmable emails, but only with raw HTML/HubL — so it seems like I would need to rebuild all of the email-client-friendly HTML that HubSpot generates for its default Social module, Footer module, etc…

Is there any way I can include or reuse those default modules in my custom module so that I can take advantage of the email-client-friendly markup that HubSpot generates and add my custom content/markup/HubL logic around it?

I found this article that looked promising, but then I discovered that it’s N/A because our emails aren’t using a custom email template set up in the design manager, we’re just building them in the drag-and-drop editor using the default theme.

[Anton]

Hey @danxshap,

of course you can create a global module with all needed styles and functions!

Important note:
If you create a global module all settings will be the same through all instances. This means - if you decide to display some sort of promo only in a few emails - and you apply some changes to this global module it will apply the changes to all emails with this module. If you want to have different variations I’d suggest to create a “local module”, create several modules with almost the same functionality or use a “layout” macro (quite advanced technique) for your layout and edit it through some conditional logic inside the module…

A few things to keep in mind since this is gonna be an email module:

• email modules should be written with tables (divs might not work properly in different clients)
• Functions like {% include_css %} or js are not supported
• JS is not supported
• media-queries won’t work
• <style>-tags will be dropped in Gmail (and almost all other clients) so make sure to use inline-styling only

My recommendation is to create the desired layout with the drag&drop editor, preview it in the browser, inspect it with the browsers inspector tool and re-use all default HubSpot classes in your module. By doing so you’ll get the responsiveness with ease since HubSpot adds media-queries into the <head>-tag (which is not accessible in the drag&drop editor).

For the address and subscription links - which are required in any marketing mail. Clone the “email_can_spam” module which is located in the @hubspot folder(design-tools), open the source-code of the rich-text and copy paste everything in your custom module (and style them).
Before publishing an email HubSpot is checking if the required email variables are included. How they’re getting added to the email doesn’t really matter.

For socials:

upload the ready-to-use images to your file-manager and use them in a module. Styling table-cells is not that easy and won’t work properly in clients
My recommendation: Use a repeater/loop with an image and a link function for this.

Here’s a somewhat basic example:

...
<tr>
{% for item in module.social_networks %}
{% if loop.first %}{# this if-statement will set a padding according to the loop instance; it's optional #}
{%- set padding = "padding-right:4px;" -%}
{% elif loop.last %}
{%- set padding = "padding-left:4px;" -%}
{% else %}
{%- set padding = "padding-left:4px; padding-right:4px;" -%}
{% endif %}
	<td height="24" width="24" style="height:24px;width:24px;{{ padding }}">
		{% set href = item.link.url.href %}
		{% if item.link.url.type is equalto "EMAIL_ADDRESS" %}
		{% set href = "mailto:" + href %}
		{% endif %}
		<a href="{{ href }}" {% if item.link.open_in_new_tab %}target="_blank"{% endif %} {% if item.link.rel %}rel="{{ item.link.rel }}"{% endif %}>
			<img src="{{ item.image.src }}">
		</a>
	</td>
	{% endfor %}
</tr>
...

If you want to change the background color per mail - a global module is the wrong approach. Create a “local” module instead

best,

Anton

[Jaycee_Lewis]

Thank you, Anton! — Jaycee

[danxshap]

Hi Anton, thank you very much for this detailed response!

I was hoping there was some way to reuse the built-in drag-and-drop modules without having to hard-code the markup in my template — partly so I don’t have to worry about email client idiosyncracies but also so I can automatically benefit from any updates Hubspot makes to those modules in the future.

But knowing that’s not an option, that’s a very useful tip you shared about inspecting the rendered output of a sent email from a drag-and-drop template and grabbing the markup from there so that mine at least matches Hubspot’s as of now.

Thanks again!