Email signature generator not working

[MLatulippe]

Hi! We've been using Hubspot's email signature generator for some time now but I'm having trouble creating a new signature today. I can create the signature fine in Hubspot, but it comes out very weird (both when I copy the image and with the source code). 

What can I do about this?

Thanks for your help 

What it looks like in the generator: 

How it comes out: 

<table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: top;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="text-align: center;"><img src="https://kimoby.com/hubfs/Sarah_Kimoby_2.png" role="presentation" width="130" style="max-width: 128px; display: block;"></td></tr><tr><td height="30"></td></tr><tr><td style="text-align: center;"><img src="https://kimoby.com/hubfs/logo-kimoby/kimoby-logo_g-black.png" role="presentation" width="130" style="max-width: 130px; display: block;"></td></tr><tr><td height="30"></td></tr><tr><td style="text-align: center;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; display: inline-block;"><tbody><tr style="text-align: center;"><td><a href="https://www.facebook.com/kimobySMS/" style="display: inline-block; padding: 0px; background-color: rgb(57, 106, 252);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png" alt="facebook" width="24" style="background-color: rgb(57, 106, 252); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://ca.linkedin.com/company/kimoby" style="display: inline-block; padding: 0px; background-color: rgb(57, 106, 252);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" width="24" style="background-color: rgb(57, 106, 252); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td><td><a href="https://www.instagram.com/_kimoby_/" style="display: inline-block; padding: 0px; background-color: rgb(57, 106, 252);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" width="24" style="background-color: rgb(57, 106, 252); max-width: 135px; display: block;"></a></td><td width="5"><div></div></td></tr></tbody></table></td></tr></tbody></table></td><td width="46"><div></div></td><td style="padding: 0px; vertical-align: middle;"><h2 style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Sarah</span><span>&nbsp;</span><span>Pigeon</span></h2><p style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Account Manager</span></p><td style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Shaping the future of automotive customer experience together.</span></td><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; width: 100%;"><tbody><tr><td height="30"></td></tr><tr><td width="auto" style="width: 100%; height: 1px; border-bottom: 1px solid rgb(57, 106, 252); border-left: none; display: block;"></td></tr><tr><td height="30"></td></tr></tbody></table><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(57, 106, 252);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" alt="mobilePhone" width="13" style="display: block; background-color: rgb(57, 106, 252);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:+1 877-248-0204" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>+1 877-248-0204</span></a></td></tr><tr height="25" style="vertical-align: middle;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(57, 106, 252);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" alt="website" width="13" style="display: block; background-color: rgb(57, 106, 252);"></span></td></tr></tbody></table></td><td style="padding: 0px;"><a href="//www.kimoby.com" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>www.kimoby.com</span></a></td></tr></tbody></table><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td height="30"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

[snowtiger]

I got a signature to work at the end of Feburary but it wasn't traslating correclty to iphones. Since then I've been trying every few days to create a new signature but there's alwasys something not fully functioning (the hubspot isn't being taken off of all the templates, google won't accept the new signature, the url isn't be accepted etc). Mostly that the urls aren't being accepted (despite being accepted at the end of Feburary). I've uploaded them to dropbox multiple times but still nothing. I've tried a different browser and tried inconito (not sure what that would do but was just trying everything). Thoughts? Thanks!

[Anton · Accepted solution]

Hey @MLatulippe, 

did a bit of code-cleaning since I'm quite familiar with the email-signature "hickups"... 

Try this code:

