Build your ChartHop Homepage
Give your ChartHop homepage a real upgrade
Using AI to Build Your ChartHop Homepage
The ChartHop homepage is one of the most visible things you can customize. It's the first thing your team sees when they log in, so it's worth making it feel like yours.
Good news: you don't need to know how to code to make it look great. You just need to know your brand and how to give an AI the right instructions.
What the homepage supports
The Homepage Config in ChartHop accepts HTML with inline CSS. That means you can use:
- Custom layouts (columns, banners, cards)
- Your brand colors and fonts
- Images and logos
- Dynamic fields that pull in live employee data (more on that below)
- Links to internal resources
- Gradients, box shadows, and positioned elements
- CSS grid and flexbox layouts
No JavaScript. No external stylesheets. Everything needs to be self-contained in the HTML you paste in.
Before you start
Gather these things before you open an AI tool. The more specific you are, the better your output will be.
What to collect | Example |
|---|---|
Primary brand color | #6E37FF |
Secondary brand color | #3C137C |
Accent or background color | #F5F0FF |
Font name | Inter, Montserrat, Arial |
Logo URL | A publicly hosted image link |
What you want to greet users with | First name, job title, department |
Links you want featured | Handbook, benefits portal, org chart |
Tone/vibe | Clean and minimal, warm and welcoming, bold and branded |
Dynamic fields you can use
ChartHop uses {{fieldCode}} syntax to pull in live data for the logged-in user. Drop these directly into your HTML.
Field | What it shows |
|---|---|
{{name}} | Employee's full name |
{{first.name}} | Employee's first name |
{{last.name}} | Employee's last name |
{{title}} | Current job title |
{{department.name}} | Department name |
{{manager.name}} | Manager's name |
{{location.name}} | Office or work location |
{{startDate}} | Start date |
You can use these anywhere in your HTML — inside headings, paragraphs, cards, or anywhere text would go.
Note: {{name}} is the field code for full name on the homepage. {{title}} is the correct field code for job title — not {{job.title}}. If a field renders blank, check Settings > Fields to confirm the exact field code for your org.
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.
Tips for better results
Be specific about layout. "A banner at the top with my logo and a welcome message, then two columns below with quick links" gives the AI a lot more to work with than "make it look nice."
Ask for one section at a time. If you want a homepage with a banner, a resource grid, and an announcement area, prompt for each one separately, then combine them.
Use grid for two-column layouts. The homepage renderer supports display:grid — use grid-template-columns: 1fr 1fr for two-column sections. This gives you more control than flex alone.
Test your field codes. Paste the HTML into ChartHop and preview it as a real employee to confirm the dynamic fields are rendering correctly. If a field shows up blank, go to Settings > Fields and search for the right field code.
Iterate fast. If the first output isn't right, paste it back into the AI and describe what you want changed. You don't have to start from scratch.
Pasting it into ChartHop
- Go to Settings > Homepage Config
- Paste your HTML into the editor
- Preview the page to check how it looks for different employees
- Save when you're happy with it
That's it. Your whole team will see the updated homepage the next time they log in.