How to code HTML email signatures for the SigStudio Visual Editor

04 — Contact & Social Zones

Zones are the most powerful concept in SigStudio's HTML system. A zone is a region of the signature that the Visual Editor makes fully dynamic — users can add, remove, and reorder fields within it without any code changes.

A zone is declared with data-ss-zone on a <tr>. Inside the zone's inner <table>, each contact field or social icon is a <tr> containing a <td data-ss-entity="...">.

Contact Zone (data-ss-zone="contact")

Code just one contact field and SigStudio expands it into a full Contact Zone in the editor — giving users access to all supported contact entities.

<!-- The zone wrapper row -->
<tr data-ss-zone="contact">
 <td style="padding:0">
   <table cellpadding="0" cellspacing="0" border="0">
     <tbody>

       <!-- Each field is a tr with data-ss-row-limit -->
       <tr data-ss-row-limit="1">
         <td data-ss-entity="mobile" height="15">
           <!-- inner label + value table -->
           <table><tbody><tr>
             <td width="20" style="color:{{dsgn.g.feature.color}};font-weight:bold;">
               <b>{{data.g.mobile.label}}</b>
             </td>
             <td>{{data.u.mobile.text}}</td>
           </tr></tbody></table>
         </td>
       </tr>

       <!-- Add more fields: email, phone, website -->

     </tbody>
   </table>
 </td>
</tr>

💡 Multiple contact zones are supported
If your design has two separate contact rows (e.g. one row for phone + mobile, another for email + website), use data-ss-zone="contact" and data-ss-zone="contact2". Each zone is managed independently in the Visual Editor.

The data-ss-row-limit Attribute

Inside a contact zone, each field row should include data-ss-row-limit on its <tr>. This tells SigStudio how many instances of that field can appear at once.

ValueBehaviourdata-ss-row-limit="1"Only one instance of this field shown per row — standard for stacked layouts where each field gets its own linedata-ss-row-limit="2"Up to two fields displayed side-by-side in the same row — useful for horizontal / inline contact layouts

Social Zone (data-ss-zone="social")

The social zone works the same way as the contact zone, but for social media icons. Place social icon entities as <td> cells inside a single <tr> within the zone. Between each icon, include a horizontal spacer using data-ss-spacer="h".

<tr data-ss-zone="social">
 <td style="padding:0">
   <table><tbody><tr>

     <!-- Optional label before icons -->
     <td data-ss-entity="social-cta">
       {{msg.g.customcta.text}}
     </td>

     <!-- LinkedIn icon -->
     <td data-ss-entity="linkedin">
       <a href="{{img.g.linkedin.link}}">
         <img width="{{img.g.linkedin.w}}" height="{{img.g.linkedin.h}}"
              src="{{img.g.linkedin.src}}" alt="{{img.g.linkedin.alt}}"
              style="border:none;display:block;" />
       </a>
     </td>

     <!-- Spacer between icons -->
     <td data-ss-spacer="h" width="{{dsgn.t.socialgap.size}}"></td>

     <!-- Repeat pattern for other social icons -->

   </tr></tbody></table>
 </td>
</tr>

💡 Code one social icon, unlock all of them
You only need to include a single social entity (e.g. "linkedin") inside your social zone. SigStudio will make all other supported social platforms available to add via the Visual Editor.

05 — Multi-Entity Blocks

A data-ss-block attribute groups two or more entities into a single row — for example, placing a profile photo and logo side by side. The value is a comma-separated list of entity names in the order they appear left-to-right. Separate the entities with a horizontal spacer <td>.

<table><tbody>
 <tr data-ss-block="profile,logo">

   <!-- Entity 1: profile image -->
   <td data-ss-entity="profile" valign="top">
     <a href="{{img.u.profile.link}}">
       <img src="{{img.u.profile.src}}"
            width="{{img.u.profile.w}}" height="{{img.u.profile.h}}"
            style="border:none;display:block;" />
     </a>
   </td>

   <!-- Spacer between entities -->
   <td data-ss-spacer="h" width="15"></td>

   <!-- Entity 2: logo -->
   <td data-ss-entity="logo" valign="top">
     <a href="{{img.g.logo.link}}">
       <img src="{{img.g.logo.src}}"
            width="{{img.g.logo.w}}" height="{{img.g.logo.h}}"
            style="border:none;display:block;" />
     </a>
   </td>

 </tr>
</tbody></table>

Common block combinations used in templates:

