Careers page

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

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:

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

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

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.

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.

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}`	Your company name, headline, careers page look, and every open job on your careers page
`GET /v1/boards/{slug}/jobs/{job_id}`	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.

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:

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

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

Get started

Inbox

Jobs

Organization

Hiring settings

Connections and plan

Embed on your site

Links to a job

Your jobs page

Embed one job

Where applicants came from

Count applications

Sites that can embed

Build your own

Applying

Freshness

Fair use

Search engines

Opening and closing on every job

Match your site

Override on one site

Readable buttons

Your own CSS

Search engines

Things to know

​Share your careers page

​Embed on your site

​Links to a job

​Your jobs page

​Embed one job

​Where applicants came from

​Count applications

​Sites that can embed

​Build your own

​Applying

​Freshness

​Fair use

​Search engines

​Opening and closing on every job

​Match your site

​Override on one site

​Readable buttons

​Your own CSS

​Search engines

​Things to know

Share your careers page

Embed on your site

Links to a job

Your jobs page

Embed one job

Where applicants came from

Count applications

Sites that can embed

Build your own

Applying

Freshness

Fair use

Search engines

Opening and closing on every job

Match your site

Override on one site

Readable buttons

Your own CSS

Search engines

Things to know