Skip to main content

BPD Recipes: HTML Email Signature

Updated

Frame.png

 

In this recipe, you'll learn how to create a delicious HTML Email Signature. 

 

What you'll need: 

Skill level: Easy-peasy lemon squeezy 🍋⁠

Time required: ~ 5 mins ⏲️

 

Ingredients: ⁠🍳

  • Big Purple Dot CRM⁠
  • User account role⁠
  • Profile picture in 1:1 ratio square (recommended width: 125px)
  • Company logo (recommended height: 40px) ⁠
  • HTML Code

 

Instructions: 

    1. Go to: Settings > Profile and scroll down to the Email Information section
    2. Click on: '</>' to open code source. Frame_10.png
    3. In the Edit Source Code (HTML) window, paste the code and then click OK 
    4. Replace the text as desired with your name and contact information.

      💡If your company uses the company disclaimer settings in the Company Profile Settings, you can use the interpolations for {company_disclaimer} and {company_license}. Otherwise, you can replace or remove the interpolations.  


    5. To replace with your headshot: Double-click on the sample headshot to open the Image Properties > Click on Upload to choose your image file. 

      💡Recommended headshot size: 125px width. Some email clients like MS Outlook have default settings that reverts the image to its original size. 


    6. To replace the logo image: Double-click on the sample logo to open the Image Properties > Click on Upload to choose your image file. 

      💡Recommended logo size: 40px height. Some email clients like MS Outlook have default settings that reverts the image to its original size. 


    7. Save Profile when finished to save your changes. 

 

HTML Email Signature Code

Copy and paste this HTML email signature code into the Source Code (HTML): 

<meta charset="UTF-8"><meta content="width=device-width, initial-scale=1" name="viewport"><meta name="x-apple-disable-message-reformatting"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta content="telephone=no" name="format-detection">

<title></title>

<!--[if (mso 16)]><style type="text/css"> a {text-decoration: none;} </style><![endif]--><!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]--><!--[if gte mso 9]><xml> <o:OfficeDocumentSettings> <o:AllowPNG></o:AllowPNG> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]--><!--[if !mso]><!-- -->

<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;600;900" rel="stylesheet" /><!--<![endif]-->

<style type="text/css">#outlook a { padding:0;}.es-button { mso-style-priority:100!important; text-decoration:none!important;}a[x-apple-data-detectors] { color:inherit!important; text-decoration:none!important; font-size:inherit!important; font-family:inherit!important; font-weight:inherit!important; line-height:inherit!important;}.es-desk-hidden { display:none; float:left; overflow:hidden; width:0; max-height:0; line-height:0; mso-hide:all;}.es-button-border:hover a.es-button, .es-button-border:hover button.es-button { background:#56d66b!important;}.es-button-border:hover { border-color:#42d159 #42d159 #42d159 #42d159!important; background:#56d66b!important;}@media only screen and (max-width:600px) {p, ul li, ol li, a { line-height:150%!important } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120% } h1 { font-size:30px!important; text-align:left } h2 { font-size:24px!important; text-align:left } h3 { font-size:20px!important; text-align:left } .es-header-body h1 a, .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important; text-align:left } .es-header-body h2 a, .es-content-body h2 a, .es-footer-body h2 a { font-size:24px!important; text-align:left } .es-header-body h3 a, .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important; text-align:left } .es-menu td a { font-size:14px!important } .es-header-body p, .es-header-body ul li, .es-header-body ol li, .es-header-body a { font-size:14px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:14px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:14px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } *[class="gmail-fix"] { display:none!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-button-border { display:inline-block!important } a.es-button, button.es-button { font-size:18px!important; display:inline-block!important } .es-adaptive table, .es-left, .es-right { width:100%!important } .es-content table, .es-header table, .es-footer table, .es-content, .es-footer, .es-header { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } .es-mobile-hidden, .es-hidden { display:none!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } .es-desk-hidden { display:table-row!important; width:auto!important; overflow:visible!important; max-height:inherit!important } }

</style>

<div class="es-wrapper-color" style="background-color:#FFFFFF"><!--[if gte mso 9]><v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" color="#FFFFFF"></v:fill> </v:background><![endif]-->

