shopcall/templates/README.md

ShopCall.ai Email Templates

This directory contains email templates for Supabase Auth. These templates follow the ShopCall.ai web UI design system with minimal dependencies for reliable email rendering.

Templates

1. confirmation.html - Confirm sign up

   • Used when users create a new account
   • Includes both button and code for verification

2. invite.html - Invite user

   • Used when inviting users to the platform
   • Highlights key features and benefits

3. magic_link.html - Magic link

   • Passwordless login option
   • One-time use link with 1-hour expiration

4. email_change.html - Change email address

   • Confirms email address changes
   • Security warnings included

5. recovery.html - Reset password

   • Password recovery flow
   • Includes password strength tips

6. reauthentication.html - Reauthentication

   • Additional security verification
   • Short 15-minute expiration for sensitive actions

Available Variables

All templates support the following Supabase variables:

• {{ .ConfirmationURL }} - Full URL for confirmation actions
• {{ .Token }} - Token code for manual entry
• {{ .TokenHash }} - Hashed token value
• {{ .SiteURL }} - Base URL of the application
• {{ .Email }} - User's email address
• {{ .Data }} - Additional custom data
• {{ .RedirectTo }} - Redirect URL after action

Design System

The templates follow the ShopCall.ai brand guidelines:

Colors

• Primary Dark: #1c1917 (stone-900)
• Secondary Dark: #292524 (stone-800)
• Text Primary: #1c1917
• Text Secondary: #44403c (stone-700)
• Text Muted: #78716c (stone-500)
• Background: #fafaf9 (stone-50)
• Border: #e7e5e4 (stone-200)

Typography

• Font Family: System fonts (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.)
• Heading: 24px, 600 weight
• Body Text: 16px
• Small Text: 14px

Components

• Buttons: Dark background with rounded corners (8px)
• Info Boxes: Color-coded with left border accent
• Code Boxes: Monospace font, large size with letter-spacing
• Footer: Centered, muted colors with links

Updating Templates in Supabase

You can update these templates in your Supabase project using the Supabase Dashboard or API.

Via Supabase Dashboard

1. Go to your Supabase project
2. Navigate to Authentication → Email Templates
3. Select the template you want to update
4. Copy the content from the corresponding HTML file
5. Paste and save

Via Supabase MCP Tools (for Claude Code)

Use the Supabase MCP tools to programmatically update templates:

mcp__supabase__execute_sql

Note: Supabase stores email templates in the auth.config table.

Email Compatibility

The templates are designed with email client compatibility in mind:

• ✅ Inline CSS (no external stylesheets)
• ✅ Table-based layouts avoided (modern flexbox approach)
• ✅ System fonts for reliability
• ✅ Minimal dependencies
• ✅ Responsive design for mobile
• ✅ High contrast for readability
• ✅ Tested color combinations

Testing

Before deploying, test templates with:

1. Supabase local testing - Use supabase start and trigger auth emails
2. Email preview tools - Services like Litmus or Email on Acid
3. Multiple email clients - Gmail, Outlook, Apple Mail, etc.

Maintenance

When updating templates:

1. Maintain consistent branding across all templates
2. Keep accessibility in mind (contrast ratios, alt text, etc.)
3. Test in multiple email clients
4. Verify all variable substitutions work correctly
5. Keep file sizes reasonable (images should be optimized)

Links

• ShopCall.ai: https://shopcall.ai
• Supabase Auth Docs: https://supabase.com/docs/guides/auth
• Email Template Variables: https://supabase.com/docs/guides/auth/auth-email-templates