Company page and embed

Your careers page lives on Hotfix and on your own site.

Your company page is https://hotfix.jobs/companies/{slug}. It shows your About, every open job grouped by department and team, then your tech stack and perks. It shows only your jobs. Share the link anywhere.
The embed puts the same jobs on a page of your own site with one snippet. People read a job and apply without leaving your site.

Each job has its own page at https://hotfix.jobs/jobs/{job_id} with two tabs: Overview, with the job’s details and description, and Apply, with the apply form at https://hotfix.jobs/jobs/{job_id}/apply. Your slug is the last part of your company page URL, shown under Settings > Company > Company page URL. A job is on your company page and in the embed while it’s open. See Jobs. Link to your company page from anywhere: your website, a job post, an email. Department buttons above the jobs narrow them to one department, and the choice stays in the page URL as ?department=. To see where applicants came from, add ?source= to the link, like https://hotfix.jobs/companies/acme?source=linkedin. See Where they came from.

Embed on your site

Add a container where the jobs should appear, and the script after it. You’ll find this snippet ready-made under Settings > Embed > Embed code.

<div id="careers"></div>
<script
  src="https://hotfix.jobs/embed.js"
  data-company="acme"
  data-target="#careers"
  async
></script>

Set data-company 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 grouped by department and team, with department buttons to narrow them, and each job’s Overview and Apply tabs. It leaves out the Hotfix header and footer, since your page has its own, and its background is transparent so your page shows through. It grows to fit your jobs and 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. A chosen department goes into your page’s URL too, as hf_department, so a reload or a shared link keeps it.

Your jobs page

Once the embed is on your site, tell Hotfix where. In the app, go to Settings > Embed 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 company page on Hotfix:

The careers page link in emails to candidates ({{careers_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 company page and job pages on hotfix.jobs. 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://hotfix.jobs/embed.js"
  data-company="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. 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 and shows as Embed in your inbox and Analytics. 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 slug and the job’s id, and nothing about the person.

window.addEventListener("hotfix:applied", (event) => {
  const { company, job } = event.detail;
  gtag("event", "job_application", { company, job });
});

The embed sets no cookies and runs no analytics of its own. Hotfix counts visits to it for your Analytics without storing anyone’s address.

Sites that can embed

By default, any site can embed your jobs. To allow only yours, go to Settings > Embed > 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.

Match your site

Set the embed’s look in the app under Settings > Embed > Appearance. It applies to the embed only. Your company page and job pages on hotfix.jobs keep Hotfix’s own look.

Setting	Options
Accent	Any hex color. Used for the Apply buttons.
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 and fields fully round
Apply label	Auto (default), White, or Black

The preview shows the Apply button as the embed draws it. Website link shows your website at the top of the offer and interview booking pages you send candidates. It’s on by default.

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://hotfix.jobs/embed.js"
  data-company="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 > Embed says when this happens.

Your own CSS

To restyle the embed beyond these settings, add up to 3 stylesheets in Settings > Embed > Embed options > Stylesheets. Each must be an https URL on your own site. Every embed loads them, and they win over Hotfix’s styles. Your company page on hotfix.jobs doesn’t load them. Target these attributes rather than class names, which can change at any time:

Attribute	What it marks
`[data-hf="job-list"]`	The job list
`[data-hf="job-filters"]`	The search, work type, and location filters
`[data-hf="department-filter"]`	The department buttons
`[data-hf="group"]`	A department’s jobs, like Engineering
`[data-hf="group-heading"]`	A department’s heading
`[data-hf="team-heading"]`	A team’s heading inside a large department
`[data-hf="job"]`	One job, in the list or on its own page
`[data-hf="job-title"]`	The job’s title
`[data-hf="job-meta"]`	The job’s details: pay, place, work type, team
`[data-hf="job-summary"]`	The job’s short summary in the list
`[data-hf="job-apply"]`	The Apply tab on a job page, until it is open
`[data-hf="job-header"]`	The top of a job page: title, details, and tabs
`[data-hf="job-tabs"]`	The Overview and Apply tabs; each is `job-tab`
`[data-hf="job-overview"]`	The Overview tab’s description
`[data-hf="job-application"]`	The apply form
`[data-hf="apply-submit"]`	The form’s submit button

For example:

[data-hf="job-title"] {
  letter-spacing: -0.02em;
}
[data-hf="group-heading"] {
  text-transform: uppercase;
}

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.

Opening and closing on every job

To show the same text on every job, go to Settings > Embed > 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. They show on each job’s page on hotfix.jobs and in the embed, and 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.

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/careers/acme");
const page = await res.json();

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

Route	Returns
`GET /v1/careers/{slug}`	Your company name, headline, embed look, opening and closing, and every open job you have

Each job has its department and team, with department_label and team_label to show, so you can group them the way your company page does. team is null when none of the department’s teams fits. A job leaves the response when you close it. If your plan ends, the route answers 404 until you’re on a plan again. job_opening and job_closing are null when unset.

Applying

Each job has a url, its page on 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. On the apply form, a candidate who attaches a resume gets the fields your form asks for, like name, email, phone, and links, filled in from it. Only empty fields are filled, never over what they typed, and they check before they submit. The resume is read for this and not stored until they apply. 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, or change the embed’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

Search engines index your company page and your job pages on hotfix.jobs, with Google for Jobs markup on each job. The embed is not indexed, so your jobs don’t show up twice. If you build your own page and want Google for Jobs to read it too, add JobPosting markup to your job pages yourself.

Things to know

The embed loads from hotfix.jobs. If your site sets a Content Security Policy, allow https://hotfix.jobs in script-src and frame-src.
When your plan ends, your jobs pause: your company page and the embed show no open jobs until you reactivate. See Billing.

Get started

Inbox

Jobs

Organization

Hiring settings

Connections and plan

Company page and embed

Embed on your site

Links to a job

Your jobs page

Embed one job

Where applicants came from

Count applications

Sites that can embed

Match your site

Override on one site

Readable buttons

Your own CSS

Opening and closing on every job

Build your own

Applying

Freshness

Fair use

Search engines

Things to know

​Share your company 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

​Match your site

​Override on one site

​Readable buttons

​Your own CSS

​Opening and closing on every job

​Build your own

​Applying

​Freshness

​Fair use

​Search engines

​Things to know

Share your company 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

Match your site

Override on one site

Readable buttons

Your own CSS

Opening and closing on every job

Build your own

Applying

Freshness

Fair use

Search engines

Things to know