How to have an HTML email signature using Sendgrid

Questions
1

I want to add an HTML email signature with links associated with images (links to facebook using facebook icon as image) as well as businesses logo as image and click to email link function for the businesses email address.

What is the best way to do this? I’ve attempted to use a plugin to convert BBcode from a rich text editor to HTML but the images do not render, nor do the colors set on the text.

I’d like to use the native built in send email workflow action, but open to other ways if necessary.

Not looking to switch to other email provider, want to stay on Sendgrid.

2

You’ll have a base HTML template you just replace values with the users info and append the users “signature html” at the end of the email.

Checkout how they handle it : Free Email Signature Template Generator by HubSpot.

Here’s an HTML example (you’ll want to self host the images)

<table cellpadding="0" cellspacing="0" border="0" globalstyles="[object Object]" class="table__StyledTable-sc-1avdl6r-0 gZiJTA" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
    <tbody>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" border="0" globalstyles="[object Object]" class="table__StyledTable-sc-1avdl6r-0 gZiJTA" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                    <tbody>
                        <tr>
                            <td style="vertical-align: top;">
                                <h2 color="#000000" class="name__NameContainer-sc-1m457h3-0 gsCpOr" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;">
                                    <span>Chris</span><span>&nbsp;</span><span>Williamson</span>
                                </h2>
                                <p color="#000000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 hWtcow" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Job Title: CTO</span></p>
                                <p color="#000000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 eYVggq" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">
                                    <span>Department: Technology</span><span>&nbsp;|&nbsp;</span><span>Company Name: uncodeify</span>
                                </p>
                                <table
                                    cellpadding="0"
                                    cellspacing="0"
                                    border="0"
                                    globalstyles="[object Object]"
                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                    style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"
                                >
                                    <tbody>
                                        <tr>
                                            <td height="30"></td>
                                        </tr>
                                        <tr>
                                            <td
                                                color="#f86295"
                                                direction="horizontal"
                                                width="auto"
                                                height="1"
                                                class="color-divider__Divider-sc-1h38qjv-0 icFEOy"
                                                style="
                                                    width: 100%;
                                                    border-bottom-width: 1px;
                                                    border-bottom-style: solid;
                                                    border-bottom-color: rgb(248, 98, 149);
                                                    border-left-width: medium;
                                                    border-left-style: none;
                                                    border-left-color: currentcolor;
                                                    display: block;
                                                "
                                            ></td>
                                        </tr>
                                        <tr>
                                            <td height="30"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table
                                    cellpadding="0"
                                    cellspacing="0"
                                    border="0"
                                    globalstyles="[object Object]"
                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                    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"
                                                    globalstyles="[object Object]"
                                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"
                                                >
                                                    <tbody>
                                                        <tr>
                                                            <td style="vertical-align: bottom;">
                                                                <span color="#f86295" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 brbfIW" style="display: inline-block; background-color: rgb(248, 98, 149);">
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png"
                                                                        color="#f86295"
                                                                        alt="mobilePhone"
                                                                        width="13"
                                                                        class="contact-info__ContactLabelIcon-sc-mmkjr6-0 kInyhW"
                                                                        style="display: block; background-color: rgb(248, 98, 149);"
                                                                    />
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td style="padding: 0px; color: rgb(0, 0, 0);">
                                                <a href="tel:(000)000-0000" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 dExxuU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
                                                    <span>(000)000-0000</span>
                                                </a>
                                                |
                                                <a href="tel:(000)000-0000" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 dExxuU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
                                                    <span>(000)000-0000</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"
                                                    globalstyles="[object Object]"
                                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"
                                                >
                                                    <tbody>
                                                        <tr>
                                                            <td style="vertical-align: bottom;">
                                                                <span color="#f86295" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 brbfIW" style="display: inline-block; background-color: rgb(248, 98, 149);">
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png"
                                                                        color="#f86295"
                                                                        alt="emailAddress"
                                                                        width="13"
                                                                        class="contact-info__ContactLabelIcon-sc-mmkjr6-0 kInyhW"
                                                                        style="display: block; background-color: rgb(248, 98, 149);"
                                                                    />
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td style="padding: 0px;">
                                                <a href="mailto:chris@uncodeify.com" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 dExxuU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
                                                    <span>chris@uncodeify.com</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"
                                                    globalstyles="[object Object]"
                                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"
                                                >
                                                    <tbody>
                                                        <tr>
                                                            <td style="vertical-align: bottom;">
                                                                <span color="#f86295" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 brbfIW" style="display: inline-block; background-color: rgb(248, 98, 149);">
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png"
                                                                        color="#f86295"
                                                                        alt="website"
                                                                        width="13"
                                                                        class="contact-info__ContactLabelIcon-sc-mmkjr6-0 kInyhW"
                                                                        style="display: block; background-color: rgb(248, 98, 149);"
                                                                    />
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td style="padding: 0px;">
                                                <a href="https://website.com" color="#000000" class="contact-info__ExternalLink-sc-mmkjr6-2 dExxuU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;">
                                                    <span>https://website.com</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"
                                                    globalstyles="[object Object]"
                                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"
                                                >
                                                    <tbody>
                                                        <tr>
                                                            <td style="vertical-align: bottom;">
                                                                <span color="#f86295" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 brbfIW" style="display: inline-block; background-color: rgb(248, 98, 149);">
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png"
                                                                        color="#f86295"
                                                                        alt="address"
                                                                        width="13"
                                                                        class="contact-info__ContactLabelIcon-sc-mmkjr6-0 kInyhW"
                                                                        style="display: block; background-color: rgb(248, 98, 149);"
                                                                    />
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td style="padding: 0px;">
                                                <span color="#000000" class="contact-info__Address-sc-mmkjr6-3 jomBme" style="font-size: 12px; color: rgb(0, 0, 0);"><span>address 1, address 2, City, State</span></span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td width="45"><div></div></td>
                            <td style="vertical-align: top;">
                                <table
                                    cellpadding="0"
                                    cellspacing="0"
                                    border="0"
                                    globalstyles="[object Object]"
                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"
                                >
                                    <tbody>
                                        <tr>
                                            <td style="text-align: center;">
                                                <table
                                                    cellpadding="0"
                                                    cellspacing="0"
                                                    border="0"
                                                    globalstyles="[object Object]"
                                                    class="table__StyledTable-sc-1avdl6r-0 gZiJTA"
                                                    style="display: inline-block; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"
                                                >
                                                    <tbody>
                                                        <tr style="text-align: center;">
                                                            <td>
                                                                <a
                                                                    href="https://facebook.com"
                                                                    color="#7075db"
                                                                    class="social-links__LinkAnchor-sc-py8uhj-2 eycpzl"
                                                                    style="display: inline-block; padding: 0px; background-color: rgb(112, 117, 219);"
                                                                >
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/facebook-icon-2x.png"
                                                                        alt="facebook"
                                                                        color="#7075db"
                                                                        width="24"
                                                                        class="social-links__LinkImage-sc-py8uhj-1 eJRoSc"
                                                                        style="background-color: rgb(112, 117, 219); max-width: 135px; display: block;"
                                                                    />
                                                                </a>
                                                            </td>
                                                            <td width="5"><div></div></td>
                                                            <td>
                                                                <a
                                                                    href="https://twitter.com"
                                                                    color="#7075db"
                                                                    class="social-links__LinkAnchor-sc-py8uhj-2 eycpzl"
                                                                    style="display: inline-block; padding: 0px; background-color: rgb(112, 117, 219);"
                                                                >
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png"
                                                                        alt="twitter"
                                                                        color="#7075db"
                                                                        width="24"
                                                                        class="social-links__LinkImage-sc-py8uhj-1 eJRoSc"
                                                                        style="background-color: rgb(112, 117, 219); max-width: 135px; display: block;"
                                                                    />
                                                                </a>
                                                            </td>
                                                            <td width="5"><div></div></td>
                                                            <td>
                                                                <a
                                                                    href="https://linkedin.com"
                                                                    color="#7075db"
                                                                    class="social-links__LinkAnchor-sc-py8uhj-2 eycpzl"
                                                                    style="display: inline-block; padding: 0px; background-color: rgb(112, 117, 219);"
                                                                >
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png"
                                                                        alt="linkedin"
                                                                        color="#7075db"
                                                                        width="24"
                                                                        class="social-links__LinkImage-sc-py8uhj-1 eJRoSc"
                                                                        style="background-color: rgb(112, 117, 219); max-width: 135px; display: block;"
                                                                    />
                                                                </a>
                                                            </td>
                                                            <td width="5"><div></div></td>
                                                            <td>
                                                                <a
                                                                    href="https://instagram.com"
                                                                    color="#7075db"
                                                                    class="social-links__LinkAnchor-sc-py8uhj-2 eycpzl"
                                                                    style="display: inline-block; padding: 0px; background-color: rgb(112, 117, 219);"
                                                                >
                                                                    <img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/instagram-icon-2x.png"
                                                                        alt="instagram"
                                                                        color="#7075db"
                                                                        width="24"
                                                                        class="social-links__LinkImage-sc-py8uhj-1 eJRoSc"
                                                                        style="background-color: rgb(112, 117, 219); max-width: 135px; display: block;"
                                                                    />
                                                                </a>
                                                            </td>
                                                            <td width="5"><div></div></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td height="30"></td>
        </tr>
        <tr>
            <td>
            </td>
        </tr>
    </tbody>
