New Client Onboarding Checklist

Collect these from the client before starting:

• Google Docs copy document — the campaign email copy with “Email #1”, “Email #2” headings and metadata tables Required
• Stationery wrapper HTML — the full email shell (header, footer, social links) from their email platform. Must contain a body slot placeholder (e.g., [[S63:3]]) Required
• Brand colors — primary, accent, button background/hover. Ask for hex codes or a brand guide PDF. Required
• Font family — what font does their email template use? Is it loaded via Google Fonts in the stationery wrapper? Required
• Signature details — who signs the emails? For each signer: name, title, signature image URL (light + dark mode), and/or headshot image URL Required
• Email platform merge field syntax — how does their platform handle personalization? Examples:
  • Luminate: [[S1:first_name]]
  • Mailchimp: *|FNAME|*
  • HubSpot: {{contact.firstname}} Required
• UTM spreadsheet — an .xlsx or .csv with tracking URLs. Note the column header names they use. Optional
• Banner placeholder image URL — a hosted 600×300 placeholder, or use the generic one Optional
• Language requirements — bilingual (English + French)? Other languages? If bilingual, get French org name and French greeting keywords. Optional

1. Copy the entire _template folder.
2. Rename the copy to your client name, e.g.:
   _template/ → CoastGuard/coastguard-builder/
3. Your folder structure should look like:

   AI Email Builder/
   ├── OCC/                    ← existing
   ├── CoastGuard/             ← new client
   │   └── coastguard-builder/
   │       ├── CLIENT_CONFIG.js
   │       ├── index.html
   │       ├── help/
   │       ├── drop-google-doc-html-here/
   │       └── _do-not-edit/
   └── _template/              ← stays untouched

Open CLIENT_CONFIG.js and replace every CHANGE_ME value. Every field is documented with inline comments.

Key sections to fill in:

1. Identity — orgName, orgNameFr, appTitle
2. Brand Colors — colorPrimary, colorAccent, etc.
3. Typography — fontFamily
4. Merge Fields — firstName, bodySlot, yearToken
5. UTM Columns — match to the client’s spreadsheet headers
6. Signatures — add each signer with detect pattern, name, title, image URLs
7. Language Detection — French markers (or empty array for English-only)
8. Button Style — CTA button appearance

1. Open index.html in a text editor.
2. Scroll to the very bottom — find the block:

   <!-- PASTE YOUR CLIENT'S STATIONERY WRAPPER HTML BELOW -->
   <script type="text/html" id="stationery-wrapper">
     ...placeholder HTML here...
   </script>

3. Replace everything between <script type="text/html"> and </script> with the client’s full stationery wrapper HTML.
4. Make sure the wrapper contains the body slot merge field (e.g., [[S63:3]]) matching what you set in CLIENT_CONFIG.mergeFields.bodySlot.

1. Double-click index.html to open it in Chrome.
2. Verify the header shows the correct client name.
3. Verify the brand colors are applied (header bar, buttons, active states).
4. Drop in the client’s Google Doc HTML and click Generate Emails.
5. Check:
   • All emails are detected and listed in the sidebar
   • Segments are discovered correctly from color-coded keys
   • Subject lines and preview text are extracted
   • Signatures are detected (correct signer type shown in metadata card)
   • Links have UTM URLs (or {need UTM} placeholders if no spreadsheet)
   • Bold text preserved, underlined text converted to links
   • Merge fields replaced (e.g., [First Name] → platform merge code)
6. Click Preview — verify the email renders inside the stationery wrapper with correct branding, footer, and social icons.
7. Click Copy HTML and paste into the email platform to verify it looks correct end-to-end.

The help page (help/index.html) ships with generic language. Optionally update:

• The hero title (currently “Email Builder”) with the client name
• Any platform-specific instructions (e.g., “paste into Luminate Online” vs. “paste into Mailchimp”)
• The footer text