Block valueDescriptiondata-ss-block="profile,logo"Profile photo left, company logo rightdata-ss-block="logo,profile"Logo left, profile photo rightdata-ss-block="name,role"Name and role on the same linedata-ss-block="role,group-name"Role and company name on the same linedata-ss-block="group-name,tagline"Company name and tagline on the same line

⚠️ Order matters
The comma-separated order in data-ss-block must match the left-to-right order of the corresponding data-ss-entity cells in the HTML. Mismatches will confuse the Visual Editor's swap/toggle logic.

06 — Spacers

Spacers control the vertical and horizontal whitespace between signature elements. Using data-ss-spacer instead of padding or margin gives SigStudio control over spacing at a global level.

AttributeApplied toPurposedata-ss-spacer="v"<tr>Vertical spacer row between sections. Set height via inline style (e.g. height: 15px).data-ss-spacer="h"<td>Horizontal spacer cell between side-by-side elements. Set width via the width attribute.<!-- Vertical spacer (between rows) -->
<tr data-ss-spacer="v">
 <td style="font-size:15px;line-height:15px;height:15px;padding:0;">
   <div style="height:15px;"></div>
 </td>
</tr>

<!-- Horizontal spacer (between columns) -->
<td data-ss-spacer="h" width="20" style="font-size:1px;padding:0;"></td>

<!-- Social icon gap (uses design token) -->
<td data-ss-spacer="h" width="{{dsgn.t.socialgap.size}}"></td>

💡 Use the left margin spacer on the outer wrapper
The outermost table should have a leading <td data-ss-spacer="h" width="20"> cell before the main content cell. This controls the left indent of the entire signature and can be adjusted globally via the Visual Editor's spacing settings.

07 — Most Commonly Used Template Variables

Template variables are Handlebars-style placeholders — {{variable.path}} — that SigStudio replaces with live data when rendering a signature. These are the most commonly used, but there are hundreds more available in the software. They fall into four namespaces.

data.* — People & content data

Variable / Scope / Description

‍{{data.u.name.text}} / per-user / The user's full name

‍{{data.u.role.text}} / per-user / The user's job title

‍{{data.u.email.text}} / per-user / The user's email address (display)

‍{{data.u.email.link}} / per-user The user's email as a mailto: href

‍{{data.u.mobile.text}} / per-user / The user's mobile number

‍{{data.u.phone.text}} / per-user / The user's office / direct phone

‍{{data.g.name.text}} / workspace / Company / group name

‍{{data.g.tagline.text}} / workspace / Company tagline

‍{{data.g.sal.text}} / workspace / Salutation  sign-off text

‍{{data.g.email.label}} / workspace / Label prefix for email (e.g. "e.")

‍{{data.g.mobile.label}} / workspace / Label prefix for mobile (e.g. "m.")

‍{{data.g.phone.label}} / workspace / Label prefix for phone (e.g. "t.")

‍{{data.g.phone.text}} / workspace / Shared office phone number

‍{{data.g.website.text}} / workspace / Website display text

‍{{data.g.website.link}} / workspace / Website URL (for href)

img.* — Images & icons

Variable / Scope / Description

‍{{img.g.logo.src}} / workspace / Company logo image URL

‍{{img.g.logo.w}} / .h / workspace Logo width and height in px

‍{{img.g.logo.link}} / workspace / URL the logo links to when clicked

‍{{img.g.logo.alt}} / workspace/ Logo alt text for accessibility

‍{{img.u.profile.src}} / per-user / User profile photo URL

‍{{img.u.profile.w}} / .h / per-user / Profile photo dimensions in px

‍{{img.g.linkedin.src}} / workspace / LinkedIn icon image URL (same pattern for facebook, x, instagram, youtube)

‍{{img.g.linkedin.link}} / workspace / LinkedIn profile URL (same pattern for other social icons)

‍{{img.g.templatewidth.src}} / workspace / 1px transparent spacer image for width control

‍{{img.g.templatewidth.w}} / workspace / Total template width in px

dsgn.* — Design system tokens (colours & typography)

Variable / Scope / Description

‍{{dsgn.g.base.color}} / workspace / Primary text colour (e.g. dark grey or black)

‍{{dsgn.g.feature.color}} / workspace / Accent / brand colour used for name, labels, links

‍{{dsgn.g.accent.color}} / workspace / Secondary accent colour (e.g. CTA banner stripe)

‍{{dsgn.t.primary.font}} / workspace / Primary font family name

