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