Customizing ChartHop with AI
Customize ChartHop with AI
You don't need to know how to code to make ChartHop feel like yours.
The platform supports HTML and Markdown in several key areas — your homepage, employee profiles, document templates, and forms. That means you can customize layouts, add your brand colors and fonts, and surface the right information for every employee.
AI makes this fast. You describe what you want, share your brand details, and paste the output directly into ChartHop. The guides in this section walk you through exactly how to do it.
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.
How it works
ChartHop's customizable areas support dynamic field expressions — {{fieldCode}} — that pull in live employee data automatically. You write the layout once, and ChartHop personalizes it for every person in your org.
Every guide includes:
- What to collect before you start (colors, fonts, field codes)
- A copy-paste prompt you can take straight to Claude, ChatGPT, or any other AI tool
- Tips for getting better output
- Step-by-step instructions for adding it to ChartHop
Guides in this section
Profile Tab Config
Add custom tabs to employee profile pages. Use them to surface role-specific resources, display custom data fields, or organize information that doesn't have a home anywhere else in ChartHop.
Supports: HTML with inline CSS, {{fieldCode}} expressions
Letter Templates
Generate branded, personalized documents directly from ChartHop — offer letters, comp review letters, total rewards statements, PIIAs, proof of employment letters, and more. Templates have a dedicated Stylesheet tab, so you can define your brand styles once and reuse them across every document.
Supports: HTML, CSS classes via Stylesheet tab, {{fieldCode}} expressions, PDF generation
Form Text Blocks
Add instructional and contextual content to your ChartHop forms. Intro blocks, section headers, callouts, closing notes — anything that helps employees understand what a form is asking and what happens next.
Supports: HTML with inline CSS, Markdown, {{fieldCode}} expressions
Before you open any guide
Gather these basics first. You'll need them for every prompt.
What to collect | Why |
|---|---|
Primary brand color (hex) | Used for headers, accents, and CTAs |
Secondary / accent color (hex) | Used for backgrounds, borders, callouts |
Font name | Applied to all text in the layout |
Logo URL | Used in document headers (letter templates) |
Company name and address | Used in document headers (letter templates) |
Not sure where to start? Head to the Form Text Blocks guide first. It's the quickest win and gives you a feel for how field expressions work before you tackle more complex layouts.