<table  border="0" cellspacing="0" cellpadding="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
  <tbody>
    <tr>
      <td>
		  <table>
          	<tbody>
           	  <tr>
              	<td>
				  <table>
                  <tbody>
                    <tr>
                      <td colspan="2" style="text-align: center;"><img src="https://kimoby.com/hubfs/Sarah_Kimoby_2.png" role="presentation" width="130" style="max-width: 128px; display: block;"></td>
                    </tr>
                    <tr>
                      <td height="30" colspan="2"></td>
                    </tr>
                    <tr>
                      <td colspan="2" style="text-align: center;"><img src="https://kimoby.com/hubfs/logo-kimoby/kimoby-logo_g-black.png" role="presentation" width="130" style="max-width: 130px; display: block;"></td>
                    </tr>
                    <tr>
                      <td height="30" colspan="2"></td>
                    </tr>
                    <tr style="border:1px solid red" bordercolor="red" border="1">
                            <td width="11" align="center" style="text-align:center; width:24px;">
								<a href="https://www.facebook.com/kimobySMS/" style="display: inline-block; padding: 0px; background-color: rgb(57, 106, 252);">
									<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png" alt="facebook" width="24" style="background-color: rgb(57, 106, 252); display: block;">
								</a>
								<span style="width:5px;">&nbsp;</span>
								<a href="https://ca.linkedin.com/company/kimoby" style="display: inline-block; background-color: rgb(57, 106, 252);">
									<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png" alt="linkedin" width="24" style="background-color: rgb(57, 106, 252); display: block;">
								</a>
								<span style="width:5px;">&nbsp;</span>
								<a href="https://www.instagram.com/_kimoby_/" style="display: inline-block; padding: 0px; background-color: rgb(57, 106, 252);">
									<img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png" alt="instagram" width="24" style="background-color: rgb(57, 106, 252);  display: block;">
								</a>
						</td>

                        
                          </tr>
                  </tbody>
                </table></td>
				  <td width="30">&nbsp;</td>
              <td>
				  <table>
					  <tbody>
						  <tr>
							  <td>
								  <h2 style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;">Sarah&nbsp;Pigeon</h2>
								  <p style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">Account Manager</p>
								  <p style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">Shaping the future of automotive customer experience together.</p>
								  <p style="font-size:10px;">&nbsp;</p>
								  <p style="background-color:rgb(57, 106, 252); width:100%;font-size:2px">&nbsp;</p>
								  <p>&nbsp;</p>
							  </td>
						  </tr>
						  <tr>
                      <td style="vertical-align: bottom;">
						  <span style="display: inline-block; background-color: rgb(57, 106, 252);">
							  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" alt="mobilePhone" width="13" style="display: block; background-color: rgb(57, 106, 252);">
						  </span>
						  <a href="tel:0018772480204" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>+1 877-248-0204</span></a>
					</td>
                    </tr>
						  <tr><td>
							  <img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" alt="website" width="13" style="display: inline-block; background-color: rgb(57, 106, 252);">
							  <a href="//www.kimoby.com" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>www.kimoby.com</span></a>
							  </td></tr>
					  </tbody>
				  </table>
			</td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>

Technical explenation(not 100% sure, but I'm seeing those "requests"/questions quite often in the community):

Since email clients are working on technologies that are way older than browsers, they don't "understand" modern code and there's almost no "common ground".

For instance: The outlook desktop app is running on the same code base as Word(yes, Word) while Outlook online(if you open the 365 suite) is running on something different. GMail in the browser is different than a GMail Smartphone/tablet app and there are even differences between the iOS and Android version... And GMail tends to strip every email appart and "reconstruct it" to it's own logic.

TL;DR: A developers nightmare.

(I've spent months optimizing a single email template for the majority of clients a client/company asked for once)

So... Because of the whole "every email client does it's own thing" the only safe solution is to create a bunch of (nested) tables. And this is what the HubSpot signature generator does. It creates a bunch of tables. Even where they might be not required. This can lead to "code-confusion" which results in the not desired outcome.

best, 

Anton

[MLatulippe]

Wow, thank you for your help Anton! 

We will be looking for an alternative moving forward to avoid having this issue arise with new employees. 

I appreciate your help on this. Thanks again! 

[MLatulippe]

Hi Pam, 

Thanks for your help, but none of these seem to be working.  I think the problem is with the HS generator.

[PamCotton]

Hey @MLatulippe, thank you for posting in our Community!

It seems there might be an issue with how the signature is being copied over. Try pasting it into a plain text editor first, then copying it again into your email client. 

You could also test generating the signature in a different browser or incognito mode to see if that resolves the issue.

Let us know how this works.

Pam