Building custom email footer components in HubSpot

Other Questions HubSpot
1

I’m just starting out with web development and need to create a custom footer component for emails in HubSpot. The whole process seems overwhelming and I’m struggling with the inline CSS requirements for email templates. Can anyone share tips on working with HubSpot’s module system? Also wondering if HubL template variables work properly when embedded in HTML email code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Email Footer Template</title>
        <style type="text/css">
          .OuterClass {width: 100%;}
            table {border-collapse:collapse;}
            a, a:link, a:visited {text-decoration: none; color: #0A7B64;}
            a:hover {text-decoration: underline;}
            h1,h1 a,h1 a:visited,h2,h2 a,h2 a:visited,h3,h4,h5,.heading_text {color:#000000;}
            .OuterClass p, .OuterClass span, .OuterClass font, .OuterClass td {line-height: 100%;}
            .OuterClass {width: 100%;}
  @media screen and (-webkit-min-device-pixel-ratio:0) {
   			(min-device-width: 601px)
    width: 600px !important;

  .column400 {
    width: 400px!important;
}

  .column450 {
    width: 450px!important;
  }

  .column400 {
    width: 400px!important;
  }
}
</style>
    </head>
    <body bgcolor="#f8f9f2" style="margin: 0; padding: 0; min-width: 100%;">
        <table width="100%" bgcolor="#f8f9f2" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                  <!--[if (gte mso 9)|(IE)]>
  <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <![endif]-->
          </td><td class="bottom_section" bgcolor="#ffffff" style="padding: 25px 35px 20px 35px;">
              <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                      <td align="center" class="contact_info" style="color: #B5B5B5; font-family: Arial; font-size: 11px; mso-line-height-rule:exactly";>
                          <em>Copyright &copy; 2024 TechSolutions Inc, All rights reserved.</em><br>
                          Contact information:<br>
                          {{ site_settings.business_name }}<br>
                          {{ site_settings.business_address }}<br>
                          {{ site_settings.business_city }}, {{ site_settings.business_state }} {{ site_settings.business_postal }}<br>
                          555-123-4567<br>
                          <a class="contact_link" href="mailto:[email protected]" style="color: #C8A615; text-decoration: underline;">[email protected]</a><br>
                          Want to modify your email preferences?<br>
                          <a class="preference_link" href="{{ unsubscribe_link }}" style="color: #0A7B64; text-decoration: underline;">Update your settings</a> or 
                          <a class="unsub_link" href="{{ unsubscribe_link_all }}" style="color: #0A7B64; text-decoration: underline;"> Remove from all lists.</a>
                      </td>
                  </tr>
                  <tr>
                <td align="center" style="padding: 15px 0 0 0;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                        </tr></table></td>
                                  </tr>
                              </table>
                        </td></tr>
                    </table>
                    <!--[if (gte mso 9)|(IE)]>
                      </td>
                      </tr>
                      </table>
                    <![endif]-->
    </body>
</html>
2

biggest newbie mistake? not testing in outlook first - it’ll break everything. your hubL vars look good, but that media query around line 15 is totally broken. hubspot’s module builder is decent once you get the hang of it. don’t try doing everything at once tho. start with basic text/image modules, then move up to custom stuff. those ie conditional comments are outdated now, but they won’t hurt anything.

3

HubSpot email footers are tricky at first, but you’re on the right track with those HubL variables. I’ve built custom email components for three years and learned the hard way - test across different email clients religiously. Your footer structure looks good, but wrap more styles inline instead of relying on head styles. Outlook hates external CSS. Start with a simple module in HubSpot’s design manager, then add complexity gradually. The module system makes reusability way easier once you figure it out. Don’t trust HubSpot’s email preview tool - it misses rendering issues. I always send tests to multiple clients before going live.

4

Your code’s heading in the right direction - HubL variables work great in email templates. I’ve used {{ site_settings.business_name }} and similar tokens for years without any problems. Your CSS has a broken media query around the webkit section though. You’re missing the and operator and have some malformed rules that’ll cause rendering issues in certain email clients. The inline styles are smart since many clients completely strip out <style> blocks. For HubSpot modules, start with their drag-and-drop email editor first. Learn how the module structure works before jumping into custom HTML. It’s a steep learning curve but totally manageable if you take it step by step.

5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.