Customizing Templates with AI (ChatGPT & Claude)

TeamSigs allows administrators and designers to customize HTML email signatures using modern Large Language Models (LLMs) such as ChatGPT (OpenAI), Claude (Anthropic), or Google Gemini—without needing to manually write complex email-safe HTML tables or inline CSS.

Using the built-in Customize with AI prompt generator in the Template Editor, you can export your current signature layout bundled with TeamSigs' exact variable syntax, email-client compatibility constraints, and custom design instructions into a single prompt.

1. Overview & The "Customize with AI" Helper

HTML email signature design is notorious for strict technical limitations: modern web layout standards like flexbox, CSS grid, external stylesheet <style> tags, and CSS variables are completely stripped by desktop Microsoft Outlook (Word rendering engine) and web email clients.

The Customize with AI tool bridges this gap by automatically injecting:

1. Your current signature HTML as the starting base.
2. Strict email client rules (nested <table>, <tr>, <td>, explicit cell paddings, inline styles).
3. TeamSigs 3-tier variable governance ({{var}}, {{var*}}, {{var#}}, and [[if:var]]...[[/if:var]]).
4. Your custom design request (e.g., repositioning logos, adding WhatsApp buttons, styling dividers).

2. The 3-Step AI Workflow

Customizing a template takes less than two minutes following this workflow:

Step 1: Open the Helper & Add Instructions

1. Navigate to Templates (/templates) and click Edit on any existing template (or create a New Template).
2. Click the Customize with AI button located in the toolbar directly above the HTML Editor or next to Edit Raw HTML.
3. In the dialog, optionally enter what changes you want to make in the What changes do you want to make? field.
4. Click Copy Prompt to Clipboard.

Step 2: Paste into Your Favorite LLM

1. Open ChatGPT, Claude, or your organization's AI assistant.
2. Paste the prompt directly into the chat prompt input.
3. Send the message. The AI will output a clean, email-safe HTML code block adhering to all TeamSigs technical requirements.

Step 3: Paste Back into TeamSigs & Preview

1. Copy the raw HTML code block returned by the AI.
2. Return to the TeamSigs Template Editor.
3. If the HTML Editor panel is collapsed, click Edit Raw HTML to open the code area.
4. Replace the contents of the HTML Editor box with the code from the AI.
5. Watch the Live Template Preview update instantly.
6. Click Save Template.

3. Guiding the AI: Prompt Crafting & Custom Requirements

You can instruct the AI to make specific stylistic, structural, or branding modifications. Here are effective examples to enter into the custom instructions field:

Example A: Modern Executive Layout

"Reorganize into a 2-column layout: put the employee headshot on the left with a subtle border radius, and employee details on the right. Add a 1px solid vertical divider line in #e2e8f0 between them."

Example B: Adding Direct Booking & Messaging Links

"Below the phone number, add an executive WhatsApp click-to-chat button with an icon and a 'Book a Meeting' link using {{calendly_url}} styled as an outline pill button."

Example C: Certification Badges & Awards

"Add a row at the bottom with our ISO 27001 badge and award logo from {{company_badge_url}}, centered with 8px top padding."*

4. Introducing Custom Dynamic Variables with AI

One of TeamSigs' most powerful capabilities is dynamic token expansion. You can ask the AI to invent new variable tags for your company. TeamSigs automatically detects these variables and provisions inputs for them in your directory and CSV import tools.

Supported Variable Token Types

Prompting the AI for Conditional Blocks

When asking the AI for optional fields (like a mobile phone or personal Calendly link), always ensure it wraps the block in conditional syntax so blank rows do not appear:

<!-- Example of clean conditional block generated by AI -->
[[if:calendly_url]]
<tr>
  <td style="padding-top: 6px;">
    <a href="{{calendly_url}}" style="background-color: #2563eb; color: #ffffff; text-decoration: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; display: inline-block;">
      Book a Call
    </a>
  </td>
</tr>
[[/if:calendly_url]]

5. Hosting Images & Brand Assets via the Media Library

Always instruct the AI to use img: prefix tokens (like {{img:company_logo*}} or {{img:avatar}}) rather than raw text tokens or temporary external image hosts (e.g. Imgur or Google Drive) which may break or trigger spam filters.

• Company Logos & Certification Badges: Use {{img:company_logo*}} inside <img src="...">. In the Template Editor sidebar, this activates an Image Asset Control with a "Choose from Media Library" button to select or upload assets stored on TeamSigs' Cloudflare R2 edge network.
• Employee Avatars & Headshots: Reference {{img:avatar}}. This automatically hooks into the Media Library for employee photos with live thumbnail controls.
• Social Media & Contact Icons: Use TeamSigs dynamic icon tokens like {{icon:linkedin:2563eb:16}} or {{icon:whatsapp:25d366:16}} for crisp, retina-ready graphics without external image dependencies.

6. Testing and Outlook Compatibility Guidelines

When reviewing code generated by your AI model, verify these three essential rules:

1. No External Stylesheets: Ensure the AI did not place styles inside <style> tags in the <head>. Everything must use inline style="..." attributes on <table>, <tr>, <td>, <span>, and <a> elements.
2. Explicit Cell Dimensions & Padding: Table cells should feature explicit padding (e.g. style="padding: 0 12px 0 0;") rather than relying on CSS margins, which desktop Outlook strips.
3. Test with Real Data: In the Template Editor, use the Preview with: dropdown to preview the layout against real team members to ensure line wraps and long job titles render properly.