‍{{dsgn.t.primary.fontsize}} / workspace / Primary font size (number, used as font-size: {{...}}px)

‍{{dsgn.t.secondary.fontsize}} / workspace / Secondary / smaller font size

‍{{dsgn.t.socialgap.size}} / workspace / Gap width between social icons (used as width on spacer cells)

‍{{dsgn.t.custom.font}} / workspace/ Custom or override font (used in CTA banners)

‍{{dsgn.t.custom.fontsize}} / workspace / Custom or override font size

‍{{dsgn.t.msgdisclaimer.font}} / workspace / Font for disclaimer text block

‍{{dsgn.t.msgdisclaimer.w}} / workspace / Max width of disclaimer text block

msg.* — Editable message content

Variable / Scope / Description

‍{{msg.g.customcta.text}} / workspace/ Social zone call-to-action label (e.g. "Follow us:")

‍{{msg.g.customcta1.text}} / workspace /CTA banner headline text

‍{{msg.g.customcta2.text}} / workspace / CTA banner button label text

‍{{msg.g.customcta2.link}} / workspace / CTA banner button URL

‍{{msg.g.disclaimer.text}} / workspace / Legal disclaimer paragraph text

‍{{msg.g.green.text}} / workspace / Environmental / green message text

💡 per-user (u) vs workspace (g) scope
per-user variables are unique to each person — name, role, profile photo, mobile. Workspace variables are shared across all users in the workspace — logo, brand colours, fonts, social links. Always use the correct scope or data won't populate correctly.

08 — Base Zone Add-ons

The Base Zone sits at the bottom of the signature and contains promotional and compliance content — CTA banners, legal disclaimers, green/environment messages, and a template width controller. These elements are all standalone <tr data-ss-entity="..."> rows.

Entity / Description

‍"cta-banner": A full-width promotional banner with a headline ({{msg.g.customcta1.text}}), a button label ({{msg.g.customcta2.text}}), and a button link ({{msg.g.customcta2.link}}). Background and accent colours are drawn from the design tokens."disclaimer"A small-text legal disclaimer block. Uses the dsgn.t.msgdisclaimer.* design tokens for font, size, colour, line-height, and max-width. Content is set via {{msg.g.disclaimer.text}}."green-message"An environmental / green message with an optional icon image ({{img.g.msggreen.src}}) and text ({{msg.g.green.text}})."templatewidth"An invisible 1px-tall image used to enforce the template's total width. Set the width attribute and image source using {{img.g.templatewidth.w}} and {{img.g.templatewidth.src}}. This must be the last element in the template.

💡 Always include the templatewidth entity
Even if you don't need a specific width constraint, the "templatewidth" entity should be the last row in your template. It ensures consistent rendering across email clients and gives SigStudio a reliable way to control overall template width from the Visual Editor.

09 — Pre-Upload Checklist

Before uploading your HTML template to SigStudio, run through this checklist to ensure full Visual Editor compatibility.

Check

What to verify

✅ Table-based layout: All layout is done with <table>, <tr>, and <td>. No <div> layout, no CSS Grid or Flexbox.

✅ All entities tagged: Every interactive element has a data-ss-entity attribute with the correct value.

✅ Zones wrap contact/social: Contact fields sit inside a data-ss-zone="contact" row; social icons inside data-ss-zone="social".

✅ Block order matches HTML order: The comma-separated values in data-ss-block match the left-to-right order of entity cells.

✅ Template variables used: All dynamic content uses {{variable.path}} tokens — no hardcoded names, emails, colours, or font sizes.

✅ Scope is correct: Per-user data uses data.u.* / img.u.*. Shared workspace data uses data.g.* / img.g.*.

✅ Inline styles on all elements: Styles that must survive email clients (font, colour, size) are inlined. Do not rely solely on external stylesheets.

✅ Images sized correctly: All <img> tags use both width/height attributes and matching inline style values.

✅ Spacers in place: Vertical spacers (data-ss-spacer="v") separate sections; horizontal spacers (data-ss-spacer="h") separate side-by-side elements.

✅ templatewidth is last: The data-ss-entity="templatewidth" row is the final row in your template content.

✅ Apple Mail fix applied: Include the a[x-apple-data-detectors] CSS rule in your <head><style> to prevent Apple Mail from auto-linking phone numbers and addresses with conflicting styles.

🚀 Need a starting point?
The best way to begin a new custom template is to copy one of the official SigStudio example templates from the Template Library and modify it. All the attributes and variables are already in place — you just need to restyle the HTML to match your design.