Career page — Embedding in your website

You can display your Nextal career site inside your own website with an <iframe>, so candidates browse your openings without leaving your pages.

This page is written for whoever maintains your website. Before using it, enable IFrame in your website on Career page → Configuration.

The embed code

Replace YOUR-COMPANY with your own career-site address, and en with fr if your candidates should land in French.

<iframe id="nextal-careers"
        src="https://YOUR-COMPANY.nextal.co/en?iframe=true"
        style="width:100%;border:0;display:block;min-height:600px"
        scrolling="no" loading="lazy"></iframe>

<script>
(function () {
  var frame = document.getElementById('nextal-careers');
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://YOUR-COMPANY.nextal.co') return;
    if (e.source !== frame.contentWindow) return;
    var d = e.data;
    if (!d || d.source !== 'nextal-career-site') return;
    if (typeof d.height === 'number') frame.style.height = d.height + 'px';
    if (d.type === 'navigate') {
      var top = frame.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top: top, behavior: 'smooth' });
    }
  });
})();
</script>

The ?iframe=true parameter is what removes the career site’s own logo, language selector and footer, so the embed sits inside your page instead of looking like a second website.

Why the script is needed

An <iframe> never resizes itself to fit what is inside it — a browser keeps it at whatever height you set. And because the career site is served from a different address than your own website, your page is not allowed to measure it.

So the career site measures itself and sends the number to your page. The script above listens for that message and applies it. Without the script the embed still works exactly as it does today, but it keeps the fixed height you gave it: a long list of openings gets an inner scrollbar, and a short job description leaves a large blank area underneath.

The two checks at the top of the listener — e.origin and e.source — make sure your page only resizes itself for messages that genuinely come from your career site. Keep them.

If the embed sits far down your page

Nothing special is needed. The career site keeps measuring itself while the embed is still below the visitor’s screen, so its height is already correct by the time they scroll down to it. They never see it at the wrong size and never have to scroll away and back to fix it.

What the messages contain

Your page receives a small object each time something changes:

Field	Meaning
`source`	Always `nextal-career-site`. Lets you ignore messages from anything else on your page.
`type`	`ready` when the embed first loads, `height` when the content grows or shrinks, `navigate` when the candidate opens a different page inside the embed.
`height`	The height in pixels. Sent with every message, so you can ignore `type` if all you want is the resizing.
`path`	The page the candidate is on inside the embed, for example `/en/job-details/barista/68f2…`.

Scrolling back to the embed

When a candidate clicks an opening in a long list, the job description that replaces it is usually much shorter — so the embed shrinks, and without help the candidate ends up looking at whatever sits below it on your page.

That is what the navigate part of the script handles: it scrolls your page back to the top of the embed. The - 80 is a margin in pixels; increase it if your site has a fixed or sticky header that would otherwise cover the top of the embed, and lower it if you would rather the embed sit right at the top of the screen.

Settings worth checking

min-height — keep one on the <iframe> (600px in the example). This one is not decoration: it is the height the embed uses before the first message arrives, and it is what the frame falls back to if a message is ever missed. Set it to roughly the height of your shortest page, so nothing jumps on load.
scrolling="no" — stops the browser from showing a scrollbar inside the frame while the height is being adjusted.
Apply button in an iframe — with automatic resizing in place, Same tab is usually the right choice again: the application form now has room to display inside the embed. The “new tab” options remain useful if you deliberately keep the embed short.

Embedding the application form on its own

If you want a single job’s application form on one of your pages rather than the whole career site, embed it directly. The address of an opening’s form is:

https://YOUR-COMPANY.nextal.co/en/iframe/job-application/JOB-ID

The same script resizes it — nothing else changes.

If the embed does not resize

Nothing happens at all. Check that the address in e.origin matches the src of your iframe exactly, including https://. A mismatch is silent by design.
You already have a height on the iframe tag, even with !important. Leave it alone. A height written into the tag’s own style attribute — style="height: 2070px !important" and the like — is replaced by the script the first time a message arrives, priority included. There is nothing to clean up before adding the script.
The embed grows but never shrinks. Something on your page is imposing a height that outranks the script — most often a rule in your site’s stylesheet or theme that sets height on the iframe and marks it !important. That is the one case worth hunting down; remove the rule, or drop the !important from it.
The page jumps around on load. Raise the min-height closer to the height of your longest page.