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.