Template Variable Syntax & Engine Reference

TeamSigs employs a 3-tier variable governance engine designed specifically for enterprise email environments. This system separates immutable corporate brand assets from admin-managed directory properties and employee self-service attributes.

All signatures are compiled dynamically at render time using table-based HTML, strict CSS inlining, and token substitution.

1. The 3-Tier Variable Engine

Tier 1: Locked Corporate Variables ({{var*}})

Tokens ending with an escaped asterisk (\*) define corporate assets that apply universally across every employee using the template.

• Scope: Organization-wide or layout-wide.
• Storage: Persisted with the template record inside the templates.template_data JSON field.
• Editor UI: Edited in the template designer sidebar under Template Values.
• Governance: Never prompted in Add/Edit Member modals and completely excluded from generated sample CSVs.

<!-- Example Corporate Usage -->
<img src="{{img:company_logo*}}" 
     width="140" 
     alt="{{company_name*}}" 
     style="display:block;border:0;" />
<p style="color:#64748b;font-size:11px;">
  <a href="{{website*}}" 
     style="color:{{color:primary:#2563eb}};
            text-decoration:none;">
    {{website*}}
  </a>
</p>
<div style="font-size:10px;color:#94a3b8;">
  {{disclaimer*}}
</div>

Tier 2: Admin-Managed Variables ({{var}})

Tokens written without a trailing asterisk or hash ({{var}}) represent per-employee directory fields governed strictly by the organization administrator.

• Scope: Per-member directory data.
• Storage: Persisted in team_members.custom_fields (with legacy fallback columns job_title, phone, department, avatar_url).
• Editor UI: Displayed in the template designer sidebar under Directory Fields as test inputs.
• Portal Access: Strictly read-only for employees on /my-signature.
• System Reserved: {{name}} and {{email}} are core database columns and cannot be assigned custom field keys.

<!-- Example Admin Directory Usage -->
<td style="font-family:Arial,sans-serif;">
  <strong style="font-size:15px;color:#0f172a;">
    {{name}}
  </strong><br />
  <span style="font-size:13px;color:#475569;">
    {{job_title}} · {{department}}
  </span><br />
  <span style="font-size:12px;color:#64748b;">
    Direct: {{phone}}
  </span>
</td>

