Jobs on your site

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:

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

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

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

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

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

Get started

Hiring

Using the app

Other ways in

How Hotfix works

Account

Add it

What it does

Applications from your site

Make it look like your site

Variables

Classes

An example

What a stylesheet can’t do

Build your own instead

​Add it

​What it does

​Applications from your site

​Make it look like your site

​Variables

​Classes

​An example

​What a stylesheet can’t do

​Build your own instead

Add it

What it does

Applications from your site

Make it look like your site

Variables

Classes

An example

What a stylesheet can’t do

Build your own instead