The Signature Source Code Handbook

This article explains which HTML and styling CloudM keeps when you save an email signature template in CloudM Signatures, and why a signature that looks right in the editor can look different once it reaches Gmail. It is for admins who write or paste their own HTML using the editor's <> Source code option, found under the Tools menu.

How your signature HTML is handled

Three things act on your signature's HTML, in this order. All three happen automatically, and nobody edits your signature by hand. The last column simply shows whether CloudM has any control over that stage: the editor and the save step are part of CloudM, while Gmail is not.

Use the lists below to know what CloudM keeps, then test the finished signature in a real Gmail account, because Google has the final say on how it looks.

Signature templates are plain HTML with placeholders called variables (for example $personalName) that are filled in for each user. The variables and simple logic such as #if are written in Apache Velocity, a template language. You do not need to learn Velocity to use variables, but two of its characters, $ and #, have a special meaning that can catch you out. See Variables and template syntax.

Supported HTML tags

Only the tags below survive a save. Any other tag is removed, and in most cases the text and any supported tags inside it are kept. For example, <center><b>Name</b></center> becomes <b>Name</b>.

Removed on save, text kept

The tag is deleted but the content inside it stays: font, center, s, del, ins, mark, abbr, address, big, tt, section, article, header, footer, nav, figure, figcaption, label, html, head and body.

Removed on save, content removed too

The tag and everything inside it is deleted: style, script, title, link, meta, iframe, svg, video, audio, object, embed, form, input, button, select, textarea and HTML comments.

Supported attributes

class and style are kept on every tag. Beyond those two, only the attributes in this table are kept. Any other attribute is removed and the tag stays.

The rule of thumb: presentation attributes are removed, so use inline CSS instead. For example, <td valign="top" bgcolor="#eee" height="40"> must be written as <td style="vertical-align:top; background-color:#eee; height:40px">.

A class is kept, but because <style> blocks are removed, a class name has no effect on how the signature looks. Use it only as a label.

Inline CSS

CloudM does not check or filter CSS. Whatever you write inside a style="..." attribute is stored and sent to Gmail exactly as written, including properties Gmail will ignore.

• Kept by CloudM: any CSS property, as long as it is written inline on a supported tag.
• Not kept by CloudM: <style> blocks (removed with their contents), <link> stylesheets, @import, @media queries, and anything that relies on a class or id selector.
• Decided by Gmail: which inline properties actually show. Google does not publish a list for signatures, so test your design in Gmail.

CloudM's default signature templates use a table-based layout with simple inline styles, so that is a good starting point. If you use more advanced styling, such as floats, flexbox, grid or positioning, test it in Gmail before rolling the signature out.

Links and images

CloudM checks each web address against a list of allowed formats. If an address fails, the attribute is removed. A link keeps its text but is no longer clickable, and an image becomes an empty <img> with no picture.

• Links must start with a scheme. href="www.cloudm.io" is removed, while href="https://www.cloudm.io" is kept. This is the most common reason for "my link disappeared".
• Images must be hosted on a public https:// address. If you paste or drag an image into the editor it is stored as an embedded data: image, which is removed on save, so the image shows in the editor but not in Gmail. Use the editor's Image button with an image URL instead. We recommend hosting your images in your own Google Cloud Storage bucket: see Use an image hosted in GCP in your signature.
• Variables work in addresses. They can make up the whole value, for example href="$urlHomePage", start it, as in href="mailto:$mailPrimary", or sit inside a full address, as in href="https://example.com/people/$personalName".
• Profile photo. Choosing the Profile photo variable in the editor inserts #if( $personalPhoto )<img src="$personalPhoto" width="96px" height="96px"/>#end. The #if check means a user with no Google profile photo gets no broken image.
• target="_blank" is removed. Gmail opens signature links in a new tab regardless, so you do not need it.

Variables and template syntax

Variables are inserted as plain text. The save is rejected with an error if the template contains a variable CloudM does not recognise, or template syntax that cannot be read. These are the only two problems that show an error. Everything else on this page is removed silently.

Writing a variable

Hiding a line when a field is blank

Use an #if check to leave a line out when a field is empty. For more examples, including how to fall back to a different field, see Using Conditional Formatting. CloudM's default templates use this pattern:

#if ($phoneBusiness != "")<span style="display:block">Phone: $phoneBusiness</span>#end

#if, #elseif, #else, #end, #set and #foreach all work. #include, #parse and #macro do not, and a template that uses them fails to save.

Which variables you can use

You can use the Google profile fields (for example personalName, personalSurname, personalTitle, mailPrimary, personalPhoto, orgJobTitle, orgName, orgDepartment, phoneBusiness, phoneMobile, locationBusiness, urlHomePage, manager and assistant), the organisation fields that start with parent or root, every Predefined Extra Information field, and profile and rootOrg. The Variables panel in the editor is the authoritative list for your domain, so insert variables from there rather than typing them.

Characters that need care

• A dollar sign followed by letters is always read as a variable. $Price fails the save with "Invalid Variable: Price". $100 is fine because a number follows. Writing $ instead does not help, because it is converted back to $ before the check. Write USD 100, or put a space after the dollar sign, as in $ 100.
• Two hash signs start a comment and hide the rest of the line, so ## Our team disappears. Colour codes such as #545454 are fine because they use a single hash.
• A hash followed by a template keyword is read as an instruction. Text such as #end or #set in the body of a signature breaks the save. Ordinary hashtags such as #CloudM are fine.
• Values are not cleaned for special characters. A profile field that contains < or &, such as an ampersand in a job title, can render oddly.

Limits

The 10,000 character limit applies to the finished signature, not the template. A 6,000 character template can still fail for a user with a long job title, address and location. Inline CSS is the usual cause: a 25-row table with a 200-character style on every cell is about 5,000 characters before any content. Keep styles short and repeat them as little as you can.

CloudM sends signatures to Gmail through the Gmail API, one signature for each email address a user can send from.

When you save, CloudM rewrites the HTML in a tidy standard form: attribute quotes become double quotes, tag and attribute names become lower case, and characters such as © and accented letters are kept as they are. This is why the <> Source code view never shows exactly what you pasted.

Common problems

What admins paste into <> Source code, what CloudM saves, and how to fix it. None of these changes shows a warning.

Related articles

• Creating a New Email Signature
• Adding Custom Profile Field Variables
• Using Conditional Formatting
• Signature Use Cases: Worked Examples
• Use AI to Create or Edit Your Signature HTML
• Use an image hosted in GCP in your signature
• Why is my email signature not synchronizing?