</table>
3

You can add an HTML email signature in SendGrid by embedding raw HTML directly into the email body when using Bubble’s native “Send email” workflow action. Here’s how you can do it:

  1. Create Your HTML Signature
    Since you want images (e.g., business logo, social icons) and clickable links, you’ll need properly formatted HTML. Here’s a basic example:
<table>
  <tr>
    <td>
      <img src="YOUR_LOGO_URL" alt="Business Logo" width="150">
    </td>
    <td>
      <p style="color:#333;font-size:14px;">
        <strong>Your Name</strong><br>
        Your Business Name<br>
        <a href="mailto:your@email.com" style="color:#0073e6;">your@email.com</a>
      </p>
      <a href="https://facebook.com/yourpage">
        <img src="YOUR_FACEBOOK_ICON_URL" alt="Facebook" width="24">
      </a>
      <a href="https://linkedin.com/in/yourprofile">
        <img src="YOUR_LINKEDIN_ICON_URL" alt="LinkedIn" width="24">
      </a>
    </td>
  </tr>
</table>

  1. Ensure Images Are Hosted Online
    SendGrid does not support embedded images, so upload your logo and icons to an image hosting service or your Bubble database, then use direct URLs in the <img src="..."> tags.

  2. Use HTML in the Send Email Action

  • In Bubble’s Send email action, set “Body” to rich text (HTML) mode.
  • Paste your HTML signature into the email body.
  • Ensure you enable “Send as HTML” in SendGrid settings.
  1. Troubleshooting & Alternative Approach
    If the built-in email action doesn’t render your signature correctly, consider using the SendGrid API via a plugin or API Connector to send fully customized HTML emails.

This approach should work seamlessly while keeping you within SendGrid.

1 Like
4

To add an HTML email signature in SendGrid, you can directly insert your email signature HTML template into the email body using inline HTML. Make sure your images (logos, icons) are hosted online with direct URLs, as embedded images may not render properly.

If you’re using Bubble’s Send Email action, ensure that the email body is set to accept HTML. You might also need to adjust SendGrid settings to allow external images.