Create a Letter Template

Using AI to Build Letter Templates in ChartHop

Letter templates in ChartHop let you generate polished, branded documents for employees — offer letters, compensation statements, promotion letters, and more. You can build them once and generate them on demand for any employee.

You don't need to write the code yourself. You just need to know what you want the document to say and give an AI the right instructions.

What letter templates support

ChartHop's Letter Templates feature uses two tabs: a Content tab and a Stylesheet tab.

Tab	What goes here
Content	Your HTML, including {{fieldCode}} expressions and class="" attributes
Stylesheet	Your CSS class definitions — this is where all styling lives

This separation matters. Unlike profile tabs and the homepage, letter templates do not support inline styles for layout-critical properties. All CSS must be defined in the Stylesheet tab and applied via class names in the Content tab.

Common document types

Document type	What it typically includes
Offer letter	Name, title, start date, base salary, manager
Compensation statement	Current salary, bonus target, equity, effective date
Promotion letter	New title, new salary, effective date, manager
Termination letter	Name, last day, severance details
Leave confirmation	Name, leave type, start and return dates

Dynamic fields you can use

ChartHop uses {{fieldCode}} syntax to pull in live data for the employee the letter is being generated for.

Field	What it shows
{{first.name}}	First name
{{last.name}}	Last name
{{title}}	Job title
{{department.name}}	Department
{{manager.name}}	Manager's name
{{location.name}}	Work location
{{startDate}}	Start date
{{base}}	Base salary
{{org.name}}	Your organization's name
{{org.image}}	Your organization's logo

If you've created custom fields in ChartHop, you can use those field codes here too. Find them in Settings > Fields.

The prompt to give your AI

Copy the template below, fill in your details, and paste it into Claude, ChatGPT, or any AI tool you use.

You are helping me build a letter template for ChartHop's Letter Templates feature. Rules: - Use only CSS classes defined in a separate Stylesheet tab — no inline styles for layout-critical properties - No JavaScript - All HTML must be self-contained - Wrap all content in <body> tags - Use <table> for all multi-column layouts — flexbox and CSS Grid are not supported - No emoji or non-standard Unicode characters - Dynamic fields use {{fieldCode}} syntax — keep these exactly as written My brand details: - Primary color: [YOUR PRIMARY HEX] - Secondary color: [YOUR SECONDARY HEX] - Font: [YOUR FONT NAME], with Arial as fallback - Logo URL: [YOUR LOGO URL, or "no logo"] I want to build a letter template for: [DESCRIBE THE DOCUMENT TYPE] It should include: - [FIELD 1 — e.g., "Employee name using {{first.name}} {{last.name}}"] - [FIELD 2 — e.g., "Their job title using {{title}}"] - [FIELD 3 — e.g., "Their base salary using {{base}}"] Design notes: - [YOUR PREFERENCES: formal, clean, branded header, etc.] - Use my primary color for headings and key accents Output two things separately: 1. The stylesheet (CSS classes only — no inline styles) 2. The HTML content (uses those class names via class="" attributes, wrapped in <body> tags)

HTML rendering rules

ChartHop's PDF renderer supports a limited subset of HTML. Keep these constraints in mind when building your letter template.

Always wrap content in <body> tags. Without <body>, the renderer treats your content as plain text and outputs raw HTML tags literally in the PDF.

Avoid inline style attributes for layout-critical properties. Inline styles are sometimes ignored by the renderer. Define CSS classes in the Stylesheet tab instead and apply them via class="".

Use <table> for all multi-column layouts. Flexbox and CSS Grid are not supported. Any side-by-side layout must be built with nested <table> elements using width percentages.

The stylesheet applies globally. ChartHop's default stylesheet adds border: 1px solid gray to all table, tr, and td elements. If you don't want borders on your tables, explicitly override this in your stylesheet: table, tr, td, th { border: none; }

Avoid emoji and non-standard Unicode characters. The PDF renderer's font set does not include emoji glyphs — they render as # or a blank box. Use text or standard ASCII characters instead.

Keep table nesting to 2 levels where possible. Nested <table> closing tags can leak as visible text in some rendering contexts. Always verify with a downloaded PDF, not just the preview panel.

Adding page breaks

To force content onto a new page, add this class to your Stylesheet tab:

css

.pagebreak { page-break-after: always;}

Then place <div class="pagebreak"></div> in your content exactly where you want the break.

Do not use inline styles for page breaks — <div style="page-break-after:always;"> is ignored by the renderer. The class-based approach is the only method that works reliably.

Tips for better results

Prompt for the stylesheet first, then the content. Ask your AI to generate the stylesheet in one pass, then the HTML content in a second pass that references those class names. This keeps the output clean and easier to troubleshoot.

Name your custom fields clearly. If you're using a custom field code, tell the AI what it represents. For example: "{{cf_bonus_target}} is a custom field called Bonus Target — it contains a percentage."

Always verify with a downloaded PDF. The preview panel in ChartHop doesn't always match the final rendered PDF. Download the document before signing off on the template.

Keep table nesting shallow. If you need columns inside columns, restructure the layout rather than going three levels deep. Deeply nested tables are the most common source of rendering artifacts.

Iterate fast. If the first output isn't right, paste it back into the AI and describe what to change. You don't have to start over.

Pro tip: Before you start prompting, give your AI some context. Link it to docs.charthop.com or paste in the articles most relevant to what you're building. An AI that knows how ChartHop works will get you further, faster.

Adding it to ChartHop

Go to Settings > Letter Templates

Create a new template or open an existing one

Paste your CSS into the Stylesheet tab

Paste your HTML into the Content tab

Generate a test letter for a real employee

Download the PDF to verify rendering

Save when you're happy with it

Once saved, the template is available to generate documents from any employee's profile or through a workflow.