Tier 3: Delegated Personal Variables ({{var#}})

Tokens ending with a hash (#) represent per-employee attributes delegated directly to the employee for self-service updates.

• Scope: Per-member personal data.
• Storage: Persisted in team_members.custom_fields.
• Portal Access: Editable by employees in their /my-signature portal under the Edit My Info modal.
• Visibility Condition: If a template contains zero {{var#}} tags, the "Edit My Info" button is completely hidden from the employee portal.

<!-- Example Delegated Personal Usage -->
[[if:booking_link#]]
  <a href="{{booking_link#}}" 
     style="display:inline-block;padding:6px 12px;
            background:#2563eb;color:#ffffff;
            font-size:12px;font-weight:bold;
            text-decoration:none;border-radius:4px;">
    Book a meeting
  </a>
[[/if:booking_link#]]

[[if:linkedin_url#]]
  <a href="{{linkedin_url#}}" style="text-decoration:none;">
    {{icon:linkedin:0a66c2:16}}
  </a>
[[/if:linkedin_url#]]

2. Image Asset Variables ({{img:name}})

When a variable name begins with the img: prefix (e.g., {{img:company_logo*}}, {{img:avatar}}), TeamSigs automatically activates the Image Asset Control in the Template Editor sidebar instead of displaying a standard plain text field.

Key Behaviors

• Purpose & UI Control: Tells the Template Editor to render a dedicated image control with a live square thumbnail preview, direct HTTPS URL text input, and a "Choose from Media Library" button opening an interactive modal with drag-and-drop file upload and asset search.
• Render Output: Evaluates to the raw CDN URL string (e.g., https://media.teamsigs.com/...) intended specifically for use inside <img src="{{img:...}}">.
• Email-Safe Spacer: If an img: variable is empty, TeamSigs automatically substitutes an invisible 1×1 transparent GIF spacer, preventing broken-image placeholder boxes across email clients.

Governance Tier Integration

The img: prefix seamlessly integrates with all three governance tiers:

1. Tier 1 (Corporate locked): {{img:company_logo*}}
   • Configured centrally in the Template Editor under Template Values.
   • Universal across every employee using this template. Excluded from member modals and CSV imports.
2. Tier 2 (Admin directory): {{img:avatar}}
   • Managed per member by workspace administrators in the employee directory and bulk CSV imports.
   • Displayed as a sample preview input under Directory Fields.
3. Tier 3 (Delegated self-service): {{img:signature#}}
   • Delegated to employees to upload or link their own custom graphic (e.g., a handwritten sign-off) in /my-signature under Edit My Info.

<!-- Example Image Asset Usage -->
[[if:img:company_logo*]]
<img src="{{img:company_logo*}}" 
     width="120" 
     height="30" 
     alt="{{company_name*}}" 
     style="display:block;border:0;max-width:120px;" />
[[/if:img:company_logo*]]

3. Conditional Block Syntax

Conditional wrappers evaluate whether a variable has a non-empty string value. If the variable is empty or null, the entire block between the tags—including surrounding whitespace, table rows, punctuation, and separators—is purged from the final HTML output.

Syntax Rules

1. Match tag suffixes precisely:
   • For Tier 1 variables: [[if:disclaimer\*]]...[[/if:disclaimer\*]]
   • For Tier 2 variables: [[if:phone]]...[[/if:phone]]
   • For Tier 3 variables: [[if:booking_link#]]...[[/if:booking_link#]]
2. Wrap complete inline segments or table rows to avoid orphaned HTML tags:

<!-- Conditional separator to prevent dangling bullets -->
<span>{{job_title}}</span>
[[if:department]]
  <span style="color:#94a3b8;"> · </span>
  <span>{{department}}</span>
[[/if:department]]

<!-- Conditional Table Row -->
[[if:mobile_phone]]
<tr>
  <td style="font-size:12px;color:#475569;padding-top:4px;">
    <strong>M:</strong> {{mobile_phone}}
  </td>
</tr>
[[/if:mobile_phone]]

4. Dynamic Retina Icons ({{icon:name:hex:size}})

TeamSigs features an internal high-resolution icon generator. This avoids external third-party image hosts, prevents broken image trackers, and guarantees crisp rendering on high-DPI displays.

Syntax Structure

{{icon:NAME:HEX_COLOR:SIZE_IN_PIXELS}}

• NAME: The icon slug from the supported library (e.g., phone, envelope, globe, linkedin, twitter, calendar, map-pin).
• HEX_COLOR: A 3-character or 6-character hex color code without the # symbol.
• SIZE_IN_PIXELS: The explicit pixel width and height (e.g., 14, 16, 18, 20).

Example Markup

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="vertical-align:middle;padding-right:6px;">
      {{icon:phone:2563eb:14}}
    </td>
    <td style="vertical-align:middle;
               font-size:12px;color:#334155;">
      {{phone}}
    </td>
  </tr>
</table>

The rendering engine transforms this token into an optimized inline <img> tag pointing to /api_icon.php with explicit HTML width and height attributes.

5. Brand Color Tokens ({{color:id:#defaultHex}})

Brand color tokens dynamically generate color picker controls in the Template Editor sidebar while maintaining backwards-compatible default hex colors in the raw markup.

Syntax Structure

{{color:IDENTIFIER:#DEFAULT_HEX}}

• IDENTIFIER: An alphanumeric key (e.g., primary, accent, text_dark).
• DEFAULT_HEX: A 6-character hex color code including the # symbol.

Example Usage

<!-- Primary Brand Accent -->
<strong style="color:{{color:primary:#1e40af}};font-size:16px;">
  {{name}}
</strong>

<!-- Accent Border -->
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="border-left:3px solid {{color:primary:#1e40af}};
               padding-left:12px;">
      <span style="color:{{color:accent:#0284c7}};">
        {{job_title}}
      </span>
    </td>
  </tr>
</table>

When edited in the designer, changing the primary color updates every instance where {{color:primary:...}} is declared across the signature.

6. System Calculated Variables ({{qrcode}} & {{vcard_url}})

TeamSigs provides built-in system variables that are dynamically calculated for every team member:

• {{qrcode}}: Embeds an email-safe 75x75 PNG QR code.
• {{vcard_url}}: The HTTPS destination link to the employee's public micro-profile and vCard 3.0 (.vcf) download.

Note: Calculated system variables never generate input fields in user edit modals or CSV import templates. For complete implementation details and layout patterns, see Digital vCard & Dynamic QR Codes.

7. Complete Production Template Example

<table cellpadding="0" 
       cellspacing="0" 
       border="0" 
       style="font-family:Arial,Helvetica,sans-serif;
              line-height:1.4;color:#0f172a;">
  <tr>
    <!-- Left Column: Company Logo (Tier 1 Locked Image Asset) -->
    [[if:img:company_logo*]]
    <td style="vertical-align:top;padding-right:16px;border-right:2px solid {{color:primary:#2563eb}};">
      <a href="{{website*}}" target="_blank" 
         style="text-decoration:none;">
        <img src="{{img:company_logo*}}" width="120" 
             alt="{{company_name*}}" 
             style="display:block;border:0;outline:none;" />
      </a>
    </td>
    [[/if:img:company_logo*]]

    <!-- Right Column: Employee Identity -->
    <td style="vertical-align:top;padding-left:16px;">
      <div style="font-size:15px;font-weight:bold;
                  color:{{color:primary:#2563eb}};">
        {{name}}
      </div>
      <div style="font-size:13px;color:#334155;margin-top:2px;">
        {{job_title}}[[if:department]] 
          <span style="color:#94a3b8;">·</span> {{department}}
        [[/if:department]]
      </div>

      <table cellpadding="0" cellspacing="0" border="0" 
             style="margin-top:8px;font-size:12px;
                    color:#64748b;">
        [[if:phone]]
        <tr>
          <td style="vertical-align:middle;padding-right:6px;
                     padding-bottom:3px;">
            {{icon:phone:2563eb:12}}
          </td>
          <td style="vertical-align:middle;padding-bottom:3px;">
            <a href="tel:{{phone}}" 
               style="color:#64748b;text-decoration:none;">
              {{phone}}
            </a>
          </td>
        </tr>
        [[/if:phone]]
        <tr>
          <td style="vertical-align:middle;padding-right:6px;
                     padding-bottom:3px;">
            {{icon:envelope:2563eb:12}}
          </td>
          <td style="vertical-align:middle;padding-bottom:3px;">
            <a href="mailto:{{email}}" 
               style="color:#64748b;text-decoration:none;">
              {{email}}
            </a>
          </td>
        </tr>
        [[if:website*]]
        <tr>
          <td style="vertical-align:middle;padding-right:6px;
                     padding-bottom:3px;">
            {{icon:globe:2563eb:12}}
          </td>
          <td style="vertical-align:middle;padding-bottom:3px;">
            <a href="{{website*}}" target="_blank" 
               style="color:#64748b;text-decoration:none;">
              {{website*}}
            </a>
          </td>
        </tr>
        [[/if:website*]]
      </table>

      <!-- Employee Delegated Booking Link (Tier 3) -->
      [[if:booking_link#]]
      <div style="margin-top:10px;">
        <a href="{{booking_link#}}" target="_blank" 
           style="background-color:{{color:primary:#2563eb}};
                  color:#ffffff;font-size:11px;
                  font-weight:bold;text-decoration:none;
                  padding:5px 10px;border-radius:4px;
                  display:inline-block;">
          Schedule Call
        </a>
      </div>
      [[/if:booking_link#]]
    </td>
  </tr>

  <!-- Corporate Legal Disclaimer (Tier 1 Locked) -->
  [[if:disclaimer*]]
  <tr>
    <td colspan="2" 
        style="padding-top:12px;font-size:10px;
               line-height:1.3;color:#94a3b8;
               border-top:1px solid #e2e8f0;
               margin-top:12px;">
      {{disclaimer*}}
    </td>
  </tr>
  [[/if:disclaimer*]]
</table>