ChartHop by ChartHop
Customizing ChartHop with AI
Create a Letter Template
using ai to build letter templates letter templates are how you generate branded, personalized documents for your employees directly from charthop think offer letters, comp review letters, total rewards statements, compensation statements, proof of employment letters, piias, commission agreements, and more every template is built with html and pulls in live employee data automatically ai can write the whole thing you just need to bring your brand and tell it what the document should say what letter templates support letter templates have two tabs in the editor content and stylesheet content is where your html goes this is the structure and copy of the document stylesheet is where you define your css classes styles you define here can be used as class="" attributes throughout your content this means you can write clean, readable html in the content tab and keep all your brand styling in one place in the stylesheet you don't have to cram everything into inline styles templates also support dynamic fields using {{fieldcode}} syntax — pulls in live employee and org data a preview panel where you can select any employee to see the rendered document generate pdfs to produce downloadable files at scale what you can build document type examples compensation comp review letters, compensation statements, total rewards statements, equity grant letters legal / compliance piias, commission agreements, ndas, arbitration agreements employment offer letters, promotion letters, proof of employment letters policy remote work policies, off site agreements, leave policies performance performance acknowledgement forms, pip letters, review summaries before you start collect these inputs before you open an ai tool what to collect example primary brand color #6e37ff secondary color #3c137c font name montserrat, georgia, arial company name acme corp company address 173 w broadway, floor 2, new york, ny 10002 company phone 415 555 5555 document type offer letter, comp review letter, piia, etc tone formal and warm, direct and professional, legal neutral fields to include name, title, start date, manager, comp amount, etc dynamic fields you can use charthop populates these automatically when a document is generated for a specific employee field what it shows {{org image}} your company logo (hosted in charthop) {{org name}} your company name {{first name}} employee's first name {{last name}} employee's last name {{job title}} job title {{department name}} department {{manager name}} manager's name {{location name}} work location {{start date}} start date {{comp amount}} compensation amount {{employment type}} employment type for custom fields, find the field code in settings > fields and use it the same way the prompts to give your ai since templates have a content tab and a stylesheet tab, ask the ai to give you both separately step 1 generate the stylesheet you are helping me build a css stylesheet for a letter template in charthop, an hr platform this stylesheet will be pasted into the "stylesheet" tab of the template editor the css classes defined here will be used in the html content my brand details \ primary color \[your primary hex] \ secondary color \[your secondary hex] \ font \[your font name], with arial as fallback \ company name \[your company name] define css classes for \ a document header (company logo + address block side by side) \ section headings \ body text / paragraphs \ a data table (for displaying fields like comp amount, title, etc ) \ a signature block at the bottom \ any utility classes i might need (padding, spacing, font size) keep the class names simple and descriptive output only the css no explanation step 2 generate the content you are helping me write html for a letter template in charthop, an hr platform rules \ use css class names for styling — the stylesheet is defined separately \ dynamic fields use {{fieldcode}} syntax — keep these exactly as written \ no javascript \ no external stylesheets my stylesheet includes classes for \[list the class names from step 1, e g , "doc header, section heading, body text, data table, signature block"] i'm creating a \[document type — e g , "comp review letter" / "offer letter" / "proof of employment letter"] the document should include \ a header with the company logo using {{org image}} and the company address \ a greeting to {{first name}} {{last name}} \ \[list every section you need with the fields each section should use] \ a signature block at the bottom tone \[formal and warm / direct and professional / legal neutral] output only the html no explanation conditional logic some documents need to show different content for different employees a comp letter for a remote employee might include different language than one for someone in office an equity section should only appear if the employee actually has equity conditional logic makes this possible — all within a single template charthop uses {% if %} / {% endif %} blocks to control what appears in a document basic syntax {% if \[condition] %} content that only appears when the condition is true {% endif %} common examples show a section only if a field has any value {% if {{comp equity}} %} \<p>as part of your compensation, you have been granted equity in the company \</p> {% endif %} show different content based on employment type {% if {{employment type}} == 'full time' %} \<p>as a full time employee, you are eligible for our full benefits package \</p> {% endif %} show content based on location {% if {{location name}} == 'remote' %} \<p>as a remote employee, you will receive a home office stipend \</p> {% endif %} date specific conditions (useful for performance cycles or comp review rounds) {% if ((fieldcode && dateof fieldcode='2024 11 15') ? asofprimary('2024 11 15', {fieldcode}) null) %} \<p>your performance rating as of the november review cycle is reflected below \</p> {% endif %} this checks whether the rockfour field has a value recorded on a specific date, and if so, pulls it as of that date this is useful when you're generating documents tied to a specific review cycle rather than just the employee's current data how to prompt ai for conditionals tell the ai exactly what condition you want and what content should appear when it's true add a conditional section to this template that only appears if {{comp equity}} has a value if it does, show a paragraph that says \[your equity language here] use charthop's conditional syntax {% if \[condition] %} {% endif %} or for more complex logic i need a conditional block that checks whether an employee's \[field name] was recorded on \[date] if it was, show \[content] if not, show nothing use charthop's {% if %} / {% endif %} syntax and the asofprimary function for date specific field values tips for better results build your stylesheet once, reuse it everywhere once you have a stylesheet you like, you can use the same css classes across all your templates just paste the same stylesheet into each new template and focus the ai on the content describe every section explicitly "an intro paragraph, a compensation details table showing {{job title}}, {{comp amount}}, and {{start date}}, a benefits overview paragraph, a next steps section, and a signature block" gives the ai a clear structure to work from preview with a real employee use the preview panel and select an actual person from your org to see exactly how the document renders with live data this is the fastest way to catch broken field codes or layout issues use generate pdfs at scale once your template looks right, use the generate pdfs tab to produce documents for multiple employees at once no manual formatting required match the tone to the document an offer letter and a piia need very different voices tell the ai the exact tone you want and give it a sentence or two of example language if you have it adding it to charthop go to settings > letter templates click create template and name it select template as the document type paste your css into the stylesheet tab paste your html into the content tab use the preview panel to select an employee and check the output adjust as needed, then save once saved, the template is available to generate documents from any employee's profile or through a workflow
