Business & Operations

Free Job Openings List Widget

Show your open roles anywhere on your site with a simple JSON config.

A clean job openings list that renders your open roles from a small JSON config, with department, location, and type for each role plus an optional department filter. It is built for company careers pages, agencies, and small businesses that want a lightweight hiring section without a full ATS. Paste one script tag where you want the list to appear — no dependencies, no accounts.

Live demo

Embed this widget

Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.

Hosted (recommended)html
<script src="https://hayneslab.dev/widgets/job-openings-list.js" data-hl-config='[{"title":"Senior Frontend Engineer","department":"Engineering","location":"Remote","type":"Full-time","href":"#apply-frontend"},{"title":"Product Designer","department":"Design","location":"Charlotte, NC","type":"Full-time","href":"#apply-designer"},{"title":"DevOps Engineer","department":"Engineering","location":"Remote","type":"Contract","href":"#apply-devops"},{"title":"Marketing Manager","department":"Marketing","location":"Charlotte, NC","type":"Part-time","href":"#apply-marketing"}]' data-hl-title="We're Hiring" async></script>
<!-- Free Job Openings List widget by haynes lab — https://hayneslab.dev/tools/widgets/job-openings-list -->
Inline (self-contained)html
<!-- Free Job Openings List widget by haynes lab — https://hayneslab.dev/tools/widgets/job-openings-list -->
<script data-hl-config='[{"title":"Senior Frontend Engineer","department":"Engineering","location":"Remote","type":"Full-time","href":"#apply-frontend"},{"title":"Product Designer","department":"Design","location":"Charlotte, NC","type":"Full-time","href":"#apply-designer"},{"title":"DevOps Engineer","department":"Engineering","location":"Remote","type":"Contract","href":"#apply-devops"},{"title":"Marketing Manager","department":"Marketing","location":"Charlotte, NC","type":"Part-time","href":"#apply-marketing"}]' data-hl-title="We're Hiring">
/*!
 * haynes lab — Job Openings List widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/job-openings-list
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-job-openings-list';
  var STYLE_ID = 'hlw-job-openings-list-styles';

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/job-openings-list.js"]');
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { position: relative; max-width: 720px; margin: 0 auto; padding: 28px 28px 34px;' +
      ' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
      ' font-size: 16px; line-height: 1.5; color: #1f2937; background: #ffffff;' +
      ' border: 1px solid #e5e7eb; border-radius: 12px; }' +
      '.' + PREFIX + '__header { display: flex; align-items: baseline; justify-content: space-between;' +
      ' gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }' +
      '.' + PREFIX + '__title { margin: 0; font-size: 20px; font-weight: 700; color: #111827; }' +
      '.' + PREFIX + '__count { font-size: 13px; color: #6b7280; }' +
      '.' + PREFIX + '__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }' +
      '.' + PREFIX + '__filter { border: 1px solid #e5e7eb; border-radius: 999px; background: #ffffff;' +
      ' color: #374151; font-size: 13px; padding: 5px 14px; cursor: pointer; line-height: 1.4; }' +
      '.' + PREFIX + '__filter:hover { border-color: var(--hlw-accent); color: var(--hlw-accent); }' +
      '.' + PREFIX + '__filter[aria-pressed="true"] { background: var(--hlw-accent);' +
      ' border-color: var(--hlw-accent); color: #ffffff; }' +
      '.' + PREFIX + '__filter:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
      '.' + PREFIX + '__list { list-style: none; margin: 0; padding: 0;' +
      ' border-top: 1px solid #e5e7eb; }' +
      '.' + PREFIX + '__job { display: flex; align-items: center; justify-content: space-between;' +
      ' gap: 16px; padding: 14px 4px; border-bottom: 1px solid #e5e7eb; }' +
      '.' + PREFIX + '__job-title { font-weight: 600; font-size: 15px; color: #111827; }' +
      '.' + PREFIX + '__job-meta { font-size: 13px; color: #6b7280; margin-top: 2px; }' +
      '.' + PREFIX + '__job-meta span + span::before { content: "·"; margin: 0 6px; }' +
      '.' + PREFIX + '__apply { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--hlw-accent);' +
      ' text-decoration: none; white-space: nowrap; }' +
      '.' + PREFIX + '__apply:hover { text-decoration: underline; }' +
      '.' + PREFIX + '__apply:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px;' +
      ' border-radius: 4px; }' +
      '.' + PREFIX + '__empty { padding: 18px 4px; font-size: 14px; color: #6b7280; text-align: center; }' +
      '.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
      ' display: inline-flex; align-items: center; gap: 4px; color: #9ca3af; text-decoration: none; }' +
      '.' + PREFIX + '__credit svg { display: block; }' +
      '.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
      '@media (max-width: 560px) { .' + PREFIX + ' { padding: 20px 18px 32px; }' +
      ' .' + PREFIX + '__job { flex-direction: column; align-items: flex-start; gap: 6px; } }';
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = css;
    document.head.appendChild(style);
  }

  function parseJobs(script) {
    var raw = script.getAttribute('data-hl-config');
    if (!raw) {
      console.warn('[haynes lab job-openings-list] Missing required data-hl-config attribute (JSON array of {title, department, location, type, href}). Nothing rendered.');
      return null;
    }
    var items;
    try {
      items = JSON.parse(raw);
    } catch (e) {
      console.warn('[haynes lab job-openings-list] data-hl-config is not valid JSON. Nothing rendered.', e);
      return null;
    }
    if (!Array.isArray(items)) {
      console.warn('[haynes lab job-openings-list] data-hl-config must be a JSON array. Nothing rendered.');
      return null;
    }
    var valid = items.filter(function (j) {
      return j && typeof j.title === 'string' && j.title;
    });
    if (!valid.length) {
      console.warn('[haynes lab job-openings-list] data-hl-config has no valid roles (each needs at least "title"). Nothing rendered.');
      return null;
    }
    return valid;
  }

  function el(tag, className, text) {
    var node = document.createElement(tag);
    if (className) node.className = className;
    if (text != null) node.textContent = text;
    return node;
  }

  function logoSvg() {
    var svgNS = 'http://www.w3.org/2000/svg';
    var svg = document.createElementNS(svgNS, 'svg');
    svg.setAttribute('viewBox', '0 0 32 32');
    svg.setAttribute('width', '13');
    svg.setAttribute('height', '13');
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
    function circle(cx, cy, r, attrs) {
      var c = document.createElementNS(svgNS, 'circle');
      c.setAttribute('cx', cx);
      c.setAttribute('cy', cy);
      c.setAttribute('r', r);
      for (var key in attrs) c.setAttribute(key, attrs[key]);
      svg.appendChild(c);
    }
    circle(16, 16, 16, { fill: '#0f0a0a' });
    circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
    circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
    circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
    circle(16, 16, 3, { fill: '#06b6d4' });
    circle(24.5, 7.5, 2, { fill: '#f97316' });
    circle(7, 16, 1.8, { fill: '#f97316' });
    circle(20, 20, 1.5, { fill: '#f97316' });
    return svg;
  }

  function build(script) {
    var jobs = parseJobs(script);
    if (!jobs) return;

    var title = script.getAttribute('data-hl-title') || 'Open Positions';
    var accent = script.getAttribute('data-hl-accent') || '#f97316';
    var showFilter = script.getAttribute('data-hl-filter') !== 'false';

    injectStyles();

    var root = el('div', PREFIX);
    root.setAttribute('role', 'region');
    root.setAttribute('aria-label', title);
    root.style.setProperty('--hlw-accent', accent);

    var header = el('div', PREFIX + '__header');
    header.appendChild(el('h3', PREFIX + '__title', title));
    var count = el('span', PREFIX + '__count');
    header.appendChild(count);
    root.appendChild(header);

    var departments = [];
    jobs.forEach(function (j) {
      if (j.department && departments.indexOf(j.department) === -1) {
        departments.push(j.department);
      }
    });

    var list = el('ul', PREFIX + '__list');
    var empty = el('div', PREFIX + '__empty', 'No open roles in this department right now.');
    empty.hidden = true;

    function render(filter) {
      var shown = 0;
      list.textContent = '';
      jobs.forEach(function (j) {
        if (filter && j.department !== filter) return;
        shown++;
        var item = el('li', PREFIX + '__job');
        var info = el('div');
        info.appendChild(el('div', PREFIX + '__job-title', j.title));
        var meta = el('div', PREFIX + '__job-meta');
        if (j.department) meta.appendChild(el('span', null, String(j.department)));
        if (j.location) meta.appendChild(el('span', null, String(j.location)));
        if (j.type) meta.appendChild(el('span', null, String(j.type)));
        if (meta.childNodes.length) info.appendChild(meta);
        item.appendChild(info);
        if (j.href) {
          var apply = el('a', PREFIX + '__apply', 'View role →');
          apply.href = String(j.href);
          apply.setAttribute('aria-label', 'View role: ' + j.title);
          item.appendChild(apply);
        }
        list.appendChild(item);
      });
      empty.hidden = shown > 0;
      count.textContent = shown + (shown === 1 ? ' open role' : ' open roles');
    }

    if (showFilter && departments.length > 1) {
      var filters = el('div', PREFIX + '__filters');
      filters.setAttribute('role', 'group');
      filters.setAttribute('aria-label', 'Filter by department');
      var buttons = [];
      ['All'].concat(departments).forEach(function (dept, i) {
        var btn = el('button', PREFIX + '__filter', dept);
        btn.type = 'button';
        btn.setAttribute('aria-pressed', i === 0 ? 'true' : 'false');
        btn.addEventListener('click', function () {
          buttons.forEach(function (b) { b.setAttribute('aria-pressed', 'false'); });
          btn.setAttribute('aria-pressed', 'true');
          render(dept === 'All' ? null : dept);
        });
        buttons.push(btn);
        filters.appendChild(btn);
      });
      root.appendChild(filters);
    }

    root.appendChild(list);
    root.appendChild(empty);
    render(null);

    var credit = el('a', PREFIX + '__credit');
    credit.appendChild(logoSvg());
    credit.appendChild(document.createTextNode('Powered by haynes lab'));
    credit.href = 'https://hayneslab.dev/tools/widgets/job-openings-list';
    credit.target = '_blank';
    credit.rel = 'noopener';
    root.appendChild(credit);

    if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
      script.insertAdjacentElement('afterend', root);
    } else {
      document.body.appendChild(root);
    }
  }

  function init() {
    var script = findScript();
    if (!script) {
      console.warn('[haynes lab job-openings-list] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();

</script>

Configuration

Every option is an attribute on the script tag — the same attributes the customizer above exposes. All attributes are optional unless marked required — defaults apply when omitted.

AttributeDefaultDescription
data-hl-config(required)JSON array of roles, each with title, department, location, type, and href (link to the posting).
data-hl-title"Open Positions"Heading shown above the list of roles.
data-hl-filter"true"Set to "false" to hide the department filter buttons (auto-hidden with only one department).
data-hl-accent"#f97316"Color for the active filter button, apply links, and focus states.

Frequently asked questions

How do I install the Job Openings List?

Paste the script snippet where you want the list to appear and put your roles in the data-hl-config attribute as a JSON array — the widget renders inline right after the tag.

Can I change the heading, colors, or turn off the filter?

Yes — use data-hl-title for the heading, data-hl-accent for the highlight color, and data-hl-filter="false" to hide the department filter buttons.

Does it work on WordPress, Shopify, or Squarespace?

Yes — it is a single vanilla JS file with no dependencies, so it works on WordPress, Shopify, Squarespace, or any site that can embed a script tag.

More free widgets

Business & Operations

Staff Directory

A filterable staff grid with photos, roles, and department buttons.

View toolBusiness & Operations

Pricing Table

Responsive pricing tiers with a monthly/annual billing toggle.

View toolBusiness & Operations

Changelog Feed

Show product updates grouped by release date with colored type badges.

View tool

Need a custom widget?

We build custom widgets, integrations, and whole products. Tell us what your site needs and we'll scope it.

Get in Touch