Build Custom Profile Tabs

using ai to build custom profile tabs profile tabs let you add structured, branded content directly to an employee's profile page you can use them to surface role specific resources, display custom data, or organize information that doesn't have a home anywhere else in charthop you don't need to write the code yourself you just need to know what you want to show and give an ai the right instructions what profile tabs support profile tabs accept html with inline css that means custom layouts (columns, cards, tables) your brand colors and fonts images and links dynamic fields that pull in live employee data no javascript no external stylesheets everything needs to be self contained in the html you paste in common uses a "my role" tab with responsibilities, level, or team context a resource tab with links scoped to a department or location a quick reference tab for policies, contacts, or tools a custom display for fields you've added to your charthop instance before you start collect these inputs before you open an ai tool what to collect example primary brand color #6e37ff secondary / accent color #3c137c background color #ffffff or a light tint font name inter, lato, arial tab name "my resources," "role info," "team hub" what data to show title, manager, department, custom fields links to include benefits portal, team wiki, org chart dynamic fields you can use charthop uses {{fieldcode}} syntax to pull in live data for the employee whose profile is being viewed 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 {{employment type}} employment type 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 html for a custom profile tab in 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] \ accent color \[your accent hex] \ background \[your background hex or "white"] \ font \[your font name], with arial as fallback i want to build a profile tab called "\[tab name]" that shows \ \[field 1 — e g , "the employee's job title using {{title}}"] \ \[field 2 — e g , "their manager using {{manager name}}"] \ \[field 3 — e g , "quick links list them here"] design notes \ \[your preferences card layout, two columns, minimal, etc ] \ use my primary color for section headers \ keep it scannable — this is reference content, not a marketing page output only the html no explanation tips for better results think about who's viewing the tab profile tabs can be seen by the employee, their manager, or teammates depending on your permissions setup write your prompt with the right audience in mind name your custom fields clearly if you're using a custom field code, tell the ai what it represents for example "{{cf role focus}} is a custom field called role focus — it contains a short description of the employee's main area of work " keep each tab focused a tab with 12 sections is harder to navigate than two focused tabs one purpose per tab check field visibility make sure the fields you're pulling in are visible to the people viewing the tab, based on your charthop permissions settings 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 paste carefully charthop's content area renders a mix of markdown and inline html a few rules that matter use #### markdown headings for section titles instead of \<h4> tags use display flex; flex wrap wrap for multi column layouts — css grid isn't supported don't leave blank lines inside html blocks — blank lines cause the renderer to break out of html mode and display raw code instead conditional logic you can show or hide sections of a profile tab based on employee data this is useful when a tab serves multiple roles or locations and certain content only applies to some employees charthop uses {% if %} / {% endif %} blocks for this {% if {{employment type}} == 'full time' %} \<p>you're eligible for the full benefits package find details in the links below \</p> {% endif %} {% if {{location name}} == 'remote' %} \<p>your home office stipend information is managed through \[link] \</p> {% endif %} tell your ai exactly what condition you need and what content should appear when it's true add a section that only appears if {{location name}} equals 'remote' when it does, show \[your content] use charthop's conditional syntax {% if \[condition] %} {% endif %} adding it to charthop go to settings > profile tab config create a new tab or open an existing one paste your html into the content area preview on a real employee profile set visibility permissions save the tab will appear on every employee profile where your settings apply