How to create a HTML signature : Gmail Signature Manager Knowledge base

Writing HTML for an email signature is more complicated than writing it for the web. This is because Web HTML only needs to be optimised for browsers. By looking at your web analytics you can easily define which browsers your visitors use the most and optimize your code accordingly.

Extracting the same kind of data for your email is way more complex. Tracking gets complicated as the user can open the email in a browser, mobile or desktop app. This also adds complexity to the correct optimisation of your code. Therefore, the best practice here is to go for the safest possible option, which often might not be the most aesthetically pleasing in terms of the code and the way it is created.

Choose to use the Custom HTML template

Once signed in, you will se the empty dashboard with an option to create a signature. Click “Add signature” and pick the Custom HTML template. Also name accordingly your new Gmail signature so you can always get back and find the signature without any struggles. Once named, click “Create” at the bottom.

Create the code

To create the signature you will see a black window named “Source code”, where you should insert the HTML code. Then you can preview the signature created by your code in the “Preview” in the second tab.

If you don’t want to create the code from scratch, feel free to use our samples of the code -

https://github.com/Revolgy-Business-Solutions/html-email-signature-kit

1. Set Variables

On the right, you can see the inputs that are ready for you to use and they are set to automatically connect with the Google directory and input the data automatically. Please follow the best practises described bellow, as already mentioned the HTML code for email signature needs to follow strict rules.

Create the code using following best practises

We recommend using <table> tag for layout
- In older types of email clients (or those that were built on top of them) such as MS Outlook, this tag creates heavier code. However, avoiding the risk that the signature won't be displayed properly to a key stakeholder is definitely worth it.
Do not use new CSS attributes (e.g. CSS grid)
- CSS is evolving faster than web browsers and email clients are able to implement it (see the previous point). This is why you should only use older, more established attributes that will work for all clients.
- If you want to check whether an attribute is safe to use, the caniemail.com site is a great source.
  - Remember though, that the only way to gain 100% certainty is by testing the code in other ways (ideally directly on the device, see below). The site might not always be completely up-to-date, which is understandable.
Your <style> block will be removed by recipients' email client
- Many email clients (including Gmail) remove style blocks so that you are disabled from changing the email styles from the mail. This also means you are practically unable to use style blocks, only inline styles. Instead of:
```
<style>
.companyColor { color: blue }
</style>

<span class="companyColor>Company name</span>
```
  HTML
  simply use:
```
<span style="color: blue;">Company name</span>
```
  HTML
Using links, especially with CUSTOM_ATTRIBUTE, need proper settings:
- For email address link which should be wrapped as in itself (mailto: is present because when you click on it, an email client recognise it as an email address) while keeping the color (black in this case), you need to write it this way:
- ```
<a href="mailto:{{ PERSONAL_EMAIL }}" style="color: black;">{{ PERSONAL_EMAIL }}</a>
```
  HTML
External resources (mostly images)
- There might be issues with them. Especially with images as some clients disable image loading. Others might be disabling images or CSS styles from a different domain than the recipients.
- It's better to use inline styles and avoid using external sources as much as possible (e.g. for CSS, copy the code directly into the mail. For images you have to accept the risk that they may not load in a fraction of mails. You might want to use alt description if it is a serious issue).
- They must be publicly available.
- Bear in mind that base64 images do not work most of the time.
Good artists copy, but the best steal
- One of the best practices is to look at how services that specialize in HTML for email (e.g. MailChimp or our signature templates) write their code, and copy it as much as possible.
- One way of doing this is to create a signature in MailChimp (or any other email newsletter service) using their templates and then simply copy the HTML code to My Services Signature Management tool.
- Use our templates and HTML tags we published on Github. You can also use template framework MJML (online editor is available).
Test it in real email clients
- Even the best attribute checker won't fully replace sending a few emails to yourself.
- It is Ideal if you know which client your recipients use
- Try as many combinations as possible (ask people who have different types of devices to help you)
  - Mobile vs. Desktop
  - OS - iOS, Android, macOS, Windows, Linux, ChromeOS
  - Browser vs. native app
  - Also keep an eye on threads - the first email may be ok, but within the email thread the signature may fall apart, or it may deform the thread itself (it often happens with wide signatures)

How to add custom attributes in My Services Signature Management tool

In addition to the most common variables in email signatures, such as the user's name, photo, personal email or others, you can also add custom attributes. We call them CUSTOM_ATTRIBUTE. These will allow you to customize signatures based on custom attributes that are created directly in Google Workspace Admin Console by people in the organization who have sufficient privileges (Admin or Superadmin).

For example - suppose that a SignaturePartners attribute is created with the P1_Link and P2_Link attributes (created by the organization). Each account will have different values for these attributes.

To add this variable to My Services Signature Management tool, the formatted variable CUSTOM_ATTRIBUTE must be used. Like any formatted variable, it must be wrapped in two compound brackets - {{ CUSTOM_ATTRIBUTE }}.

This way the tool will understand that it is not text, but a variable that is formatted according to the Google Workspace data.

However, to get a specific variable (e.g. P1_Link), you still need to add a path consisting of the name (SignaturePartners) and the name of the key in it (P1_Link). Insert these two values in square brackets and quotes next to each other in this order.

The resulting variable will look like this: {{CUSTOM_ATTRIBUTE['SignaturePartners']['P1_Link'] }}

Some common issues you might encounter:

Incorrect/incomplete path name. It cannot be just {{ CUSTOM_ATTRIBUTE }} or {{ CUSTOM_ATTRIBUTE['P1_Link'] }}
Spaces and diacritics in custom attributes may cause confusion, check whether they are written the same way in our signature tool as they are in Google Admin.
Incorrect quotes - sometimes smart quotes i.e '' won't work. You should use straight quotes i.e.'', or you can try double quotes ""
- {{ CUSTOM_ATTRIBUTE['SignaturePartners']['P1_Link'] }} may not produce the desired result

2. Set Users

The signature will be automatically published to all users on your primary and secondary domains. If you want the signature to be published on the selected people you can do it in the “Users” tab.

Select users manually

Here you can just simply pick the users that you want to have the created signature. The list consists of email addresses of all the users in your domain.

Select user by attribute

You can also select the user by a various attributes. For example a department or an office floor. If you select an attribute only the users with the same input in such attribute that you selected will receive the signature that you created.

Save changes

It is important to frequently save changes, especially before sending a preview, publishing the signature or before leaving the signature or app itself. It is possible that you will lose the changes if you don't save them manually.

Preview tab

Please be aware that the preview window will show you the signature that you created via the HTML code and it will populate the fields with data if you want it to, except the custom attributes. To fully test the custom attributes, you need to send the test email.

Send test email

The “Send me a preview” button allows you to receive a email with the signature that you are creating as any of your future recipients. You can fully test if the signature is looking accordingly to what you wanted.

Before sending the preview button, always save the changes so the signature is updated with the latest changes.

If the code is not correct, the test email cant be sent unfortunately. So you will receive a negative notification and you need to firstly improve the code. We are working on notifications that will help you understand what is wrong with the code.

Publish

If you are happy with the signature and you set who should have the signature from your domain, hit the Publish button.

Be aware that publishing may take some time, as it depends on the number of users in your domain. It can range from a few seconds to few minutes corresponding to a few users to thousands of users.

Once the signatures are fully published, you see a notification in the application and you will also receive a confirmation email into your mailbox.

To see the new signature in Gmail, you need to reload it. You can log out and log back in, or simply open Gmail in a new browser window.

How to create a HTML signature