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 you are helping me build html for charthop, an hr platform rules \ use only inline css (no \<style> tags, no external stylesheets) \ no javascript \ all html must be self contained \ dynamic fields use {{fieldcode}} syntax — keep these exactly as written my brand details \ primary color \[your primary hex] \ secondary color \[your secondary hex] \ background color \[your background hex or "white"] \ font \[your font name] — use it as the font family, with arial as fallback \ logo url \[your logo url, or "no logo"] i want to build a charthop homepage that \ greets the logged in employee by name using {{name}} \ shows their job title using {{title}} \ \[describe anything else quick links, announcements, a welcome message, etc ] design notes \ \[add your preferences minimal, full width banner, card layout, etc ] \ keep it clean and scannable \ use my primary color for headings and key accents output only the html no explanation 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