---
title: Build Custom Profile Tabs
slug: build-custom-profile-tabs
docTags: 
createdAt: 2026-04-06T18:23:37.768Z
---

# 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.

:::BlockQuote
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.

:::BlockQuote
\{% 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' %}
&#x20; \<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:

:::BlockQuote
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**

1. Go to Settings > Profile Tab Config
2. Create a new tab or open an existing one
3. Paste your HTML into the content area
4. Preview on a real employee profile
5. Set visibility permissions
6. Save

The tab will appear on every employee profile where your settings apply.