Drag & Drop Email: How To Use A Custom Footer Module

Highlighted
HubSpot Employee

Hi guys!

 

As you all know, it's currently not possible to update/modify the text of the footer in the drag and drop email editor. You may need to send an email that is translated in another language or you may want to change the spelling of the 'Unsubscribe' or 'Manage preferences' text. 

 

Whatever it may be, you can get around this by creating a custom footer module.

Yes, we can use custom modules in drag and drop email templayes. Essentially, this will contain all the normal footer information (office location and unsubscribe links) along with the custom text that you want.

 

Are you ready? Let's get started!

 

1) Go to the design manager to create a new custom module as mentioned here:

 

create new file.JPGCreate a new file

custom module.JPGSelect 'Module'

 

save module.JPGApply & Save

2) Paste the following code in the HTML+HubL box:

<p id="footer" style="font-family: Arial, sans-serif; text-align: center; font-size: 12px; line-height: 1.00em; color: black; display: block;">
{{ site_settings.company_name }}, {{ site_settings.company_street_address_1 }}, {{ site_settings.company_street_address_2 }}, {{ site_settings.company_city }}, {{ site_settings.company_state }} {{ site_settings.company_zip }} {{ site_settings.company_country }} 
<br>
<br>
  <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link_all }}" style="text-decoration: underline; whitespace: nowrap; color: #00843D;">Unsubscribe</a> or update your <a class="hubspot-mergetag" data-unsubscribe="true" href="{{ unsubscribe_link }}" style="text-decoration: underline; whitespace: nowrap; color: #00843D;">email preferences</a>
</p>

P.S - You have the option to customize the Hubl tags for the unsubscribe text or email preferences text as mentioned here: https://knowledge.hubspot.com/articles/kcs_article/cos-general/build-a-custom-coded-template-in-hubs...

 

This is what it looks like in the preview:

 

preview module.JPGModule preview

 

Are we good so far? Great!

 

3) Apply your own style (e.g - change the text color) and publish the module.

 

4)  Go to the drag and drop email and swap in your new footer for the default one.

(Note - whenever you create a drag and drop email (there's not a way that we can have it pre-loaded by default).

 

Here is a helpful GIF on how to add it to the email: https://www.loom.com/share/a6b29ce400164cefbaff8ab8815e4652

 

5) Viola! You have your own custom footer module for your drag and drop template.

 

custom email.JPG

0 replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines