> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hotfix.jobs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Product noun is jobs.
> MCP at https://rest.hotfix.jobs/mcp is the hiring contract for agents. Clients sign in with Hotfix; API keys are for HTTP only.
> Do not invent unpublished REST or hiring stats. Webhooks are set up in the app; there is no REST route or MCP tool to manage them.
> Do not mention Greenhouse, Ashby, Quick Apply, or claim.
> Creating a draft, offer, or booking link does not send email.

# Careers page

> Your hosted careers page, how to embed it on your own site with one snippet, how to build your own from the API, and how to match your site's look.

Every company gets a careers page at `https://apply.hotfix.jobs/{slug}`. It lists your open jobs, and each job has its own page at `https://apply.hotfix.jobs/{slug}/{job_id}`. A job page has two tabs: **Overview**, with the job's details and description, and **Apply**, with the apply form at `https://apply.hotfix.jobs/{slug}/{job_id}/apply`. Your slug is the last part of your careers page URL.

A job is on the careers page while its `on_board` flag is true. See [Jobs](/jobs).

## Share your careers page

Link to the careers page from anywhere: your website, a job post, an email. Visitors can search, and filter by category, work type, and location. Filters stay in the page URL, so a filtered link opens filtered, and going back from a job keeps them.

To see where applicants came from, add `?source=` to the link, like `https://apply.hotfix.jobs/acme?source=linkedin`. See [Where they came from](/applications#where-they-came-from).

## Embed on your site

Put your open jobs on your own careers page instead of linking out. Add a container where the jobs should appear, and the script after it:

```html theme={null}
<div id="careers"></div>
<script
  src="https://apply.hotfix.jobs/embed.js"
  data-board="acme"
  data-target="#careers"
  async
></script>
```

Set `data-board` to your slug. `data-target` is a CSS selector for the container. Without it, the jobs appear right after the script tag.

The embed shows your jobs and their apply forms inside your page. People search, read a job, and apply without leaving your site. It leaves out the company header and footer, since your page already has them, and its background is transparent so your page shows through.

The embed grows to fit your jobs. It never shows a scrollbar of its own.

### Links to a job

When someone opens a job in the embed, your page's URL gets `?hf_job={job_id}`. Share that link and it opens straight to the job. Back returns to the list.

Search and filters go into your page's URL too, as `hf_q`, `hf_department`, `hf_team`, `hf_work`, and `hf_location`. A reload or a shared link keeps them.

### Your jobs page

Once your careers page is embedded on your own site, tell Hotfix where. In the app, go to **Settings** > **Careers page** and enter that page's address under **Your jobs page**, like `https://acme.com/careers`.

Links Hotfix makes then open your page instead of your careers page on `apply.hotfix.jobs`:

* The careers page link in emails to candidates (`{{board_url}}` in templates).
* Job links you copy in the app, including tracking links, and **View listing**. A job opens as `https://acme.com/careers?hf_job={job_id}`.

Search engines still index your careers page on `apply.hotfix.jobs`, and the API's `url` for each job stays there. Leave the field empty to link to Hotfix again.

### Embed one job

To put a single job on a page, add `data-job` with the job's id. In the app, open the job and use the code icon (**Copy embed code**) to copy this snippet ready-made. The embed shows that job's Overview and Apply tabs, without the link back to all jobs.

```html theme={null}
<script
  src="https://apply.hotfix.jobs/embed.js"
  data-board="acme"
  data-job="JOB_ID"
  data-target="#careers"
  async
></script>
```

To show only the apply form, add `data-view="apply"` as well, or pick **Apply form only** from the same menu. The embed shows the job title and the form, with no tabs or description. Use it when your page already describes the job.

When `data-job` is set, your page's URL doesn't get `?hf_job`.

### Where applicants came from

If someone lands on your page with `?source=` or `utm_source` in the URL, the embed passes it along. Their application keeps its `channel`, the same as on the hosted careers page. See [Where they came from](/applications#where-they-came-from).

### Count applications

When someone applies in the embed, your page gets a `hotfix:applied` event, so you can count it in your analytics. It fires once the application is in: straight away, or after the candidate enters the code we email them, if you ask applicants to confirm. `event.detail` has your careers page slug and the job's id, and nothing about the person.

```js theme={null}
window.addEventListener("hotfix:applied", (event) => {
  const { board, job } = event.detail;
  gtag("event", "job_application", { board, job });
});
```

### Sites that can embed

By default, any site can embed your careers page. To allow only yours, go to **Settings** > **Careers page** > **Embed options** and list them under **Sites that can embed**, one domain per line, like `acme.com`. Each domain covers its subdomains, so `acme.com` also allows `www.acme.com` and `careers.acme.com`. Add `localhost` to try the embed on your own computer. Browsers then refuse to show the embed on any other site.

## Build your own

To design the page yourself, read your jobs from the API and render them however you like. No API key is needed, and you can call it from your site's own JavaScript or from your server.

```js theme={null}
const res = await fetch("https://rest.hotfix.jobs/v1/boards/acme");
const page = await res.json();

for (const job of page.jobs) {
  console.log(job.title, job.locations, job.url);
}
```

| Route | Returns |
| - | - |
| [`GET /v1/boards/{slug}`](/reference/get-careers-page) | Your company name, headline, careers page look, and every open job on your careers page |
| [`GET /v1/boards/{slug}/jobs/{job_id}`](/reference/get-careers-page-job) | One job, with its full description in Markdown |

Only jobs on your careers page are returned, the same ones your hosted careers page shows. A job leaves the response when you close or pause it. If your plan ends, your careers page goes offline: both routes answer `404` until you're on a plan again.

### Applying

Each job has a `url`, its page on `apply.hotfix.jobs`. Link your Apply button to that URL with `/apply` on the end, which opens the job's Apply tab. Applications land in your inbox, the same as from your hosted careers page.

To see where applicants came from, add `?source=` to the link, like `{url}?source=careers-site`. See [Where they came from](/applications#where-they-came-from).

### Freshness

Responses are cached for up to five minutes. When you add, edit, or close a job, Hotfix lists one on search, or you change your careers page's look, the cache is cleared and the change shows up within seconds.

### Fair use

Calls are limited per address. A normal careers page never gets near the limit. If you go over it, you get `429` with a `Retry-After` header. To be safe, fetch once per page view, or at build time if your site is static.

### Search engines

Your jobs stay indexed on `apply.hotfix.jobs`, with Google for Jobs markup, whatever you build. Your own page is indexed as your own page. If you want Google for Jobs to read it too, add `JobPosting` markup to your job pages yourself.

## Opening and closing on every job

To show the same text on every job, go to **Settings** > **Careers page** > **Job posts** in the app:

* **Opening** appears above each job's description, like a few lines about working at your company.
* **Closing** appears below it, like an equal opportunity statement.

Both are Markdown, up to 5,000 characters each, and show on your careers page and in every embed. They're part of each job's Markdown copy and of the description search engines read for Google for Jobs. They don't change the description you wrote for each job.

If you build your own page, `GET /v1/boards/{slug}/jobs/{job_id}` returns them as `job_opening` and `job_closing`, beside the job. Each is `null` when unset.

## Match your site

Set your careers page's look in the app under **Settings** > **Careers page**. It applies to your hosted careers page and to every embed.

| Setting | Options |
| - | - |
| Accent | Any hex color. Used for the Apply button and filter focus. |
| Font | Geist (default), Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito Sans, Work Sans, Manrope, Plus Jakarta Sans, DM Sans, IBM Plex Sans, Source Serif, Merriweather, Lora, Playfair Display, or System |
| Corners | Rounded (default), Square, which removes rounding everywhere, or Pill, which makes buttons, inputs, and selects fully round |
| Apply label | Auto (default), White, or Black |

The preview shows the Apply button as your careers page draws it.

### Override on one site

To use a different look in one embed, add attributes to its script tag. Each one replaces that setting for this embed only. Settings you don't override keep what you saved.

| Attribute | Values |
| - | - |
| `data-font` | `geist`, `inter`, `roboto`, `open-sans`, `lato`, `montserrat`, `poppins`, `nunito-sans`, `work-sans`, `manrope`, `plus-jakarta-sans`, `dm-sans`, `ibm-plex-sans`, `source-serif`, `merriweather`, `lora`, `playfair-display`, `system` |
| `data-radius` | `square`, `rounded`, `pill` |
| `data-accent` | A hex color like `#1F6B4A` |
| `data-accent-text` | `auto`, `white`, or `black` |
| `data-theme` | `light` (default), `dark` for a dark page (light text and dark controls, still transparent), or `auto` to follow the visitor's light or dark setting |

For example:

```html theme={null}
<script
  src="https://apply.hotfix.jobs/embed.js"
  data-board="acme"
  data-target="#careers"
  data-font="inter"
  data-radius="pill"
  data-accent="#E4572E"
  data-accent-text="white"
  async
></script>
```

An unknown value is ignored, and the saved setting is used.

### Readable buttons

With the Apply label on Auto, the label is black or white, whichever is easier to read on your accent. If neither reads well, the button keeps the standard dark style instead of your accent.

Pick White or Black to match the buttons on your own site. Your choice is kept as long as it has at least 3:1 contrast with the accent. Below that, the readable color is used. White on yellow, for example, shows black. The preview in **Settings** > **Careers page** says when this happens.

## Your own CSS

To restyle the embed beyond these settings, add up to 3 stylesheets in **Settings** > **Careers page** > **Embed options** > **Stylesheets**. Each must be an `https` URL on your own site. Every embed of your careers page loads them, and they win over Hotfix's styles. Your hosted careers page doesn't load them.

Target these attributes rather than class names, which can change at any time:

| Attribute | What it marks |
| - | - |
| `[data-hf="board"]` | The job list |
| `[data-hf="board-headline"]` | Your headline above the list |
| `[data-hf="board-filters"]` | Search and filters |
| `[data-hf="board-group"]` | A group of jobs, like Engineering |
| `[data-hf="board-job"]` | One job in the list |
| `[data-hf="job"]` | A job page (`data-tab` is `overview` or `apply`) |
| `[data-hf="job-title"]` | The job's title |
| `[data-hf="job-details"]` | The details table; each row is `job-detail` |
| `[data-hf="job-tabs"]` | The Overview and Apply tabs; each is `job-tab` |
| `[data-hf="job-opening"]` | Your opening, above the description |
| `[data-hf="job-description"]` | The job's description |
| `[data-hf="job-closing"]` | Your closing, below the description |
| `[data-hf="job-apply"]` | The Apply button at the end of the description |
| `[data-hf="job-application"]` | The apply form |

For example:

```css theme={null}
[data-hf="job-title"] {
  letter-spacing: -0.02em;
}
[data-hf="board-job"]:hover {
  background: #f4f1ec;
}
```

With stylesheets added, images and fonts in the embed load only from Hotfix. That keeps a stylesheet from sending what candidates type in the apply form anywhere else. It also means an image in a job description that's hosted elsewhere won't show in the embed, and neither will a font your CSS loads from another site. Use `data-font` or the **Font** setting instead.

## Search engines

Search engines index your careers page and job pages on `apply.hotfix.jobs`, not the embed, so your jobs don't show up twice. A job that is only on your careers page is marked up for Google for Jobs there. A job also on Hotfix search points search engines to its Hotfix listing. Embedding doesn't change any of this.

## Things to know

* The embed loads from `apply.hotfix.jobs`. If your site sets a Content Security Policy, allow it in `script-src` and `frame-src`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.