<table cellpadding="0" cellspacing="0" class="es-wrapper" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;background-color:#FFFFFF" width="100%">

 <tbody>

 <tr>

 <td style="padding:0;Margin:0" valign="top">

 <table align="center" cellpadding="0" cellspacing="0" class="es-footer" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top">

 <tbody>

 <tr>

 <td align="center" style="padding:0;Margin:0">

 <table align="center" cellpadding="0" cellspacing="0" class="es-footer-body" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;width:600px">

 <tbody>

 <tr>

 <td align="left" bgcolor="#ffffff" style="padding:10px;Margin:0;background-color:#ffffff"><!--[if mso]><table style="width:580px" cellpadding="0" cellspacing="0"><tr><td style="width:200px" valign="top"><![endif]-->

 <table align="left" cellpadding="0" cellspacing="0" class="es-left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">

 <tbody>

 <tr>

 <td align="left" class="es-m-p20b" style="padding:0;Margin:0;width:200px">

 <table cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px" width="100%">

 <tbody>

 <tr>

 <td align="center" style="padding:0;Margin:0;font-size:0px"><img alt="" src="https://gfoufu.stripocdn.email/content/guids/CABINET_b9c4bc32b19b90d91674ac00b6272a88b4b9607f6ee3a178ac26589157b75056/images/recruiter_sally_150px.png" style="display: block; border: 0px; outline: none; text-decoration: none; width: 150px; border-radius:50%;" /></td>

 </tr>

 <tr>

 <td align="center" style="padding:5px;Margin:0;font-size:0px"><img alt="" height="40" src="https://gfoufu.stripocdn.email/content/guids/CABINET_b9c4bc32b19b90d91674ac00b6272a88b4b9607f6ee3a178ac26589157b75056/images/fullcolorlogo_100px.png" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" /></td>

 </tr>

 </tbody>

 </table>

 </td>

 </tr>

 </tbody>

 </table>

 <!--[if mso]></td><td style="width:20px"></td>

<td style="width:360px" valign="top"><![endif]-->




 <table align="right" cellpadding="0" cellspacing="0" class="es-right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right">

 <tbody>

 <tr>

 <td align="left" style="padding:0;Margin:0;width:360px">

 <table cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px" width="100%">

 <tbody>

 <tr>

 <td align="left" style="padding:0;Margin:0">

 <h1 style="Margin:0;line-height:24px;mso-line-height-rule:exactly;font-family:'Public Sans', sans-serif;font-size:20px;font-style:normal;font-weight:bold;color:#282828">Sally Davis</h1>

 </td>

 </tr>

 <tr>

 <td align="left" style="padding:0;Margin:0">

 <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Public Sans', sans-serif;line-height:21px;color:#828282;font-size:14px">Loan Officer, NMLS # 12345</p>

 </td>

 </tr>

 <tr>

 <td align="left" height="8" style="padding:0;Margin:0"> </td>

 </tr>

 <tr>

 <td align="left" style="padding:0;Margin:0">

 <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Public Sans', sans-serif;line-height:21px;color:#282828;font-size:14px">e: sally@purplemortgageco.com</p>

 </td>

 </tr>

 <tr>

 <td align="left" style="padding:0;Margin:0">

 <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Public Sans', sans-serif;line-height:21px;color:#282828;font-size:14px">(949) 123-4567</p>

 </td>

 </tr>

 <tr>

 <td align="left" style="padding:0;Margin:0">

 <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Public Sans', sans-serif;line-height:18px;color:#282828;font-size:12px">123 Purple Way, Irvine, CA 12345</p>

 </td>

 </tr>

 <tr>

 <td align="left" style="padding:0;Margin:0;padding-top:10px;padding-bottom:10px;font-size:0">

 <table border="0" cellpadding="0" cellspacing="0" height="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px" width="100%">

 <tbody>

 <tr>

 <td style="padding:0;Margin:0;border-bottom:1px solid #cccccc;background:unset;height:1px;width:100%;margin:0px"> </td>

 </tr>

 </tbody>

 </table>

 </td>

 </tr>

 <tr>

 <td align="left" style="padding:0;Margin:0">

 <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:'Public Sans', sans-serif;line-height:17px;color:#828282;font-size:11px">{company_disclaimer} | Company NMLS# {company_license}</p>

 </td>

 </tr>

 </tbody>

 </table>

 </td>

 </tr>

 </tbody>

 </table>

 <!--[if mso]></td></tr></table><![endif]--></td>

 </tr>

 </tbody>

 </table>

 </td>

 </tr>

 </tbody>

 </table>

 </td>

 </tr>

 </tbody>

</table>

</div>

 

Related articles