> ## 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
> Call them jobs, not postings, listings, or roles.
> To act for an employer, connect to the MCP server at https://mcp.hotfix.jobs/hiring and sign in with a Hotfix account. API keys are for HTTP scripts, not MCP.
> Only describe the routes, tools, and numbers these docs publish. If something isn't documented, say so instead of guessing.
> Webhooks are managed in the app under Settings > Connections > Webhooks. An API key or MCP client can't create or change them.
> Hotfix is the applicant tracking system. Applications land on the job in Hotfix and aren't sent to another ATS.
> Creating a draft, offer, or booking link sends nothing. A person sends the email from Hotfix.

# Jobs on your site

> Put your open jobs and the apply form on your own site with one line of code, and make them look like your site with your own CSS.

The embed puts your jobs on your own website: every open job with filters, each opening with its description and apply form, or one job's apply form alone. Applications land in Hotfix like any other, marked as from your site. Your stylesheet makes it look like the rest of your site.

## Add it

Paste the code where the jobs should go. For every open job:

```html theme={null}
<div id="hotfix-jobs"></div>
<script src="https://embed.hotfix.jobs/v1/embed.js" data-company="acme" async></script>
```

For one job's apply form alone, say on a page you wrote about that role:

```html theme={null}
<div id="hotfix-apply"></div>
<script src="https://embed.hotfix.jobs/v1/embed.js" data-job="JOB_ID" async></script>
```

You don't have to copy these by hand:

* **Every open job**: **Settings** > **Embed** in the web app or the desktop app has the code with your slug in it.
* **One job**: **Add to your site** in a job's **…** menu has the code with that job's id in it.
* **Your agent**: ask it to put your jobs on your site. The [`careers_embed`](https://docs.hotfix.jobs/hiring-mcp/tools#careers_embed) tool hands it both.

The code works on any site that lets you paste HTML, Webflow and Framer included. If the `div` isn't there, the jobs go right before the script.

## What it does

* **Every open job**: your jobs grouped by department and team, with the same search, work type, and location filters as your company page. A filter with one choice is hidden.
* **A job**: its description, then the apply form under it, and **All jobs** to go back.
* **One job's form**: only the apply form.
* **A closed job** says it's no longer taking applications, and goes back to your list when there is one.

The embed is always as tall as what it shows, with no scrollbar of its own. When someone opens a job, your page's address gets `?job=` with the job's id, so a reload or a shared link opens that job.

At the foot of the embed a line says applications go to your company through Hotfix, with a link to Hotfix's privacy policy.

## Applications from your site

Everyone applies as a guest and confirms their email with a code, as on hotfix.jobs unless you turned confirmation off. An application from the embed has `source: "site"`, and in the app it says they applied on your site. **Filters** > **Source** on Home narrows to them. See [Where they came from](https://docs.hotfix.jobs/applications.md#where-they-came-from).

The embed passes your page's `?source=` or `utm_source` on as the application's `channel`, so tracking links to your own careers page still count.

When someone applies, your page gets a `hotfix:applied` event on `window`, with the company's slug and the job's id. Nothing about the person is in it.

```js theme={null}
window.addEventListener("hotfix:applied", (event) => {
  console.log("applied", event.detail.company, event.detail.job);
});
```

## Make it look like your site

Without a stylesheet, the embed has a plain look: no background of its own, a system font, and simple rows. Your stylesheet changes as much of it as you like.

**Settings** > **Embed** has the stylesheet. **Save draft** checks it and keeps it as a draft, **Preview** opens the embed with the draft, and **Publish** puts it on your site. You can also ask your agent to match your site's look: it reads your site's CSS, writes the stylesheet, and sends you the preview before anything changes. Owners and admins change the stylesheet.

### Variables

Set these on `:root` for most of the look:

| Variable | What it is |
| - | - |
| `--hf-canvas` | The background, transparent unless you set it |
| `--hf-ink` | Text |
| `--hf-muted` | Secondary text, like a job's facts |
| `--hf-edge` | Lines between rows and around fields |
| `--hf-control` | Fields and filters |
| `--hf-accent` | The submit button |
| `--hf-accent-ink` | Text on the submit button |
| `--hf-radius` | Corners |
| `--hf-font` | The font |
| `--hf-max-width` | How wide the embed grows |

```css theme={null}
:root {
  --hf-canvas: #000;
  --hf-ink: #fff;
  --hf-muted: #b8b8b8;
  --hf-edge: #2c2c2c;
  --hf-accent: #e32a01;
  --hf-radius: 0px;
  --hf-font: "Brand Sans", Helvetica, sans-serif;
}
```

### Classes

For anything further, style these classes. They stay the same as the embed changes.

| Part | Classes |
| - | - |
| The whole embed | `hf-embed` |
| Filters | `hf-filters`, `hf-filter-search`, `hf-filter-select` |
| The list | `hf-department`, `hf-job-row`, `hf-job-title`, `hf-job-facts`, `hf-empty` |
| A job | `hf-back`, `hf-job-heading`, `hf-job-description` |
| The apply form | `hf-apply`, `hf-apply-section`, `hf-apply-field`, `hf-apply-label`, `hf-apply-help`, `hf-apply-input`, `hf-apply-file`, `hf-apply-choice`, `hf-required`, `hf-compliance` |
| Sending | `hf-apply-submit`, `hf-apply-error`, `hf-confirm`, `hf-success`, `hf-closed` |
| The privacy line | `hf-privacy` |

A field carries `data-type` with its kind (`text`, `email`, `textarea`, `single_select`, `boolean`, `file`, and so on) and `data-invalid` when it has an error.

### An example

This is the stylesheet behind Beacon, the made-up company on the hotfix.jobs homepage: black and white, each department in a column of its own beside its jobs, every job's facts under its title with an arrow at the end, and the filters as one underlined bar. The `@media` block follows the visitor's light or dark setting. Upload the font under **Settings** > **Embed** first and use its address in `@font-face`.

```css theme={null}
:root {
  --hf-canvas: #fff;
  --hf-ink: #000;
  --hf-muted: rgb(0 0 0 / 55%);
  --hf-edge: rgb(0 0 0 / 10%);
  --hf-radius: 0;
  --hf-font: "Inter Tight", system-ui, sans-serif;
  --hf-max-width: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hf-canvas: #000;
    --hf-ink: #fff;
    --hf-muted: rgb(255 255 255 / 55%);
    --hf-edge: rgb(255 255 255 / 15%);
  }
}

@font-face {
  font-family: "Inter Tight";
  src: url("https://cdn.hotfix.jobs/embed-themes/beacon/assets/inter-tight.woff2") format("woff2");
  font-weight: 400 600;
}

section {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0 24px;
  border-bottom: 1px solid var(--hf-edge);
}

.hf-department {
  margin: 0;
  padding-top: 15px;
  color: var(--hf-ink);
  font-size: 13px;
}

.hf-job-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 12px 0;
  border: 0;
}

.hf-job-row + .hf-job-row {
  border-top: 1px solid var(--hf-edge);
}

.hf-job-row::after {
  content: "→";
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--hf-muted);
}

.hf-job-row:hover .hf-job-title {
  text-decoration: none;
}

.hf-job-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.hf-job-facts {
  grid-row: 2;
  gap: 10px;
  font-size: 12px;
}

.hf-filters {
  gap: 8px 24px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hf-ink);
  font-size: 14px;
}

.hf-filter-search,
.hf-filter-select {
  border: 0;
  padding: 0;
  background: none;
}

.hf-filter-select {
  appearance: none;
  field-sizing: content;
  padding-right: 18px;
  font-weight: 500;
  background:
    linear-gradient(45deg, transparent 50%, var(--hf-muted) 50%) right 5px center / 5px 5px no-repeat,
    linear-gradient(135deg, var(--hf-muted) 50%, transparent 50%) right 0 center / 5px 5px no-repeat;
}

.hf-filter-search:focus,
.hf-filter-select:focus {
  outline: none;
}

.hf-privacy {
  margin-top: 24px;
  font-size: 12px;
}

@media (max-width: 480px) {
  section {
    grid-template-columns: 1fr;
  }

  .hf-department {
    padding-top: 18px;
  }
}
```

### What a stylesheet can't do

The embed takes applications, so a few things hold whatever the stylesheet says:

* **What a candidate must see stays visible**: the privacy line, the voluntary self-identification note, every question's label and required mark, errors, and the submit button. You can restyle them but not hide them.
* **`url()` reaches only your own files**: fonts and images you upload under **Settings** > **Embed** (woff2, woff, png, jpeg, gif, or webp, up to 2 MB each), or small `data:` images, SVG included, and fonts. A web font from elsewhere has to be uploaded first.
* **No `@import`, `@layer`, or `@namespace`**, and no `image-set()`, `expression()`, or `paint()`.

A stylesheet that breaks a rule isn't saved, and you get the lines to fix. Stylesheets can be up to 64,000 characters.

## Build your own instead

If you'd rather render the list in your own code, read your jobs from the public API and link each Apply button to the job on hotfix.jobs, or to the embed's one-job form. See [Build your own](https://docs.hotfix.jobs/company-page.md#build-your-own).


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